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

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。您可以使用它们从 map 中删除它们或重新添加它们。目前，您正在使用图层的 addTo 方法将图层添加到 map :

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

在后台执行 map 实例的addLayer方法:

map.addLayer(heat1);

map 实例还具有用于从 map 中删除图层的removeLayer方法:

map.removeLayer(heat1);

因此您可以在 onclick 处理程序中使用它:

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

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