我可以用LeafLet更改GeoJSON LineString的填充颜色吗?

Can I change the fillColor of a GeoJSON LineString with LeafLet

本文关键字：填充 颜色 LineString LeafLet 更改 GeoJSON 我可以      更新时间：2023-09-26

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

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

是否可以更改线字符串的填充颜色，因为它们无论如何都看起来像多边形？

编辑

以下是我目前拥有的代码：

var elevation950Style = {
color : "yellow",
fillColor : "yellow",
opacity : 0.4,
weight : 2,
};
$.getJSON('950.geo.json', function(file) {
   L.geoJson( file ,  { style: elevation950Style } ).addTo(map);
});

这当然是可能的。

一个好的方法可能是首先确保您的线字符串确实是一个循环（如您所说，如果第一个和最后一个坐标相等）。然后只需将其转换为多边形（基于相同的坐标创建一个新多边形，删除线字符串），它将根据您的fillColor选项由传单填充。

编辑：

您可以在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);

免责声明：按原样编写，未经测试。

注意：在您的情况下，您肯定会有一个高程等值线在另一个高程中。您可能希望为嵌入的轮廓构建带有孔的多边形。否则，填充物会堆积，如果它们是透明的，您可能无法获得所需的结果。

如果绘制线是 SVG 的唯一标准，请检查 geojson2svg。您可以在SVG路径元素或基本SVG样式中使用CSS类。查看此处的详细示例以了解此小模块。

免责声明：我是geojson2svg的作者

相关文章：