在Leaflet中获取div屏幕的位置

Question

我正在使用Leaflet进行项目。我想在地图上放置物体的标签。我不希望标签出现在地图上。我希望将标签放置在地图上方，但要放在latLng点的屏幕或div左侧位置。

使用可用的功能，我似乎找不到正确的位置。有什么我可以看的例子可以给我洞察力吗？我认为Leaflet可以做到这一点。

Answer 1

此处的关键是利用the latLngToContainerPoint() method of 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 plugins list中的刻度，边缘比例尺和边缘标记插件。这些插件包含类似概念的实现。