文章/答案/技术大牛

发布

社区首页 >问答首页 >从leaflet中GeoJSON数据的数组中获取坐标索引

问从leaflet中GeoJSON数据的数组中获取坐标索引
EN

Stack Overflow用户

提问于 2021-10-28 14:30:43

回答 1查看 74关注 0票数 1

我有LineString特征类型的GeoJSON数据。我将使用L.geoJson()函数显示此数据。数据具有每个坐标的旋转属性。我想为每个坐标创建一个具有旋转属性的标记。这是我的geojson数据。

{
    "type": "Feature",
    "properties": {
        "name": "Track of bus 699",
        "times": [
            "2019-11-23 10:51:06",
            "2019-11-23 10:52:05",
            "2019-11-23 10:53:05",
            "2019-11-23 10:54:04",
            "2019-11-23 10:55:05",
            "2019-11-23 10:56:05",
            "2019-11-23 10:57:05",
            "2019-11-23 10:58:05",
            "2019-11-23 10:59:05",
            "2019-11-23 11:00:06"
        ],
        "rotation": [
            0,
            0,
            15,
            15,
            20,
            25,
            35,
            45,
            55,
            60
        ]
    },
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [
                -4.4214296,
                36.73835
            ],
            [
                -4.422104,
                36.737865
            ],
            [
                -4.4229302,
                36.73773
            ],
            [
                -4.4235334,
                36.735817
            ],
            [
                -4.4222927,
                36.73413
            ],
            [
                -4.4218254,
                36.732475
            ],
            [
                -4.4213734,
                36.72983
            ],
            [
                -4.420156,
                36.73
            ],
            [
                -4.419239,
                36.730686
            ],
            [
                -4.417272,
                36.732136
            ]
        ]
    }
}

我对如何获得每个坐标的索引感到困惑，这样我就可以基于该索引获得旋转数据。

这是我的代码。我使用Leaflet.RotatedMarker插件来旋转标记

var layer = L.geoJson(data, {
            pointToLayer: function (feature, latLng) {
                    return new L.marker(latLng, {
                        icon: icon,
                        rotationAngle: feature.properties.rotation[index]
                    });
            }
        });

我尝试过使用Array.findIndex()，如果它具有相同的纬度和经度坐标，则返回索引，但有可能数据具有相同的坐标，但具有不同的旋转。

我也尝试过使用循环，但它不能解决我的问题。

geojson

leaflet

回答 1

Stack Overflow用户

发布于 2021-10-29 02:54:58

您的GeoJSON数据要素当前具有LineString几何类型，因此将不会使用Leaflet pointToLayer选项。

假设您的时间和旋转属性的顺序与LineString的连续坐标对完全相同，您可以首先将其转换为点几何图形的列表，以及它们关联的时间和旋转：

// Convert LineString into list of Points
const times = originalGeoJsonFeature.properties.times;
const rotations = originalGeoJsonFeature.properties.rotation;
const coordinatePairs = originalGeoJsonFeature.geometry.coordinates;
const pointList = [];

for (let i = 0; i < coordinatePairs.length; i += 1) {
  pointList.push({
    type: "Feature",
    properties: {
      time: times[i],
      rotation: rotations[i]
    },
    geometry: {
      type: "Point",
      coordinates: coordinatePairs[i]
    }
  });
}

现在，如果您将此列表提供给Leaflet GeoJSON工厂，则将使用pointToLayer选项，并且每个功能都将包含其自己的时间和旋转属性：

var layer = L.geoJson(pointList, {
            pointToLayer: function (feature, latLng) {
                    return L.marker(latLng, {
                        icon: icon,
                        rotationAngle: feature.properties.rotation
                    });
            }
        });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69755986

复制

相似问题

问从leaflet中GeoJSON数据的数组中获取坐标索引
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从leaflet中GeoJSON数据的数组中获取坐标索引EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从leaflet中GeoJSON数据的数组中获取坐标索引
EN