宣传单缩放地图图层

时间:2016-11-15 10:43:03

标签: javascript leaflet

我正在寻找能够让我在缩放地图时丢失图层部分的功能。

map.on('zoomend', onZoomend)
function onZoomend(feature){
if(map.getZoom()<11) 
 {map.addLayer("road_2"==feature.properties.density)};

if(map.getZoom()>11)
 {map.removeLayer("road_2"==feature.properties.density)};
  }

我的GeoJson文件位于面板图层中:

var overLayers = [
{
    group: "Layer",
    collapsed: true,
    layers: [
        {   
            name: "Road",
            icon: iconByName('fuel_road'),              
            layer: L.geoJson(road,{style: style_road})
        },

文件GeoJson强调:

      var road = {
     "type": "FeatureCollection",

    "features": [
    { "type": "Feature", "properties": { "density" : "road_1"....

    { "type": "Feature", "properties": { "density" : "road_2"....

    { "type": "Feature", "properties": ....

2 个答案:

答案 0 :(得分:0)

我不确定我是否理解你,但你想在放大时移除一个图层并在缩小时添加它?

You just can use:
if(map.getZoom()<11){
    mylayer.removeFrom(map);
}else{    
    mylayer.addTo(map);
}

我理解你了吗?

更新:

您可以遍历GeoJson图层并将fillOpacity设置为0以隐藏某些geoms:

var geoJsonLayer = L.geoJson(myGeoJson).addTo(map);
if(map.getZoom()<11){
 geoJsonLayer.eachLayer(function(layer) {
   if(layer.feature.properties.density == "road_"){
       layer.setStyle({fillOpacity:0});
   }
 });
}

答案 1 :(得分:0)

<强>更新

这种方式有未来吗?它必须改进什么?

 function style_road(feature) {
    if  ("road_1" == feature.properties.density) {
        return {
            weight: 3,
            opacity:function()
                    {if (zoom > 13) {opacity:0},
                    else (zoom < 13) {opacity:1}, 
                    },
            color: 'red',
        };
    } 
    else if ("road_2" == feature.properties.density){
        return {
            weight: 1.5,
            opacity: 1,
            color: 'red',               
        };
    }
    else {
        return {
            weight: 0.5,
            opacity: 1,
            color: 'red',               
        };
    }
}