我可以用 LeafLet 更改 GeoJSON LineString 的 fillColor 吗

Question

我有一个充满 LineString（等高线）的 GeoJSON，我想将其绘制在 MapBox/LeafLet 地图上。

绘制时，所有 LineString 似乎都形成多边形（即数组中的第一个坐标和最后一个坐标相等）。

是否可以更改 LineStrings 的 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

当然可以。

一个好的方法可能是首先确保您的线串确实是一个循环（如您所说，如果第一个和最后一个坐标相等）。然后简单的转换成Polygon（根据相同的坐标新建一个Polygon，去掉Line String），Leaflet会根据你的fillColor选项填充

编辑：

您可以在 L.geoJson() 工厂创建循环线字符串后检测它们，使用 polygon geometry 创建等效的 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. You can just use CSS class in SVG path element or basic SVG's style. Check detailed examples here 以了解这个小模块。

免责声明：我是 geojson2svg 的作者

我可以用 LeafLet 更改 GeoJSON LineString 的 fillColor 吗

Can I change the fillColor of a GeoJSON LineString with LeafLet

javascript

geojson

leaflet