javascript - Leaflet.js：maxZoom 和 minZoom 不起作用

Question

我正在使用leaflet.js 库制作带有标记的地图。文档有在地图上设置缩放级别的明确说明，但是当我使用 maxZoom 和 minZoom 这样做时，它被忽略了。这使得在网页中滚动地图变得困难。有谁知道为什么会发生这种情况或可能的解决方案？我的js代码如下。谢谢

var tiles = L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
{
  attribution:
    "Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
  subdomains: "abcd",
  minZoom: 0,
  maxZoom: 22,
  maxNativeZoom: 18,
}
  ),
  latlng = L.latLng(40.48, -3.71);

// initialize the map
var mymap = L.map("mymap", {
  center: latlng,
  zoom: 2,
  worldCopyJump: true,
  layers: [tiles],
});

// marker size based on number of cases
function getSize(d) {
  return d > 600 ? "35"
: d > 200 ? "30"
: d > 100 ? "28"
: d > 50  ? "26"
: d > 40  ? "20"
: d > 30  ? "15"
: d > 20  ? "13"
: d > 10  ? "11"
: "10";

//colour based on deaths
function getColor(d) {
  return d > 0 ? "#f03b20" : "#feb24c";
}

var markers = L.markerClusterGroup();

// load GeoJSON from an external file
var geoJsonLayer = L.geoJSON(ships, {
  style: function (feature) {
return feature.properties && feature.properties.style;
  },

  pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
  radius: getSize(feature.cases),
  fillColor: getColor(feature.deaths),
  color: getColor(feature.deaths),
  weight: 1,
  opacity: 0.2,
  fillOpacity: 0.8,
});
  },
});

markers.addLayer(geoJsonLayer);
mymap.addLayer(markers);
mymap.fitBounds(markers.getBounds());

标签： javascriptleafletgeojson