OL3 hole creator 2

Draw Holes (donut like) inside a selected polygon

by Pavlos Tsagkis

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol-debug.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol-debug.js"></script>
<script src="https://bjornharrtell.github.io/jsts/1.3.0/jsts.min.js"></script>
<div id="map" class="map"></div>
<button id="drawhole">draw hole</button>
<b>select only one feature and the press the "draw hole" button. Draw the hole inside the selected polygon. Just select a simple polyogn to test and not multipolygon</b>

JavaScript

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/geojson/countries.geojson',
        format: new ol.format.GeoJSON(),
        wrapX: false
    })
});

var selectInt = new ol.interaction.Select({
    wrapX: false
});

var modify = new ol.interaction.Modify({
    features: selectInt.getFeatures()
});


var map = new ol.Map({
    interactions: ol.interaction.defaults({
        //disable double click zoom so used for completing the hole
        doubleClickZoom: false
    }).extend([selectInt, modify]),
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});
//create the style to use for the hole draw interaction
var holeStyle = [
new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(0, 0, 0, 0.8)',
        lineDash: [10, 10],
        width: 3
    }),
    fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0)'
    })
}),
new ol.style.Style({
    image: new ol.style.RegularShape({
        fill: new ol.style.Fill({
            color: 'rgba(255, 0, 0, 0.5)'
        }),
        stroke: new ol.style.Stroke({
            color: 'black',
            width: 1
        }),
        points: 4,
        radius: 6,
        angle: Math.PI / 4
    })
})];
/**
 * activates the hole draw interaction
 *
 */
document.getElementById('drawhole').onclick = function () {
    var selFeats = selectInt.getFeatures();
    console.log("selFeats.length", selFeats.getLength());
    if (selFeats.getLength() !== 1) {
        alert("need to select only one feature to draw hole");
    } else {
        var geomTypeSelected = selFeats.getArray()[0].getGeometry().getType();
        if (geomTypeSelected !== 'Polygon') {
            alert("Only Polygon geometry selections.Not " + geomTypeSelected);
            return;
        }
   ...