如何在 Mapbox 中显示多个绘制的多边形

Question

我想制作一个交互式地图，用户可以在其中创建多边形（区域）并保存。用户应该能够看到所有创建的区域。所以我需要用服务器给的坐标来渲染multiPolygon，同时也允许用户添加更多。

这是我的代码：

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: coords,
});
var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});

map.addControl(draw);

map.on('load', function () {
    var multiPolygon = turf.multiPolygon([[pol1],[pol2],[pol3]]);
    // How to render multiPolygon??
});

map.on('draw.create', function (e) {
    const coords = e.features[0].geometry.coordinates;

    // Here save the coords as a new polygon
});

但我无法使此代码有效！有人可以帮帮我吗？？

Answer 1

最后，我单独添加了每个多边形：

// I get areas var from server, which is an array of coordinates
map.on('load', function () {
    map.resize();
    if (areas.length) {
        areas.forEach(area => draw.add(turf.polygon(area.polygon, { id_area: area.id_area, name: area.name })));
    }
});

如何在 Mapbox 中显示多个绘制的多边形

How to show multiple drawn polygons in Mapbox

javascript

mapbox-gl-js

turfjs