リーフレット マップ上の線グラフィックをクリックすると、ズーム後にマーカーがオンラインにならない問題を解決するためにマーカーを追加します。

問題: レベルが小さい場合、クリックは確かにオンラインですが、ズームインすると、マーカーはオンラインでなくなります。

理由： 

レベルが小さい場合、クリックした緯度と経度が目に見えるものになります。ズームインすると、理想的な位置ではありません。このとき、ラベルのオフセットとは関係ありません。マウスポイントが表示されます。マップを非常に大きくしてクリックすると、この時点でメーカーは非常に正確になります。

解決策:

芝生の nearestPointOnLineメソッドを使用して、ポイント距離ラインレイヤーの交点を計算します。

コードセグメント:

drawa(){
            // 线：坐标点
            var latlngs = [
                [31.537628173828125,121.190185546875],
                [30.878448486328125,121.19430541992188],
                [30.839996337890625,121.92901611328125]
            ];
            
            let map = this.map;  //获取map地图

            let lineLayer = L.featureGroup([])  // 创建线图层
            map.addLayer(lineLayer)
            // 绘制且添加
            var polyline = L.polyline(latlngs, {color: 'red'}).addTo(lineLayer);
            // 跳到线的范围
            //map.fitBounds(polyline.getBounds());

            lineLayer.on("click",function(e){
                console.log(e);
                var Icon = L.icon({
                        // iconUrl:require(`../../../assets/images/bigscreen/red.png`),
                        iconUrl:require(`./abc.png`),

                        iconSize: [50, 50], // size of the icon
                        // 左移 上移
                        iconAnchor: [25, 49], // 偏移量
                    });

                let latlng = e.latlng; 
                let linejson = e.layer.toGeoJSON();  //获取线图层点集
                let pt = turf.point([latlng.lng, latlng.lat], {"marker-color": "F00"});
                // 计算交点
                let snapped = turf.nearestPointOnLine(linejson, pt, {units: 'kilometers'});
                console.log("snapped",snapped)

                let center = snapped.geometry.coordinates;
                console.log("center",center);
                
                L.marker([center[1],center[0]], { icon: Icon }).addTo(map);
                    
            })
        },

結果を達成する:

地図がどれほど大きくても、描画された経度と緯度が線と交差するため、点は常に線上にあります。

エッセイノート（出典：会社上司）