我正在制作一张交互式 map ,使用 Leaflet 和一些 GeoJSON 数据来显示城市铁路运输的历史。我的 GeoJSON 数据如下所示:
var lines = [
{
"type": "FeatureCollection",
"name": "stadtmitte_gerresheim",
"startYear": "1902",
"endYear": "2019",
"lineColor": "#DD0000",
"trainID": "001",
"features": [
{
"type": "Feature",
"properties": {
"lineName": "U73",
"station1": "Universität Ost/Botanischer Garten",
"station2": "Gerresheim S",
"startYear": "2016",
"endYear": "2019",
"lineColor": "#DD0000",
},
"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"lineID": "001",
"lineDescription": "Schleife am S-Bahnhof Gerresheim",
"coordinates": [...
]
},
{
"type": "LineString",
"lineID": "002",
"lineDescription": "Gerresheim S bis Ecke Schönaustraße/Heyestraße",
"coordinates": [...
]
}
....
我正在使用多个由一些功能组成的功能集合。正如您所看到的,每个要素的几何图形都是由 GeometryCollection(主要包含 LineStrings)定义的。
我想使用 Leaflet 根据其成员来设置每个几何图形(GeometryCollections 中的 LineStrings)的样式。目前我只能通过功能来设置整个 GeometryCollection 的样式:
L.geoJSON(route, {
filter: function(feature) {
if (checkYear(feature)) {
return true;
} else {
return false;
}
},
style: function(feature) {
switch (feature.properties.tunnel) {
case 'yes': return {color: "#ff0000", dashArray: "1,6"};
default: return {color: "#ff0000"}
}
},
pointToLayer: function (feature, latlng) {
getIconSize();
switch (feature.properties.underground) {
case 'yes': return L.marker(latlng, {icon: stadtbahnIcon});
default: return L.marker(latlng, {icon: strassenbahnIcon});
}
}
}).addTo(mymap);
}
我的问题:是否可以将单独的样式函数传递给同一特征的不同几何图形,而不是将相同的样式函数传递给该特征中的所有几何图形?如果是这样,怎么办?我想这应该是可能的,因为 Leaflet 为每个几何图形创建了一条路径。
干杯
最佳答案
Is it possible to hand individual style functions to different Geometries of the same Feature?
没有。
Leaflet 在 GeoJSON 中为每个 Feature
创建一个 L.Layer
实例,right over here ;以及style
回调函数的应用just loops over the L.Layer
s corresponding to each feature ,它不会向下钻取嵌套的 L.LayerGroup
(此外,作为创建的 L.Polyline
和 L.Polygon
GeometryCollection
的结果没有对原始 GeoJSON 功能或其属性的引用)。
我猜你会想使用TurfJS' geomEach
(或类似的东西)以预处理您的特征和几何形状。
关于javascript - 如何使用 Leaflet 单独设置 GeoJSON GeometryCollection 的每个几何图形的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51810542/