使用Turf.nearestPointOnLine(line,point)方法. 去找移动点距离图层上线最近的点。
计算他们两者的距离。当距离小于一定的值。 将移动点的坐标变过去。
1. 拿到每次marker移动点的坐标
2. 拿到marker移动点经过的图层数据
3. 将图层面数据通过turf.polygonToLine()转为线
4. 拿到Turf.nearestPointOnLine(line,point)的返回值。根据返回值的properties中的distance
来决定距离多少开始吸附。
5 改变移动点marker的坐标
`marker.on('drag', onDrag)
// marker移动过程中
function onDrag() {
// console.log("marker开始移动了", 111)
let lngLat = marker.getLngLat()
let point = map.project([lngLat.lng, lngLat.lat])
// 获取移动过程中经过的图层
let features = map.queryRenderedFeatures([point.x, point.y])
// 获取的图层很多---这里根据的是polygon_category来筛选的图层
// 根据自己的图层属性修改
let nowFeatures = features.find((i) => i.properties.polygon_category ==='room')
if (!nowFeatures) return
let nowLayerId = nowFeatures.id
// dealData为所有的绘制图层的数据
let line = dealData.find(i => i.id == nowLayerId)
movePoint = turf.point([lngLat.lng, lngLat.lat])
var nearest = turf.nearestPointOnLine(line, movePoint, { units: 'miles' })
let distance = (nearest.properties.dist) * 10000
console.log("距离线上最近点的距离为", distance)
if (distance < 5) {
// 更新marker坐标点
marker.setLngLat(nearest.geometry.coordinates)
同理，mapbox-gl-draw编辑面，在拖动点的过程中 也可以实现一样的功能。思路是一样的。也是去找移动中距离移动点线上距离最近的点。
- 312
-
WebGL
Canvas
JavaScript
- 150
-
JavaScript
WebGL
three.js
- 877
-
alphardex
WebGL
three.js
- 3913
-
Spirited_Away
WebGL
掘金·金石计划
