Leaflet中获取GeoJSON LineString坐标对应索引读取rotation属性的方法

问题核心原因 #

L.geoJson()默认仅对Point类型的要素触发pointToLayer回调，你当前的要素是LineString类型，默认只会渲染为折线，不会遍历内部坐标点生成标记，自然无法直接获取坐标对应的索引。

解决方法 #

你可以选择两种常用实现方式，都可以直接拿到坐标对应的索引：

方式1：直接遍历坐标生成标记（更简单直观） #

// 先渲染原LineString轨迹线（不需要展示线可以删除这行）
var lineLayer = L.geoJson(data).addTo(map);

const coordinates = data.geometry.coordinates;
const rotations = data.properties.rotation;
const markerLayerGroup = L.layerGroup().addTo(map);

// 遍历坐标数组，天然可以拿到对应索引
for (let i = 0; i < coordinates.length; i++) {
  // 注意：GeoJSON坐标顺序是[经度, 纬度]，Leaflet LatLng参数是(纬度, 经度)，需要调换顺序
  const latLng = L.latLng(coordinates[i][1], coordinates[i][0]);
  const marker = L.marker(latLng, {
    icon: icon, // 你自定义的icon实例
    rotationAngle: rotations[i]
  });
  markerLayerGroup.addLayer(marker);
}

方式2：转换为Point要素数组后用L.geoJson渲染 #

如果需要保留L.geoJson的统一处理逻辑，可以先把原LineString要素拆分为多个Point要素：

// 把LineString转换为Point要素数组
const pointFeatures = data.geometry.coordinates.map((coord, index) => {
  return {
    type: "Feature",
    properties: {
      rotation: data.properties.rotation[index],
      time: data.properties.times[index]
    },
    geometry: {
      type: "Point",
      coordinates: coord
    }
  }
});

// 用L.geoJson渲染Point要素
var layer = L.geoJson(pointFeatures, {
  pointToLayer: function (feature, latLng) {
    return new L.marker(latLng, {
      icon: icon,
      rotationAngle: feature.properties.rotation
    });
  }
}).addTo(map);

内容的提问来源于stack exchange，提问作者Icha Cahya Wulan