javascript - 如何使用 Leaflet 单独设置 GeoJSON GeometryCollection 的每个几何图形的样式

标签 javascript leaflet geojson

我正在制作一张交互式 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.Layers corresponding to each feature ,它不会向下钻取嵌套的 L.LayerGroup(此外,作为创建的 L.PolylineL.Polygon GeometryCollection 的结果没有对原始 GeoJSON 功能或其属性的引用)。

我猜你会想使用TurfJS' geomEach (或类似的东西)以预处理您的特征和几何形状。

关于javascript - 如何使用 Leaflet 单独设置 GeoJSON GeometryCollection 的每个几何图形的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51810542/

相关文章:

javascript - 弹出容器在 IE11 中的大小错误

r - R Shiny 应用程序中的传单 map 图例不显示颜色

svg - 将 SVG 转换为 GeoJSON

javascript - 一旦在用户浏览器中禁用箭头键滚动,如何启用它

javascript - 我想使用 JS onclick 方法从同一文档获取 url

javascript - 无法解析react-viro中的模块

jquery - 大小更改后刷新/重新加载 div 标签容器

mysql - 将 GeoJSON 转换为 MySQL

leaflet - 消除重复的多边形州/国家/地区共享边界

javascript - 为什么 Twitchtv API Stream 只为每个 channel 显示 “offline”?