有没有办法将图标/标记移动到某个位置,然后“捕捉”到该位置?
例如,在计算机上进行象棋游戏时,当您将棋子移动到正确的方格时,当您放开广场附近/周围的棋子时,它会捕捉到该位置。
所以我想要的是将标记或图标移动到某个位置,比如加利福尼亚州的首府,当我移动标记时,标记将“捕捉”到我想要的位置并放开标记靠近该位置。但是如果我愿意的话,我也希望能够移动标记。
我知道Mapbox gl有bearingSnap,在用户旋转地图后将地图捕捉回北方,但我找不到任何图标/标记,我不相信我可以使用{{1对于它。
感谢。
答案 0 :(得分:2)
您可以使用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) {
// set the location of the dragging point to the location of the snapping point
geojson.features[0].geometry.coordinates = feature.geometry.coordinates;
map.getSource('point').setData(geojson);
}
});
}
答案 1 :(得分:-1)
这是您可以并且应该在GL JS上游实现的功能。构造标记或GeoJSON要素的坐标时,将其捕捉到所需的网格。