Javascript 传单、着色向量，但仅在特定缩放级别显示它们

再来问另一个基本问题。这让我很难堪

我有一张山地自行车路线图，显示了所有缩放级别的车道头/停车场图标。但是，当用户放大（缩放级别>=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)}
}); 

//加载蒙哥马利·贝尔（绿色）
var mbGreenMarker=L.geoJson（）；
$.getJSON（“trails/MBgreenTrail.geojson”，函数（json）{
L.geoJson（json{
风格：功能（特征）
{
返回{“color”：“#00ff00”，“weight”：5，“opacity”：1}
}
},
{
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.type）；
}
}
).addTo（地图）；
mbGreenMarker.addData（json）；
});
地图上（'zoomend'，函数（e）{
if（map.getZoom（）<12）{map.removeLayer（mbGreenMarker）}
如果（map.getZoom（）>=12）{map.addLayer（mbGreenMarker）}
}); 

---

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

如果您想简化如何将新的GeoJSON数据添加到

mbGreenMarker

图层组中，但仍然按照需要对其进行样式设置，在设置

mbGreenMarker

图层组时，只需添加样式定义即可。它还应自动应用于以后添加的数据（与onEachFeature相同）

请注意，使用问题中发布的代码，您实际上从相同的

json

数据构建了两个传单向量层：

• 一旦进入中间

  L.geoJson

  组，该组始终在地图上，并具有 指定的样式
• 第二次将数据添加到

  mbGreenMarker

  ，时，不使用任何自定义样式。事件侦听器只打开/关闭第二层

您可以去掉中间

L.geoJson

组，并在

mbGreenMarker

中正确设置其样式。结果将是与当前代码不同的行为。希望它更接近你想要达到的目标

var mbGreenMarker=L.geoJson（空{
风格：功能（特征）{
返回{
“颜色”：“00ff00”，
“重量”：5，
“不透明度”：1
}
}
}, {
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.type）；
}
});
//如果当前缩放大于等于12，则将mbGreenMarker添加到地图。
showmbGreenMarker（）；
$.getJSON（“trails/MBgreenTrail.geojson”，函数（json）{
mbGreenMarker.addData（json）；
});
地图上（'zoomend'，显示绿色标记）；
函数showmbGreenMarker（）{
if（map.getZoom（）<12）{
地图移除层（mbGreenMarker）
}else if（map.getZoom（）>=12）{
map.addLayer（mbGreenMarker）
}
}

如果您想简化如何将新的GeoJSON数据添加到

mbGreenMarker

图层组，但仍按需要对其进行样式设置，您只需在设置

mbGreenMarker

图层组时添加样式定义即可。它还应自动应用于以后添加的数据（与onEachFeature相同）

请注意，使用问题中发布的代码，您实际上从相同的

json

数据构建了两个传单向量层：

• 一旦进入中间

  L.geoJson

  组，该组始终在地图上，并具有 指定的样式
• 第二次将数据添加到

  mbGreenMarker

  ，时，不使用任何自定义样式。事件侦听器只打开/关闭第二层

您可以去掉中间

L.geoJson

组，并在

mbGreenMarker

中正确设置其样式。结果将是与当前代码不同的行为。希望它更接近你想要达到的目标

var mbGreenMarker=L.geoJson（空{
风格：功能（特征）{
返回{
“颜色”：“00ff00”，
“重量”：5，
“不透明度”：1
}
}
}, {
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.type）；
}
});
//如果当前缩放大于等于12，则将mbGreenMarker添加到地图。
showmbGreenMarker（）；
$.getJSON（“trails/MBgreenTrail.geojson”，函数（json）{
mbGreenMarker.addData（json）；
});
地图上（'zoomend'，显示绿色标记）；
函数showmbGreenMarker（）{
if（map.getZoom（）<12）{
地图移除层（mbGreenMarker）
}else if（map.getZoom（）>=12）{
map.addLayer（mbGreenMarker）
}
}

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

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

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

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

---

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

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

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

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

---

再次感谢ghybs。我觉得我尝试了很多次使用样式属性的标记（正如您所做的）。一定是每次都做得有点错。需要注意的一点是，在声明var mbGreenMarker时，我必须添加一个“null”。当编码为：var mbGreenMarker=L.geoJson（null，（{…您是对的，谢谢，

L.geoJ中缺少第一个参数）时，它可以正常工作