如何在 OpenLayers 3 中绘制多部分几何图形？

Question

ol.interaction.Draw 具有 Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon 和 Circle 作为类型选项。我无法弄清楚的是如何实际绘制例如包含多个单个多边形的 MultiPolygon。 Here's a demo 控制台记录了一个有效的 GeoJSON 字符串，但是，它只包含一个多边形。

相关代码：

// create draw interaction and add it to the map:
drawInteraction = new ol.interaction.Draw({ source:vectorSource, type:"MultiPolygon" });
map.addInteraction(drawInteraction);

// define GeoJSON format:
var formatGeoJSON = new ol.format.GeoJSON();

// set listener on "drawend":
drawInteraction.on("drawend", function(e) {
    // get feature:
    var feature = e.feature; 
    // clone feature:
    var featureClone = feature.clone();
    // transform cloned feature to WGS84:
    featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
    // get GeoJSON of feature:
    var geojson = formatGeoJSON.writeFeature(featureClone);
    // log:
    console.log(geojson);
});

Answer 1

我建议你这样做：

var drawInteraction = new ol.interaction.Draw({
    source: vectorSource,
    type: "Polygon"
});
map.addInteraction(drawInteraction);

var multiPolygon = new ol.geom.MultiPolygon([]);
drawInteraction.on('drawend', function(e) {
    var
        feature = e.feature,
        poly = feature.getGeometry()
    ;
    multiPolygon.appendPolygon(poly);
    updateGeojson();
});
function updateGeojson(){
    var
        formatGeoJSON = new ol.format.GeoJSON(),
        cloned = multiPolygon.clone()
    ;
    cloned.transform('EPSG:3857', 'EPSG:4326');
    var geojson = formatGeoJSON.writeGeometry(cloned);
    console.info(geojson);
}

https://jsfiddle.net/jonataswalker/epyuLy7x/