我可以使用LeafLet更改GeoJSON LineString的fillColor嗎？

Question

我有一個充滿LineStrings（高程等高線）的GeoJSON，我想在MapBox / LeafLet地圖上進行繪制。

繪制時，所有LineString似乎都形成多邊形（即數組中的第一個和最后一個坐標是等效的）。

是否可以更改LineString的fillColor，因為它們無論如何看起來都像多邊形？

編輯

以下是我目前擁有的代碼：

var elevation950Style = {
color : "yellow",
fillColor : "yellow",
opacity : 0.4,
weight : 2,
};

$.getJSON('950.geo.json', function(file) {
   L.geoJson( file ,  { style: elevation950Style } ).addTo(map);
});

Answer 1

當然有可能。

一個好的方法可能是首先確保您的Line String確實是一個循環（如您所說，如果第一個和最后一個坐標相等）。 然后只需將其轉換為多邊形（基於相同的坐標創建一個新的多邊形，刪除線串），然后它將根據您的fillColor選項由Leaflet填充。

---

編輯：

您可以在L.geoJson()工廠創建循環線串之后檢測它們，使用多邊形幾何創建等效的GeoJSON功能，並用GeoJSON圖層組中新創建的多邊形替換循環線串：

var myGeoJsonGroup = L.geoJson(myGeoJsonData), // build your GeoJSON layer group.
    geo, coords, first, last;

myGeoJsonGroup.eachLayer(function (layer) {
  geo = layer.feature.geometry;
  coords = geo.coordinates;
  first = coords[0];
  last = coords[coords.length - 1];

  if (geo.type === "LineString" && first[0] === last[0] && first[1] === last[1]) {
    myGeoJsonGroup.removeLayer(layer);
    myGeoJsonGroup.addData({
      type: "Feature",
      properties: layer.feature.properties,
      geometry: {
        type: "Polygon",
        coordinates: [
          coords // exterior linear ring
        ]
      }
    });
  }
});

myGeoJsonGroup.addTo(map);

免責聲明：原樣編寫，未經測試。

注意：在您的情況下，您肯定會在另一個內部設置高程等值線。 您可能希望為嵌入的輪廓構建帶有孔的多邊形。 否則，餡料會堆積，如果它們是透明的，您可能無法獲得想要的結果。

Answer 2

如果繪制線是SVG的唯一標准，請檢查geojson2svg 。 您可以在SVG路徑元素或基本SVG樣式中使用CSS類。 在此處查看詳細示例，以了解此小模塊。

免責聲明：我是geojson2svg的作者