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

Swapping between layers in leaflet heat map

本文关键字：图层 之间 交换 单热图      更新时间：2023-09-26

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

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

因此，您可以在点击处理程序中使用它：

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

以下是L.Map的所有图层方法的参考：http://leafletjs.com/reference.html#map-stuff-methods

如果您

还没有找到解决方案，请查看传单图层控件。

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

var baseLayers = {
    "Mapbox": tiles
};
var overlays = {
    "Fancy Heatmap": heat1,
    "Another fancy Heatmap": heat2
};
L.control.layers(baseLayers, overlays).addTo(map);

呵呵，
梅克尔

相关文章：