Leaflet JS 在按钮单击时专注于特定国家/地区

Question

使用

leaflet js

和

global

地图，如何在按下按钮时聚焦于特定国家/地区？

我知道我可以通过

map.setView({lat: 40.25, lng: -4.34}, 2);

将地图视图设置为特定的纬度和经度但是我想要一种根据国家/地区代码设置地图视图的方法，例如美国、日本。是否可以根据国家代码来聚焦地图？

Answer 1

快速查看 Leaflet.js 文档 并没有发现任何可以自动为您执行此操作的内容。

如果我正确理解您的要求，您希望将视图设置为特定国家/地区，然后放大该国家/地区，以便它占据尽可能多的视图。

互联网上有很多带有经纬度和国家代码的资源，例如：这里或这里

但是，仅有纬度和经度坐标还不够，因为您还需要知道每个国家的地图缩放多少。我在互联网上快速浏览了一下，找不到这样的资源。

下面是通过三个国家/地区的下拉选择按钮实现您想要的效果的一种方法。我手动估计了适当的缩放级别并将其添加到国家/地区对象中。

const countries = [{
    code: 'AU',
    country: 'Australia',
    lat: -27.0,
    lng: 133.0,
    zoom: 4
  },
  {
    code: 'BM',
    country: 'Bermuda',
    lat: 32.3333,
    lng: -64.75,
    zoom: 10
  },
  {
    code: 'CA',
    country: 'Canada',
    lat: 60.0,
    lng: -95.0,
    zoom: 3
  },
];

const osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

const countrySelector = document.getElementById("countries");
countrySelector.addEventListener("change", handleCountrySelect);

let foundCountry = countries.find((element) => element.code === 'AU');
let foundCountryCoords = L.latLng(foundCountry.lat, foundCountry.lng);
let marker = null;

const map = L.map('worldmap', {
  center: foundCountryCoords,
  zoom: foundCountry.zoom,
  layers: [osm]
});

function handleCountrySelect() {
  let foundCountry = countries.find((element) => element.code === countrySelector.value);
  let foundCountryCoords = L.latLng(foundCountry.lat, foundCountry.lng)

  map.setView(foundCountryCoords).setZoom(foundCountry.zoom);

  if (marker) map.removeLayer(marker);

  marker = L.marker(foundCountryCoords);
  map.addLayer(marker);
}

handleCountrySelect();

.map {
  width: 100%;
  height: 480px;
}

select {
  display: block;
  margin: 0 auto;
}

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
<div>
  <select id="countries">
    <option value="AU">Australia</option>
    <option value="BM">Bermuda</option>
    <option value="CA">Canada</option>
  </select>
</div>
<div id="worldmap" class="map"></div>