Question

我有一个充满LineStrings（高程轮廓）的GeoJSON，我想在MapBox / LeafLet地图上绘制。

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

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

当然可以。

一个好方法可能首先要确保你的Line String真的是一个循环（如你所说，如果第一个和最后一个坐标相等）。然后只需将其转换为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。您可以在SVG路径元素或基本SVG样式中使用CSS类。查看详细的examples here以了解这个小模块。

免责声明：我是geojson2svg的作者

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

2 个答案: