OpenLayers 重叠 LineStrings 问题

OpenLayers overlapping LineStrings issue

我有一组坐标,我从中创建了 2 LineStrings

// global variables, I have previously defined map
let route = null;
let routeFeature = null;
let routeOverlay = null;
let routeOverlayFeatur = null;

我的主线串

function createMainRoute(coordinates) {
   route = new LineString(coordinates);

   routeFeature = new Feature({ geometry: route });

   routeFeature.setStyle(styles.mainRoute);

   const routeLayer = new VectorLayer({
     source: new VectorSource({
        features: [routeFeature],
     }),
   });
   
   map.addLayer(routeLayer);
}

我的第二个具有精确坐标的 LineString

function createMainRouteOverlay(coordinates) {
   routeOverlay = new LineString(coordinates);

   routeOverlayFeature = new Feature({ geometry: routeOverlay });

   routeOverlayFeature.setStyle(styles.routeOverlay);

   const routeOverlayLayer = new VectorLayer({
     source: new VectorSource({
        features: [routeOverlayFeature],
     }),
   });
   
   map.addLayer(routeOverlayLayer );
}

现在我有一个绘制这两条线的函数,当我从服务器获取初始数据时调用这个函数

function init(coordinates) {
   createMainRoute(coordinates);
   createMainRouteOverlay(coordinates);
}

目标是想修改覆盖线上的坐标,如坐标、样式等,但不丢失主路线的轨迹,但它们在开始时是相同的。

现在我有一个函数可以动态改变覆盖线的坐标集。当外部数据改变时调用此函数。

function readjust(newCoordinates) {
   routeOverlayFeature.getGeomety().setCoordinates(newCoordinates)
}

这里的问题是,当我调用 readjust() 时,地图上没有任何反应,这些新坐标的线保持不变,但是当我从 init 函数中注释掉 createMainRoute() 时,意思是我只有一根线,只要调用 readjust(),线就会用新数据更新。有谁知道这里的问题是什么?是否不支持这样的事情,或者我需要设置一些 属性 来允许这样做吗?我不明白为什么当它们是 2 个分开的变量并且只有一个被更新时它们会发生冲突。感谢任何帮助

您的要素共享相同的几何结构

routeOverlayFeature = new Feature({ geometry: route });

应该是

routeOverlayFeature = new Feature({ geometry: routeOverlay });