Получение местоположения экрана div в Leaflet

Question

Я работаю над проектом с использованием Leaflet. Я хочу разместить метку для объектов на карте. Я не хочу, чтобы ярлык появлялся на карте. Я хочу, чтобы метка была размещена над картой, но на экране или в другом месте слева от точки широты.

Я не могу получить правильную позицию, используя доступные функции. Есть ли какой-нибудь пример, на который я могу посмотреть, чтобы дать мне понимание? Я думаю, что Leaflet может сделать это.

Answer 1

Ключом здесь является использование latLngToContainerPoint() метода L.Map - он даст вам пиксельные координаты относительно контейнера карты пройденного L.LatLng.

Так создайте контейнер для галочки ...

    <div id="topbar"><span id="toptick">↓</span></div>
    <div id="leaflet"></div>

... и использовать CSS, чтобы убедиться, что он находится над контейнером карты и имеет такую ​​же ширину. Затем запустите функцию для преобразования нужной точки карты в смещение относительно верхнего левого угла контейнера карты ...

function repositionEdges(){
    var offset = map.latLngToContainerPoint(geopoint);
}

... выполнить это после инициализации карты и после каждого движения карты ...

repositionEdges();
map.on('move zoom', repositionEdges);

... и, наконец, внутри этой функции сместите галочку горизонтально, настраивая ее стиль ...

function repositionEdges(){
    var offset = map.latLngToContainerPoint(geopoint);
    document.getElementById('toptick').style.left = offset.x + 'px';
}

Рабочий пример можно посмотреть по адресу https://next.plnkr.co/edit/60qrWND50mCOQ11T?preview.

Это всего лишь один подход. Конкретная реализация будет отличаться, если вы используете более одной точки, или если вы хотите использовать <canvas> для рисования галочек.

См. Также плагины сетки, линейки шкалы и маркеров краев из списка Leaflet . Эти плагины содержат реализации похожих концепций.