如何select只穿过一层Select（传单）

Question

我正在尝试使用 select 仅 select 一层。

这是我第一次使用传单，我使用了这个很棒的指南：https://maptimeboston.github.io/leaflet-intro/

现在我的地图上有“markerclusters”部分和最后一个“heatmap”，我想只选择一层或另一层或两者。我一直在寻找示例，但我没有不知道如何应用它们。

（现在的select是装饰品，你看吧。）

这是我的地图图片：

Image

这是我的代码，在此先感谢！

<html>
<head>
  <title>MAPA PRUEBA</title>
   <link rel="stylesheet" href="leaflet.css"/>
  <link rel="stylesheet" href="MarkerCluster.css"/> 
  <script src="leaflet.js"></script>
  <script src="leaflet.markercluster.js"></script> 
  <script src="leaflet.heat.js"></script>
  <script src="jquery-2.1.1.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>
<div id="panel" style = "top-left:10px; background-color:#D3D3D3;">
                    <label>Tipo de mapa</label>
                    <select id="estilo" onchange="Bordeaux()">
                      <option value="points" >PUNTOS</option>
                      <option value="heat">MAPA DE CALOR</option>
                      
                    </select>
  <div id="map"></div>

  <script>

 // initialize the map
  var map = L.map('map').setView([40.46, -3.74], 4);

  // load a tile layer
  L.tileLayer('http://192.168.0.103/osm/{z}/{x}/{y}.png',

    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 1
    }).addTo(map);
    

 // load GeoJSON from an external file

$.getJSON("rodents.geojson",function(data){
    var ratIcon = L.icon({
      iconUrl: 'images/marker-icon.png'});
      var rodents = L.geoJson(data,{
      pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng,{icon: ratIcon});
      marker.bindPopup(feature.properties.Location);
       return marker;}
    });
    var clusters = L.markerClusterGroup();
    clusters.addLayer(rodents);
    map.addLayer(clusters);
}); 

// HEAT LAYER   
 
$.getJSON("rodents.geojson",function(data){ 
   var locations = data.features.map(function(rat) {
// the heatmap plugin wants an array of each location
      var location = rat.geometry.coordinates.reverse();
      location.push(1.9);
      return location;
});

    var heat = L.heatLayer(locations, { radius: 50 });
    map.addLayer(heat);
   
});
  </script>
</body>
</html>

Answer 1

将 clusters 和 heat 变量更改为全局变量。并且只将两个图层中的一个添加到地图中。

var clusters, heat;

$.getJSON("rodents.geojson",function(data){
    // ...
    clusters = L.markerClusterGroup();
    clusters.addLayer(rodents);
    map.addLayer(clusters);
}); 

// HEAT LAYER   
$.getJSON("rodents.geojson",function(data){ 
 //...
    heat = L.heatLayer(locations, { radius: 50 });
});

然后从 select 添加/删除 onchange 函数中的层：

<select id="estilo" onchange="changeFnc(this)">
   <option value="points" >PUNTOS</option>
   <option value="heat">MAPA DE CALOR</option>
</select>

function changeFnc(obj){
   var value = obj.value;
   if(value == "points"){
      if(map.hasLayer(clusters)){
         map.removeLayer(clusters);
      }
      map.addLayer(points);
   }else{
      if(map.hasLayer(points)){
         map.removeLayer(points);
      }
      map.addLayer(clusters);
   }
}

PS：此代码未经测试但应该有效

如何select只穿过一层Select（传单）

How to select only one layer through a Select (leaflet)

geojson

leaflet