Openlayers, как обновить позицию наложения на событие moveend карты

Question

У меня есть функция Point типа ol.geom.Point на карте openlayers, и есть всплывающее окно, которое я отображаю при нажатии на эту функцию.Всплывающее окно - это элемент <div>, который я добавил в качестве наложения. Я отображаю и скрываю наложение всякий раз, когда обнаруживаю событие при нажатии на карту.

Проблема заключается в том, что наложение дислоцирует (tip and div) при увеличении или уменьшении масштаба карты.Однако, если вы нажмете еще раз на функцию, она будет отображаться правильно, но щелчок каждый раз не идеален.Также я пытаюсь отобразить наложение в каждом мире, проблема одинакова для каждого мира, она вывихивается.

Ожидаемый результат - всякий раз, когда я нажимаю на элемент, наложение должно отображаться на элементе независимо от масштабавход или выход.

Вот рабочая скрипка для воспроизведения проблемы: Наложение Openlayers JSFiddle

Снимки экрана: По умолчанию В настоящее время после увеличенияв Ожидается после увеличения или уменьшения

Answer 1

Чтобы точно позиционировать объект, но в мире, в котором вы нажали:

var worldWidth = ol.extent.getWidth(view.getProjection().getExtent());
var world = Math.floor((map.getCoordinateFromPixel(evt.pixel)[0] + worldWidth/2)/worldWidth);
let coordinate = feature.getGeometry().getCoordinates();
content.innerHTML = feature.get('desc');
popup.setPosition([coordinate[0] + world*worldWidth, coordinate[1]]);

Answer 2

Вы устанавливаете координаты всплывающего окна на координаты события, которые могут быть немного смещены.

Попробуйте установить координаты всплывающего окна в соответствии с координатами объекта, например:

let coordinate = feature.getGeometry().getCoordinates();

https://jsfiddle.net/2jf56q0g/