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

我有一个充满LineStrings（仰角等高线）的GeoJSON，我想在MapBox/LeafLet地图上绘制。我可以使用LeafLet更改GeoJSON LineString的fillColor

当绘制时，所有的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); 
});

来源

2016-03-07 Rodrigo

相信的作者，你可以改变它。你读过文件吗？ – 7urkm3n

这当然是可能的。

一个好方法可能会首先确保您的Line String是一个真正的循环（如您所说，如果第一个和最后一个坐标相等）。然后简单地将它转换成一个Polygon（根据相同的坐标创建一个新的Polygon，删除Line String），它将根据您的fillColor选项由Leaflet填充。

编辑：

你可以检测环形线串它们由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);

声明：按原样书写，未经测试。

注意：对于你的情况，你一定会有一个在另一个中的高程轮廓。您可能希望为嵌入轮廓构建带有孔的多边形。否则，填充物会堆叠起来，如果它们是透明的，你可能无法得到你想要的结果。

来源

2016-03-08 02:29:53 ghybs

谢谢。我会检查每个LineString以进行仔细检查。同时，您能否详细说明“简单地将其转换为多边形（基于相同的坐标创建新的多边形，删除线串）”？你的意思是改变我将GeoJSON加载到地图上的方式吗？或者修改实际的GeoJSON？ – Rodrigo

我将编辑上述答案，以便更具体地转换。 – ghybs

ghybs。对不起，作为noob，但我认为上面的代码不会添加任何东西到我的“地图”变量，对不对？另外，什么是“newPolygons”用于？ – Rodrigo

如果绘图线是SVG的唯一标准，请检查geojson2svg。您可以在SVG路径元素或基本SVG风格中使用CSS类。查看详细的examples here了解这个小模块。

免责声明：我geojson2svg

来源

2016-03-09 04:55:48 Gagan

Gagan，geojson2svg看起来非常好！我很欣赏你在那里付出的努力。因为我几乎完成了这个项目，我会尝试使用LeafLet来完成它，但将geojson2svg保留在未来的头脑中。 – Rodrigo

这是正确的选择。 – Gagan

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

回答

相关问题