OpenLayers：地图移动时几何坐标更新失效问题求助

问题详情 #

• 预期行为：拖拽地图（按住鼠标左键拖动）时，飞机Geometry应持续更新坐标位置。
• 实际行为：地图移动过程中飞机Geometry坐标无变化，仅停止移动后才更新至正确坐标。

解决方法 #

OpenLayers在地图交互（如拖拽）过程中会暂停自动渲染更新以优化性能。要让飞机坐标实时更新，需要在修改要素坐标后，主动调用要素的changed()方法，通知OpenLayers要素已发生变化，触发即时重绘。

修改moveAirplane函数，在设置坐标后添加要素变更通知：

const moveAirplane = (counter: number) => {
  console.log("Moving airplane: ", counter);

  const lonlat = fromLonLat([
    coordinates[counter][1],
    coordinates[counter][0]
  ]);
  aircraftPoint.current.getGeometry().setCoordinates(lonlat);
  // 新增：通知要素已变更，触发实时重绘
  aircraftPoint.current.changed();
};

修改后的完整代码 #

import React, { useEffect, useRef } from "react";
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import Feature from "ol/Feature";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { fromLonLat } from "ol/proj";
import OSM from "ol/source/OSM";
import { Point } from "ol/geom";
import {
  Text as OLText,
  Fill as OLFill,
  Style,
  Stroke,
  Circle as OLCircle
} from "ol/style";

export default () => {
  const mapRef = useRef();
  const trafficLayer = useRef();
  const aircraftPoint = useRef();
  const coordinates = [
    [22.3084, 113.9239],
    [22.3084, 113.927],
    [22.3084, 113.929]
  ];

  const moveAirplane = (counter: number) => {
    console.log("Moving airplane: ", counter);

    const lonlat = fromLonLat([
      coordinates[counter][1],
      coordinates[counter][0]
    ]);
    aircraftPoint.current.getGeometry().setCoordinates(lonlat);
    // 通知要素变更，触发实时重绘
    aircraftPoint.current.changed();
  };

  const labelStyle = new Style({
    text: new OLText({
      font: "12px Calibri,sans-serif",
      overflow: true,
      fill: new OLFill({
        color: "#000"
      }),
      stroke: new Stroke({
        color: "#fff",
        width: 3
      }),
      offsetY: -12
    }),
    fill: new OLFill({
      color: "rgba(255, 255, 255, 0.2)"
    }),
    stroke: new Stroke({
      color: "black",
      width: 2,
      lineDash: [4, 4]
    }),
    image: new OLCircle({
      radius: 5,
      fill: new OLFill({
        color: "rgba(255,255,255,1)"
      })
    })
  });

  const style = [labelStyle];

  useEffect(() => {
    aircraftPoint.current = new Feature({
      name: "Aircraft name",
      geometry: new Point(fromLonLat([113.89076390019189, 22.324364815058356]))
    });

    trafficLayer.current = new VectorLayer({
      source: new VectorSource({
        features: [aircraftPoint.current]
      }),
      style: function (feature) {
        labelStyle.getText().setText(feature.get("name"));
        return style;
      }
    });

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

  useEffect(() => {
    let counter = 0;
    let intervalId = setInterval(() => {
      if (counter + 1 > coordinates.length - 1) {
        counter = 0;
      } else {
        counter = counter + 1;
      }
      moveAirplane(counter);
    }, 1000);
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return <div className="map" ref={mapRef} />;
};

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