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

Question

再次回来提出另一个基本问题。但这让我很困惑。

我有一张山地自行车路线 map ，其中显示所有缩放级别的路线起点/ parking 场的图标。但是，当用户放大(缩放级别 >=12)时，我希望显示 GPS 轨迹。我对缩放控件/图层显示进行了排序，但符号化轨迹(矢量)是我陷入困境的地方。我尝试了多次迭代，但都没有解决我的问题。

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

My map ，就像现在一样。我(暂时)将 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

如果您想简化向 mbGreenMarker 图层组添加新 GeoJSON 数据的方式，但仍根据需要设置其样式，则只需在设置 mbGreenMarker 时添加样式定义即可 图层组。它也应该自动应用于稍后添加的数据(与 onEachFeature 相同)。

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

• 一旦进入中间 L.geoJson 组，该组始终显示在 map 上，并且您的指定样式。
• 第二次向 mbGreenMarker 添加数据时，没有任何自定义样式。只有第二层将由您的事件监听器打开/关闭。

您可以摆脱中间的 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)
  }
}