我想做一个交互式地图,用户可以在其中创建一个多边形(区域)并保存它。用户应该能够看到所有创建的区域。所以我需要用服务器给定的坐标渲染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
});
但是我无法使此代码起作用!有人能帮助我吗??
最后,我单独添加了每个多边形:
// 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 })));
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句