如何获取绘制多边形中的标记细节？

Question

标记将使用 firebase 动态添加。

map.loadImage(
AddressIcon,
function(error, image) {
    if (error) throw error;
    map.addImage(id + 'address', image);
    map.addSource(id + 'point', {
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': [
                features
            ]
        }
    });
    map.addLayer({
        'id': id + "addresses-layer",
        'type': 'symbol',
        'source': id + 'point',
        'layout': {
            'icon-image': id + 'address',
            'icon-size': 1
        }
    });
});

draw = new MapboxDraw({
        displayControlsDefault: false,
        userProperties: true,
        controls: {
            polygon: true,
            trash: true
        },
    });

map.addControl(draw, 'bottom-left');
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());

map.on('draw.create', updateDrawArea);
map.on('draw.delete', updateDrawArea);
map.on('draw.update', updateDrawArea);

const updateDrawArea = (e) => {
    var data = draw.getAll();
    console.log(data);
}

我在地图上有多边形绘制系统。在标记周围绘制多边形后，我需要获取所有添加的图层/标记。如果可能的话，我需要使用 mapbox-gl-js 来做到这一点。如果没有，还有其他选择吗？

Answer 1

是的，可以通过Turf.js。

Turf.js 公开了诸如pointsWithinPolygon 之类的函数，允许我们指定marker points 和polygon 坐标，并返回指定多边形内的标记列表。

例如：

var pointsWithinPolygon = require("@turf/points-within-polygon")
const turf = require('@turf/turf');

var points = turf.points([
    [-46.6318, -23.5523],
    [-46.6246, -23.5325],
    [-46.6062, -23.5513],
    [-46.663, -23.554],
    [-46.643, -23.557]
]);

var searchWithin = turf.polygon([[
    [-46.653,-23.543],
    [-46.634,-23.5346],
    [-46.613,-23.543],
    [-46.614,-23.559],
    [-46.631,-23.567],
    [-46.653,-23.560],
    [-46.653,-23.543]
]]);

var ptsWithin = turf.pointsWithinPolygon(points, searchWithin);
console.log(ptsWithin)

您可以参考this 教程，该教程解释了我们如何将 turf.js 与 mapbox-gl-draw 一起使用。