Блог

Я разрабатываю средство просмотра погодных радаров с использованием Mapbox. В определенном режиме на экране одновременно отображаются 2 карты Mapbox, показывающие разные режимы радара. Карты привязаны друг к другу. Когда одна карта перемещается, поворачивается или панорамируется — другая делает то же самое. Я сделал это, просто передав свойства одной карты другой. На скриншоте ниже вы увидите, как они отображают идентичные местоположения.

Что я хочу сделать, так это — когда пользователь наводит курсор мыши на «map1», я хотел бы идентичный (призрачный или ложный) курсор на «map2». Вот что я хочу сделать:

(редактировать: то, на что вы смотрите, является фактическим скриншотом. Каждая карта заключена в DIV шириной 50% экрана, если это поможет объяснить)

Я не знаю, возможно ли это вообще в Mapbox. Надеюсь, кто-нибудь сможет дать некоторые рекомендации, поскольку я не могу найти никаких других вопросов, связанных с этим, и у меня действительно нет кода для показа, не зная, с чего начать.

Если вы попытаетесь сделать это внутри Mapbox-GL-JS (например, постоянно обновляя местоположение слоя объектов GeoJSON), я думаю, что производительность будет довольно низкой.

Но поскольку два вида точно заблокированы (и, предположительно, имеют одинаковые размеры), вы можете просто сделать это на уровне HTML / CSS. Обнаружьте движение мыши на первой карте и обновите местоположение элемента с абсолютным расположением, нависающего над второй картой, для соответствия.

Другим подходом было бы использование canvas элемента, наложенного на вторую карту, аналогичным образом обновленную.