使用turf.js将可拖动点捕捉到Mapbox GL JS中的矢量图块设置线

Question

我正在尝试将可拖动点捕捉到由线条组成的矢量tileset，但是我不确定是否可以使用Mapbox矢量tileset。

从本质上讲，这与使用turf.js https://jsfiddle.net/andi_lo/nmc4kprn/5/的点捕捉示例等效，该示例在以下堆栈溢出文章中概述： Mapbox图标/标记“ BearingSnap”或“捕捉到位置”

我修改了一个基本的Mapbox可拖动点示例，以查询tileset中包含的渲染特征。 我只是不确定如何将测量和捕捉功能整合到其中。 我可以在控制台日志中看到返回了我相交的要素的坐标。 有任何想法吗？

 mapboxgl.accessToken = 'pk.eyJ1Ijoic2luc3ctc2NpIiwiYSI6ImNqajd6MHYyZjEyZzUzcnBlNnM1OHFmdXoifQ.ZBT_-d26dSFur2oWzXAQvA'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/sinsw-sci/cjl1x0v4489j32qp2nd9swywc', center: [151.206, -33.865], zoom: 17 }); var canvas = map.getCanvasContainer(); var geojson = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [151.206, -33.865] } }] }; function onMove(e) { 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); var features = map.queryRenderedFeatures(e.point, { layers: ['snapTo'] }); // console.log(features); // Change point and cursor style as a UI indicator // and set a flag to enable other mouse events. if (features.length) { console.log(features); canvas.style.cursor = 'move'; isCursorOverPoint = true; map.dragPan.disable(); } else { map.setPaintProperty('point', 'circle-color', '#3887be'); canvas.style.cursor = ''; isCursorOverPoint = false; map.dragPan.enable(); } } function onUp(e) { var coords = e.lngLat; canvas.style.cursor = ''; // Unbind mouse/touch events map.off('mousemove', onMove); map.off('touchmove', onMove); } map.on('load', function() { // Add a single point to the map map.addSource('point', { "type": "geojson", "data": geojson }); map.addLayer({ "id": "point", "type": "circle", "source": "point", "paint": { "circle-radius": 10, "circle-color": "#3887be" } }); map.addSource('snap', { type: 'vector', url: 'mapbox://mapbox.mapbox-streets-v7' }); map.addLayer({ id: 'snapTo', type: 'line', source: 'snap', 'source-layer': 'road', 'paint': { "line-color": "#2AAAFF", "line-opacity": 0.5, 'line-width': 1 } }); // When the cursor enters a feature in the point layer, prepare for dragging. map.on('mouseenter', 'point', function() { map.setPaintProperty('point', 'circle-color', '#3bb2d0'); canvas.style.cursor = 'move'; }); map.on('mouseleave', 'point', function() { map.setPaintProperty('point', 'circle-color', '#3887be'); canvas.style.cursor = ''; }); map.on('mousedown', 'point', function(e) { // Prevent the default map drag behavior. e.preventDefault(); canvas.style.cursor = 'grab'; map.on('mousemove', onMove); map.once('mouseup', onUp); }); map.on('touchstart', 'point', function(e) { if (e.points.length !== 1) return; // Prevent the default map drag behavior. e.preventDefault(); map.on('touchmove', onMove); map.once('touchend', onUp); }); });

 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Snap point to vector tileset</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id='map'></div> </body> </html>

Answer 1

在我看来，这是可能的。

您需要从该Point示例进行两个主要更改。

首先，使用queryRenderedFeatures()提取所有可捕捉到的源向量特征。 您可能需要在当前鼠标位置周围传递一个边界框，以限制寻找候选对象的距离。 您还将需要为正确的图层传递过滤器，并可能将其限制为["==", "$type", "LineString"]

其次，在迭代每个返回的线要素时，使用Turf的最近点nearestPointOnLine()来计算到每条线的距离，并找到该线上的实际最近点。 就像是：

var nearestPoint;
turf.featureEach(snapTo, (feature) => {
    var point = turf.nearestPointOnLine(feature, turf.point([coords.lng, coords.lat]));
    // if the distance of the dragging point is under a certain threshold
    if (!nearestPoint || point.properties.dist < nearestPoint.properties.dist) {
      nearestPoint = point;
    }
  });

if (nearestPoint) {
      // do whatever you do, now that you have the closest point
}

使用turf.js将可拖动点捕捉到Mapbox GL JS中的矢量图块设置线

问题描述

1 个解决方案

解决方案1
3 2018-08-20 23:52:44

使用turf.js将可拖动点捕捉到Mapbox GL JS中的矢量图块设置线

问题描述

1 个解决方案

解决方案1 3 2018-08-20 23:52:44

解决方案1
3 2018-08-20 23:52:44