在 Leaflet.js 中根据地图的缩放级别使用不同的 JavaScript 文件

Question

所以我正在尝试使用 Leaflet.js 创建基于地图的可视化。我想要做的是为地图的不同缩放级别使用不同的 GeoJSON 文件。例如，当它缩小时，我只想显示州边界，放大时，也显示县边界。我将 GeoJSON 作为 JavaScript 变量存在于我加载到正文中的 .js 文件中。当我只想加载一个.js 文件时，它工作正常，但是当我想根据缩放级别动态更改.js 文件时，我无法弄清楚如何动态地制作另一个.js 文件可用的地区 GeoJSON 数据。

我指的传单示例是this one。我查看了许多处理动态 .js 文件加载的 SO 问题，但无济于事。

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();
      }
    });
  }
});

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