从传单中 GeoJSON 数据的数组中获取坐标索引答案

【问题标题】：Get coordinate index from array on GeoJSON data in leaflet从传单中 GeoJSON 数据的数组中获取坐标索引
【发布时间】：2021-10-29 10:57:04
【问题描述】：

我有具有 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()，如果它具有相同的经纬度坐标，则返回索引，但有可能数据具有相同的坐标但旋转不同。

我也尝试过使用循环，但它并没有解决我的问题。

【问题讨论】：

标签： leaflet geojson

【解决方案1】：

您的 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
                    });
            }
        });

【讨论】：