Question

我想动态地在传单中的图层之间交换。所以我认为隐藏层。这是我的代码

    <div id="map"></div> 
    <div>
        <button  onclick='fun1()'>yellowhide</button> 
        <button  onclick='fun2()'>redhide</button> 
    </div>   

    <script> 
    //same lat long means overlapping
    addressPoints1= [     [-37.8210922667, 175.2209316333, "2"],     [-37.8210819833, 175.2213903167, "3"],     [-37.8210881833, 175.2215004833, "3"],     [-37.8211946833, 175.2213655333, "1"]]      addressPoints2= [     [-37.8210922667, 175.2209316333, "2"],     [-37.8210819833, 175.2213903167, "3"],     [-37.8210881833, 175.2215004833, "3"],     [-37.8211946833, 175.2213655333, "1"]]       
    var tiles=L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {      attribution: '',        id: 'examples.map-20v6611k'     })   var map = L.map('map', {       center: [-37.87, 175.475],      zoom: 16,       layers: [tiles]     });     var heat1 = L.heatLayer(addressPoints1,{        gradient: {1:"red"}         }).addTo(map); var heat2 = L.heatLayer(addressPoints2,{     gradient: {1:"yellow"}  }).addTo(map);      



    function fun1(){ console.log("hide yellow layer");
      $('.heat2').hide(); } function fun2(){ console.log("hide red layer");
      $('.heat1').hide();   
    }

但它不起作用。

Answer 1

没有必要对这些图层使用jQuery和查询，因为您之前已经将其声明为变量heat1和heat2。您可以使用它们从地图中删除它们或再次添加它们。目前，您正在使用图层的addTo方法将图层添加到地图中：

var heat1 = L.heatLayer().addTo(map);

后台执行地图实例的addLayer方法：

map.addLayer(heat1);

地图实例还具有removeLayer方法，用于从地图中删除图层：

map.removeLayer(heat1);

所以你可以在你的onclick处理程序中使用它：

function fun1 () {
    map.removeLayer(heat1);
}

这里是L.Map的所有图层方法的引用：http://leafletjs.com/reference.html#map-stuff-methods

Answer 2

如果您还没有找到解决方法，请查看Leaflet Layer Controls。

使用控件，您可以更改地图的可见图层。

var baseLayers = {
    "Mapbox": tiles
};

var overlays = {
    "Fancy Heatmap": heat1,
    "Another fancy Heatmap": heat2
};

L.control.layers(baseLayers, overlays).addTo(map);

HTH，
Meykel

在传单热图中的层之间交换

2 个答案: