Leaflet.js 找到折线上最近的点并显示它

Question

我正在尝试找到轨迹线上与鼠标位置相对应的最近点。

用例是用户需要能够创建位于轨道上的标记。

为了实现该功能，我创建了一个圆形标记来指示轨道上最近的点，并创建了一条虚线折线来连接鼠标位置和圆形标记。在 Mousemove 事件中，我使用 Leaflet 内部“closestLayerPoint”函数和一些 GPS 转换（LatLng 到 x,y，反之亦然）来更新circleMarker 和 Polyline 的位置。

只要我不移动地图（缩小和放大不同的中心/拖动地图），一切都会正常工作。如果我更改地图位置，感觉就像使用旧的 Trackposition 来计算最近的点，导致位置错误。

移动地图之前：

移动地图后：

p.S.：由于 Windows 截图工具，您看不到我的鼠标位置。但这部分是正确的

   protected initTraceOptions(): void {
        this.trackTracing = {
            dot: L.circleMarker([0, 0], { radius: 10 }),
            trace: L.polyline([[0, 0], [0, 0]], {
                color: 'black',
                dashArray: '20, 20', dashOffset: '20',
            }),
            active: false,
            nearestPoint: null,
        };

    }    

    public activateTrackTracing(): void {
        if (this.trackTracing.active) {
            return;
        }
        this.map.off('mousemove');
        this.trackTracing.dot.addTo(this.map);
        this.trackTracing.trace.addTo(this.map);
        this.map.on('mousemove', this.updateTrackTracingOnMouseMove);
        this.trackTracing.active = true;
    }
    protected updateTrackTracingOnMouseMove = (event: L.LeafletMouseEvent): void => {
        this.trackTracing.nearestPoint = this.map.containerPointToLatLng(
            this.trackLine.polyLine.closestLayerPoint(event.containerPoint));
        this.trackTracing.dot.setLatLng(this.trackTracing.nearestPoint);
        this.trackTracing.trace.setLatLngs([event.latlng, this.trackTracing.nearestPoint]);
    };

Answer 1

我检索到的点是错误的，仅通过其纬度检索它并不能正确显示它，您可以使用此 onEventFunction 显示正确的点：

 protected updateTrackTracingOnMouseMove = (event: L.LeafletMouseEvent): void => {
    const eventLayerPoint = this.map.latLngToLayerPoint(this.map.containerPointToLatLng(event.containerPoint));
    this.trackTracing.nearestPoint = this.map.layerPointToLatLng(
        this.trackLine.polyLine.closestLayerPoint(eventLayerPoint));
    this.trackTracing.dot.setLatLng(this.trackTracing.nearestPoint);
    this.trackTracing.trace.setLatLngs([event.latlng, this.trackTracing.nearestPoint]);
};