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

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

    <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();
    }

但它不起作用。

最佳答案

无需使用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

关于javascript - 在传单热图的各层之间交换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27997695/