在Leaflet中获取div屏幕位置

Question

我正在使用Leaflet开展一个项目。我想在地图上为对象放置标签。我不希望标签出现在地图上。我希望标签放在地图上方，但是在屏幕上或从latLng点开始左边的位置。

我似乎无法使用可用的功能获得正确的位置。有什么例子我可以看一下给我洞察力吗？我认为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中的经纬网，边尺度条和边缘标记插件。这些插件包含类似概念的实现。