mapbox根据多边形选择点要素

Mapbox GL JS 对于按空间选择提供了 queryRenderedfeature函数，但是此函数仅支持按点选和标准矩形的框选，不支持按多边形选择。帮助文档中是这样说的：

查询区域的几何图形：描述边界框的单个点或西南和东北点。

因此，想要查询需要借助其他开源库，本文使用Mapbox推荐的turf.js实现

本文实现效果如下：

核心代码：

map2.addControl(draw);

map2.on('draw.create', updateArea);
map2.on('draw.delete', updateArea);
map2.on('draw.update', updateArea);

function updateArea(e) {
    var data = draw.getAll();
    var answer = document.getElementById('calculated-area');
    if (data.features.length > 0) {

        var userPolygon = e.features[0];

        // generate bounding box from polygon the user drew
        var polygonBoundingBox = turf.bbox(userPolygon);

        var southWest = [polygonBoundingBox[0], polygonBoundingBox[1]];
        var northEast = [polygonBoundingBox[2], polygonBoundingBox[3]];

        var northEastPointPixel = map2.project(northEast);
        var southWestPointPixel = map2.project(southWest);

        var features = map2.queryRenderedFeatures([southWestPointPixel, northEastPointPixel], { layers: ['pointslayer'] });

        var filter = features.reduce(function(memo, feature) {

            if (! (undefined === turf.intersect(feature, userPolygon))) {
                // only add the property, if the feature intersects with the polygon drawn by the user

                memo.push(feature.properties.FID);
            }
            return memo;
        }, ['in', 'FID']);

        map2.setFilter("selected", filter);

    } else {
        answer.innerHTML = '';
        if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
    }
}