如何使用leaflet插件从javascript中的单个变量创建不同的层？

Question

我使用以下代码创建了一个地图。我已经为美国的可再生能源工厂创建了地图标记，特别是那些以水力发电、太阳能和风能为主要燃料的工厂。我遇到的麻烦是，我如何创建一个图层控件，在地图上我不能在3个能源之间进行过滤。请帮帮我！！

var myMap = L.map("map", {
  center: [39.0119, -98.4842],
  zoom: 5
});

// Adding tile layer
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
  attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",
  tileSize: 512,
  maxZoom: 18,
  zoomOffset: -1,
  id: "mapbox/streets-v11",
  accessToken: API_KEY
}).addTo(myMap);

var url = "USA.geojson";

d3.json(url, function(response) {
  // console.log(response.features[1].properties.capacity_mw);
  // console.log(response);
  console.log(response.features[1].geometry.coordinates);


       for (var i = 0; i < response.features.length; i++) {
        var geometry1 = response.features[i];
        // console.log(geometry1.geometry.coordinates)
        if (geometry1) {
          L.marker([geometry1.geometry.coordinates[1], geometry1.geometry.coordinates[0]])
          .bindPopup("<h2>" + geometry1.properties.name + "<h2> <hr> <h3>Primary Fuel " + geometry1.properties.primary_fuel + "</h3>")
          .addTo(myMap);




        }
      }


});

我还附加了geojson文件的一个片段

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -74.5761,40.2003 ] }, "properties": { "country":"USA", "country_long":"United States of America", "name":"12 Applegate Solar LLC", "gppd_idnr":"USA0059371", "capacity_mw":1.9, "primary_fuel":"Solar", "other_fuel1":"", "other_fuel2":"", "other_fuel3":"", "commissioning_year":2012, "owner":"SunRay Power LLC", "source":"U.S. Energy Information Administration", "url":"http://www.eia.gov/electricity/data/browser/", "geolocation_source":"U.S. Energy Information Administration", "wepp_id":"", "year_of_capacity_data":2017, "generation_gwh_2013":2.41461, "generation_gwh_2014":2.35, "generation_gwh_2015":2.43, "generation_gwh_2016":2.492, "generation_gwh_2017":2.276, "estimated_generation_gwh":null } },

Answer 1

将您的代码更改为：

// create groups to add the markers
var solarGroup = L.featureGroup().addTo(map);
var hydroGroup = L.featureGroup().addTo(map);
var windGroup = L.featureGroup().addTo(map);

// use the L.geoJSON to convert the geojson into layers
L.geoJSON(json,{
    onEachFeature: function (feature, layer) {
    // create a marker and add them to the correct group
    if(feature.properties.primary_fuel === "Solar"){
        L.marker(layer.getLatLng())
          .bindPopup("<h2>" + feature.properties.name + "<h2> <hr> <h3>Primary Fuel " + feature.properties.primary_fuel + "</h3>")
          .addTo(solarGroup);
    }else if(feature.properties.primary_fuel === "Hydro"){
        L.marker(layer.getLatLng())
          .bindPopup("<h2>" + feature.properties.name + "<h2> <hr> <h3>Primary Fuel " + feature.properties.primary_fuel + "</h3>")
          .addTo(hydroGroup);
    } else if(feature.properties.primary_fuel === "Wind"){
        L.marker(layer.getLatLng())
          .bindPopup("<h2>" + feature.properties.name + "<h2> <hr> <h3>Primary Fuel " + feature.properties.primary_fuel + "</h3>")
          .addTo(windGroup);
    }
  }
})

// create Layer Control
var overlayMaps = {
    "Solar": solarGroup,
    "Hydro": hydroGroup,
    "Wind": windGroup
}
L.control.layers(null, overlayMaps).addTo(map);

示例：https://jsfiddle.net/falkedesign/cq43ktu5/