Mapbox 图标/标记“BearingSnap”或对齐位置答案

【问题标题】：Mapbox Icons/Markers "BearingSnap" or Snap to PositionMapbox 图标/标记“BearingSnap”或对齐位置
【发布时间】：2016-09-09 18:17:11
【问题描述】：

有没有办法将图标/标记移动到某个位置，然后它会“捕捉”到该位置？

例如，在计算机上的国际象棋游戏中，当您将棋子移动到正确的方格时，当您在方格附近/周围放开棋子时，它会迅速移动到该位置。

所以我想要将标记或图标移动到某个位置，比如加利福尼亚州的首府，当我移动它并放开标记时，标记将“捕捉”到我想要的位置位置附近。但如果我愿意，我也希望仍然能够移动标记。

我知道 Mapbox gl 有 bearingSnap 在用户旋转地图后将地图捕捉回北方，但我找不到任何图标/标记，我不相信我可以使用 bearingSnap .

谢谢。

【问题讨论】：

标签： mapbox mapbox-gl mapbox-gl-js

【解决方案1】：

您可以使用Turfs 距离函数：turf.distance(pt1, pt2) 来测量两点之间的距离。如果然后计算的距离低于某个阈值，您可以将拖动点的位置设置为捕捉点的位置。

我在 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);
    }
  });
}

【讨论】：

这可能是我一直在寻找的...只是想知道这也适用于多个点和位置吗？即A点、B点、C点可以分别去Aa、Bb、Cc点？
不是开箱即用的。您需要保存最后一次单击的点，以了解鼠标拖动的是哪个点。我更新了示例以支持多个捕捉点和多个位置点，请参见此处：jsfiddle.net/andi_lo/nmc4kprn/5

【解决方案2】：

这是您可以并且应该在 GL JS 上游实现的功能。当您构建标记或 GeoJSON 特征的坐标时，将其捕捉到所需的网格。

【讨论】：

抱歉，我对 Mapbox 还是很陌生。你能详细说明一下吗？谢谢。
他不是在谈论快照网格，您的回答也没有提供任何可能的解决方案的信息