自定义作为来自静态文件的 geoJson 文件的传单覆盖答案

【问题标题】：Customizing leaflet overlay that is a geoJson file from a static file自定义作为来自静态文件的 geoJson 文件的传单覆盖
【发布时间】：2020-01-13 23:12:20
【问题描述】：

我正在使用 Leaflet 构建地图应用程序。我正在从静态文件中提取国会选区的 geojson 文件。我想为每个包含地区名称的地区添加一个弹出窗口 - 它位于 geojson 文件中。我也想用独特的颜色为这些地区着色。

我已尝试使用此代码添加带有地区名称的弹出窗口。这没用。

  var polygons;
  $.getJSON(
    "http://localhost:8080/assets/geo/NationalCongressional.json",
    function(data) {
      polygons = L.geoJSON(data, {
        style: myCustomStyle,
        onEachFeature: function(feature, layer) {
          layer.bindPopup(feature.properties.name);
        }
      });
    }
  );
  var overlays = {
    polygons: polygons
  };

  L.control.layers(baseMaps, overlays).addTo(myMap);

错误是多边形未定义。

如果我不乱用这样的代码来自定义图层，那么我可以直接将 geojson 添加到我的地图中，没有问题。像这样……

  var NationalCongressional = new L.geoJson.ajax(
    "http://localhost:8080/assets/geo/NationalCongressional.json",
    {
      style: upperHouseStyle
    }

  var overlays = {
    NationalCongressiona: NationalCongressional
  };

  L.control.layers(baseMaps, overlays).addTo(myMap);
  );

【问题讨论】：

标签： colors popup leaflet overlay geojson

【解决方案1】：

想通了。这是解决方案...

  var NationalCongressional = new L.geoJson.ajax(
    "http://localhost:8080/assets/geo/NationalCongressional.json",
    {
      style: upperHouseStyle,
      onEachFeature: function(feature, layer) {
        layer.bindPopup(feature.properties.NAMELSAD);
        if (feature.properties.NAMELSAD == "Congressional District 8") {
          console.log("found a match");
          layer.setStyle({ color: "orange" });
        }
      }
    }
  );

  var overlays = {
    NationalCongressional: NationalCongressional
  };

  L.control.layers(baseMaps, overlays).addTo(myMap);

【讨论】：