Проблема с перекрытием строк OpenLayers

#javascript #openlayers

#javascript #openlayers

Вопрос:

У меня есть один набор координат, из которого я создаю 2 строки

 // 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);
}
  

Моя вторая строка с точными координатами

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

Теперь у меня есть функция, которая рисует эти 2 строки, эта функция вызывается, когда я получаю исходные данные с сервера

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

Цель состоит в том, что я хочу изменить координаты в строке наложения, такие как координаты, стиль и так далее, не теряя след основного маршрута, но они в начале одинаковы.

Теперь у меня есть функция, которая будет динамически изменять набор координат строки наложения. Эта функция вызывается при изменении внешних данных.

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

Проблема здесь в том, что когда я вызываю readjust() , на карте ничего не происходит, строка остается неизменной с этими новыми координатами, но когда я комментирую createMainRoute() из функции init, то есть у меня есть только одна строка и я просто вызываю readjust() , строка обновляется новыми данными. Кто-нибудь знает, в чем здесь проблема? Что-то подобное не поддерживается или мне нужно установить какое-то свойство, чтобы разрешить это? Я не понимаю, почему они конфликтуют, когда они представляют собой 2 отдельные переменные и обновляется только одна. Любая помощь приветствуется

Ответ №1:

Ваши функции используют одну и ту же геометрию

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

должно быть

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

Комментарии:

1. Я видел это, но я пропустил, когда писал вопрос, в коде все в порядке.

2. С этим изменением ваши функции здесь работают правильно codesandbox.io/s/hungry-hugle-dvbb1?file=/main.js

3. Спасибо, чувак, тогда что-то не так в моем коде, просто хотел убедиться, что это возможно сделать.