지도 아이콘/마커 "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 피쳐의 좌표를 구성 할 때 원하는 모눈에 스냅합니다.