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

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

本文关键字：缩放 显示 传单      更新时间：2023-09-26

再说另一个基本问题。不过，这让我感到困惑。

我有一张山地自行车道地图，显示所有缩放级别的小径起点/停车场的图标。但是，当用户放大（缩放级别>=12）时，我希望显示 GPS 轨迹。我对缩放控件/图层显示进行了排序，但符号化轨迹（矢量）是我卡住的地方。我已经尝试了无数次迭代，但没有解决我的问题。

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

我的地图，就像现在一样。我（暂时）将地图集中在这条特定的小径上。

陷入困境的代码：

//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函数传递它。

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

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

  • 一旦进入中间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)
  }
}

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

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

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

最后，您可以添加缩放/视口信息，如下所示，以便该应用程序在手机上看起来不错。

例

相关文章：