修改Point geometry坐标后要素消失问题求助

问题1：坐标转换逻辑错误 #

你的coordinates数组中的值已经是**Web Mercator（EPSG:3857）**坐标系下的坐标，但你在moveAirplane函数中错误地使用了fromLonLat进行转换：

const lonlat = fromLonLat([
  coordinates[counter][1],
  coordinates[counter][0]
]);

fromLonLat的作用是将**WGS84（EPSG:4326）**经纬度坐标转换为Web Mercator坐标。把Web Mercator坐标当作经纬度传入后，会生成完全偏离地图可视范围的错误坐标，直接导致点要素消失。

解决办法：直接使用原坐标，去掉多余的转换逻辑：

const pointCoord = coordinates[counter];
aircraftPoint.current.getGeometry().setCoordinates(pointCoord);

问题2：无依赖的useEffect导致重复初始化 #

第一个useEffect没有设置依赖数组，会在每次组件渲染时重新执行：重新创建aircraftPoint、trafficLayer和Map实例。而第二个useEffect仅执行一次（依赖为空数组），它操作的是第一次初始化的旧aircraftPoint，但此时地图中已经是新创建的要素，旧要素的坐标修改不会反映到当前地图上。

解决办法：给第一个useEffect添加空依赖数组，确保地图、图层和要素只初始化一次：

useEffect(() => {
  // 初始化代码...
}, []); // 添加空依赖数组

修正后的核心代码片段 #

// 第一个useEffect添加空依赖，确保只初始化一次
useEffect(() => {
  aircraftPoint.current = new Feature({
    geometry: new Point(fromLonLat([113.89076390019189, 22.324364815058356]))
  });

  trafficLayer.current = new VectorLayer({
    source: new VectorSource({
      features: [aircraftPoint.current]
    })
  });

  new Map({
    target: mapRef.current,
    layers: [
      new TileLayer({
        source: new OSM()
      }),
      trafficLayer.current
    ],
    view: new View({
      center: fromLonLat([113.91, 22.32]),
      zoom: 14
    })
  });
}, []);

// 修正moveAirplane函数的坐标处理逻辑
function moveAirplane() {
  console.log("Moving airplane: ", counter);

  const pointCoord = coordinates[counter];
  aircraftPoint.current.getGeometry().setCoordinates(pointCoord);

  if (counter + 1 > coordinates.length - 1) {
    counter = 0;
  } else {
    counter = counter + 1;
  }
}

内容的提问来源于stack exchange，提问作者robtot