传单，着色矢量，同时仅在特定缩放级别显示它们

Question

再次回到另一个基本问题。不过这让我很困惑。

我有一张山地自行车道地图，在所有缩放级别显示 trailheads/parking 的图标。但是，当用户放大（缩放级别 >=12）时，我希望显示 GPS 轨迹。我对缩放 controls/layer 显示进行了排序，但我遇到了困难，但象征着轨迹（矢量）。我尝试了无数次迭代，但 none 解决了我的问题。

根据我编写代码的方式，我无法终生找出应用样式（颜色、不透明度、粗细）的正确方法。

My map，就像现在一样。我将地图（暂时）置于这条特定路线的中心。

麻烦代码：

//Load Montgomery Bell (Green)
var mbGreenMarker = L.geoJson();
$.getJSON("trails/MBgreenTrail.geojson", function(json) {
    L.geoJson(json ,{
                style:  function (feature)
                    {
                        return {"color": "#00ff00","weight": 5,"opacity": 1}
                    }
            },
            {
                onEachFeature: function( feature, layer ){
                         layer.bindPopup(feature.properties.type);
                    }
            }
    ).addTo(map);
    mbGreenMarker.addData(json);
    });

map.on('zoomend ', function(e) {
     if ( map.getZoom() < 12 ){ map.removeLayer(mbGreenMarker)}
     else if ( map.getZoom() >= 12 ){ map.addLayer(mbGreenMarker)}
});

我觉得有一种更有效的方法来加载 GeoJSON，对其进行符号化，然后通过 map.getZoom 函数传递它。

Answer 1

如果您想简化将新的 GeoJSON 数据添加到 mbGreenMarker 图层组的方式，但仍然根据需要设置样式，您可以在设置 mbGreenMarker 时简单地添加样式定义图层组。它也应该自动应用于以后添加的数据（与 onEachFeature 相同）。

请注意，使用您问题中发布的代码，您实际上从相同的 json 数据构建两次 Leaflet 矢量图层：

曾经在中间 L.geoJson 组中，那总是在地图上，与你的指定样式。
第二次向 mbGreenMarker 添加数据时，没有任何自定义样式。您的事件侦听器只会切换第 2 层 on/off。

您可以删除中间 L.geoJson 组并在 mbGreenMarker 中正确设置样式。结果将是与当前代码不同的行为。希望它更接近您尝试实现的目标。

var mbGreenMarker = L.geoJson(null, {
  style: function(feature) {
    return {
      "color": "#00ff00",
      "weight": 5,
      "opacity": 1
    }
  }
}, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.type);
  }
});

// Add mbGreenMarker to map if current zoom is >= 12.
showmbGreenMarker();

$.getJSON("trails/MBgreenTrail.geojson", function(json) {
  mbGreenMarker.addData(json);
});

map.on('zoomend ', showmbGreenMarker);

function showmbGreenMarker() {
  if (map.getZoom() < 12) {
    map.removeLayer(mbGreenMarker)
  } else if (map.getZoom() >= 12) {
    map.addLayer(mbGreenMarker)
  }
}

Answer 2

您可能还需要在 adding/removing:

之前检查 mbGreenMarker

if (map.getZoom() >= 12 && map.hasLayer(mbGreenMarker)) {}

如果用户可以add/remove图层控件中的图层就很有用了。

最后，您可以添加 scaling/viewport 信息，如图 here 这样应用程序在手机上看起来不错。

Example

传单，着色矢量，同时仅在特定缩放级别显示它们

Leaflet, coloring vectors while only displaying them at certain zoom levels

javascript

leaflet