Question

再回到另一个基本问题。这让我很难过。

我有一个山地自行车道路地图，显示所有缩放级别的小道/停车图标。但是，当用户放大（缩放级别＆gt; = 12）时，我希望显示GPS轨迹。我对缩放控件/图层显示进行了排序，但是象征着轨迹（向量）是我被卡住的地方。我尝试了很多迭代，但没有解决我的问题。

基于我编写代码的方式，我不能为我的生活，找出应用样式（颜色，不透明度，重量）的正确方法。

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

如果您希望简化向地理mbGreenMarker图层组添加新GeoJSON数据的方式，但仍然可以根据需要设置样式，则只需在设置mbGreenMarker图层组时添加样式定义即可。它应该自动应用于以后添加的数据（onEachFeature相同）。

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

曾经在中间L.geoJson群组中，总是在地图上，与您的指定的样式。
第二次将数据添加到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)
  }
}

Answer 2

在添加/删除之前，您可能还需要检查mbGreenMarker：

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

如果用户可以在图层控件中添加/删除图层，则非常有用。

最后，您可以添加缩放/视口信息，如图所示here，这样应用在手机上看起来不错。

Example

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

2 个答案: