javascript - 根据 leaflet.js 中 map 的缩放级别使用不同的 JavaScript 文件

Question

所以我尝试使用 leaflet.js 创建基于 map 的可视化。我想做的是对 map 的不同缩放级别使用不同的 GeoJSON 文件。例如，当缩小时，我只想显示州边界，当放大时，也显示县边界。我将 GeoJSON 作为 JavaScript 变量放在 .js 文件中，并将其加载到正文中。当我只想加载一个 .js 文件时，它工作得很好，但是当我想要根据缩放级别动态更改 .js 文件时，我无法计算了解如何动态地使其他 .js 文件包含可用的地区 GeoJSON 数据。

我指的传单示例是 this一。我研究了许多处理动态 .js 文件加载的问题，但没有结果。

Answer 1

我使用map.on()属性来实现这一点。代码如下:

map.on('zoomend', function(e) {
  if (map.getZoom() > 5) {
    $.getScript('js/reassign_districts.js', function(data, textStatus, jqxhr) {
      console.log(textStatus); // Success
      console.log("Districts loaded.");
      if (jqxhr.status == 200) {
        map.removeLayer(geojson);
        loadGeoJson();
      }
    });
  } else if (map.getZoom() <= 5) {
    $.getScript('js/reassign_states.js', function(data, textStatus, jqxhr) {
      console.log(textStatus); // Success
      console.log("States loaded.");
      if (jqxhr.status == 200) {
        map.removeLayer(geojson);
        loadGeoJson();
      }
    });
  }
});

一些变量和函数虽然没有在这里定义，但就其名称而言是有意义的。