マップボックスのアイコン/マーカー「BearingSnap」または位置にスナップ

Question

アイコン/マーカーを特定の場所に移動して場所にスナップする方法はありますか？

例えば、チェスゲームをコンピュータ上で実行すると、チェスピースを正しい四角に移動すると、そのピースを四角形の近くまたはそのまわりを離れるときにその位置にスナップします。

私が望むのは、マーカーやアイコンを特定の場所に移動することです。カリフォルニア州の首都と言えば、マーカーは移動してから離してもらいたい場所に「スナップ」します場所の近くのマーカー。しかし、私はまた、私がしたい場合でもマーカーを移動することができるようにしたい。

Mapbox glにはbearingSnapがあります。ユーザーが地図を回転した後に地図を北にスナップしますが、アイコン/マーカーだけは見つかりません。bearingSnapを使用できるとは思われません。

ありがとうございました。

Answer 1

Turfs距離機能：turf.distance(pt1, pt2)を使用すると、2点間の距離を測定できます。計算された距離が特定のしきい値を下回っている場合は、ドラッグポイントの位置をスナップポイントの位置に設定できます。

私はあなたにjsfiddleで作業例を持っています。 https://jsfiddle.net/andi_lo/nmc4kprn/

function onMove(e) { 
 
    if (!isDragging) return; 
 
    var coords = e.lngLat; 
 

 
    // Set a UI indicator for dragging. 
 
    canvas.style.cursor = 'grabbing'; 
 

 
    // Update the Point feature in `geojson` coordinates 
 
    // and call setData to the source layer `point` on it. 
 
    geojson.features[0].geometry.coordinates = [coords.lng, coords.lat]; 
 
    map.getSource('point').setData(geojson); 
 
    
 
    let snapTo = map.getSource('snap')._data; 
 
    
 
    turf.featureEach(snapTo, (feature) => { 
 
    let dist = turf.distance(feature, turf.point([coords.lng, coords.lat])); 
 
    console.log(dist); 
 
    // if the distance of the dragging point is under a certain threshold 
 
    if (dist < 500) { 
 
    \t // set the location of the dragging point to the location of the snapping point 
 
    \t geojson.features[0].geometry.coordinates = feature.geometry.coordinates; 
 
    \t map.getSource('point').setData(geojson); 
 
    } 
 
    }); 
 
}

Answer 2

これはGL JSのアップストリームで実装できる機能です。マーカーまたはGeoJSONフィーチャの座標を作成するときは、目的のグリッドにスナップします。