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

黄皮
红皮
//相同的lat-long表示重叠
地址点1=[-37.8210922667，175.2209316333，“2”]，[-37.8210819833，175.2213903167，“3”]，[-37.8210881833，175.2215004833，“3”]，[-37.8211946833，175.2213655333，“1”]]地址点2=[-37.8210922667，175.2209316333，“2”]，[-37.8210819833，175.2213903167，“3”]，[-37.82108813，175.221350833”，[-37.8211946833, 175.2213655333, "1"]]       
var tiles=L.tileLayer（'http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'，{attribute:''，id:'examples.map-20v6611k'}）var map=L.map（'map'，{center:[-37.87175.475]，zoom:16，layers:[tiles]}）；var heat1=L.heatLayer（addressPoints1，{gradient:{1:{red red}）.addTo（map）；var heat2=L.heatLayer（地址点2，{梯度：{1:“黄色”}}）.addTo（地图）；
函数fun1（）{console.log（“隐藏黄色层”）；
$（'.heat2'）.hide（）；}函数fun2（）{console.log（“隐藏红色层”）；
$（'.heat1'）.hide（）；
} 

---

但是它不起作用。

没有必要对这些图层使用jQuery和query，因为您以前已经声明为变量

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所有图层方法的参考：

如果您还没有找到解决方案，请查看

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

var baseLayers = {
    "Mapbox": tiles
};

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

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

HTH，

---

Meykel

我不想添加或删除图层。只需在图层之间交换..就像我们有两个按钮1用于红色图层，2用于黄色图层…当我单击红色按钮时，红色图层显示在黄色图层的顶部。当我单击黄色按钮时，黄色图层显示在红色图层的顶部..在你的问题中，你说“隐藏”，意思是“放置或隐藏在视线之外；隐藏在视图之外”。你应该在你的问题中提到这一点。@iH8是的，你是对的（某种程度上）…但是hide（）和remove（）之间的区别是：--hide（）将匹配元素的CSS显示属性设置为none。remove（）从DOM中完全删除匹配的元素。