Paint open layers polygon.

paint-polygon.js

import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import Draw from '../src/ol/interaction/Draw.js';
import Modify from '../src/ol/interaction/Modify.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {OSM, Vector as VectorSource} from '../src/ol/source.js';
import {Stroke, Style, Fill, Circle} from '../src/ol/style.js';
import {GeoJSON} from '../src/ol/format.js';

let features = [];
let removedFeatures = [];

let drawColor = '#ff000091';
let geoJsonFormat = "EPSG:3857";

// Drawing style
let drawStyle = new Style({
  fill: new Fill({
    color: drawColor
  }),
  stroke: new Stroke({
    color: drawColor,
    width: 10
  }),
  image: new Circle({
    radius: 10,
    fill: new Fill({
      color: drawColor
    })
  })
});

// Tiling
const tileLayer = new TileLayer({
  source: new OSM()
});

// VectorSource
const vectorSource = new VectorSource({
  wrapX: false
});

// VectorLayer
let vectorLayer = new VectorLayer({
  source: vectorSource,
  style: drawStyle
});

// Map Object
let map = new Map({
  layers: [tileLayer, vectorLayer],
  target: 'map',
  view: new View({
    center: [-11000000, 4600000],
    zoom: 13
  })
});

// Draw
let draw = new Draw({
  source: vectorSource,
  type: 'LineString',
  freehand: true,
  style: drawStyle,
  minPoints: 1
});

function getNewVectorLayer(size) {
  let actualSize = size * 10;
  return new VectorLayer({
    source: new VectorSource({
      wrapX: false
    }),
    style: new Style({
      fill: new Fill({
        color: drawColor,
        width: actualSize
      }),
      stroke: new Stroke({
        color: drawColor,
        width: actualSize * 2
      }),
      image: new Circle({
        radius: actualSize,
        scale: 1.0,
        snapToPixel: true,
        fill: new Fill({
          color: drawColor
        })
      })
    })
  });
}

// Keyboard Shortcuts
document.addEventListener('keypress', (event) => {
  const keyName = event.key;
  if (keyName === 'Control') {
    // do not alert when only Control key is pressed.
    return;
  }

  switch (event.key) {
    case 'z':
      console.log("Undoing");
      undo();
      break;
    case 'r':
      console.log("Redoing");
      redo();
      break;
    case 'd':
      console.log("Drawing");
      draw.setActive(true);
      break;
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9':
    case '0':
      let numberPressed = parseFloat(event.key.toString());
      console.log("Setting size to " + numberPressed);
      let fmt = new GeoJSON({
        featureProjection: geoJsonFormat
      });
      let features = JSON.parse(fmt.writeFeatures(vectorLayer.getSource().getFeatures()));
      console.log(features.type, "# features: ", features.features.length);
      map.removeInteraction(draw);
      vectorLayer = getNewVectorLayer(numberPressed);
      map.addLayer(vectorLayer);
      addInteraction();
      break;

    default:
      console.log("Key [" + keyName + "] is not mapped");
  }

}, false);


function updateMap() {
  console.log("Finished drawing... updating map with # layers: " + map.getLayers().length);
  console.log(map.getLayers());
}

function addInteraction() {
  draw = new Draw({
    source: vectorLayer.getSource(),
    type: 'LineString',
    freehand: true,
    style: vectorLayer.getStyle(),
    minPoints: 1,
  });

  draw.on('drawend', function (e) {
    //this is the feature fired the event
    let currentFeature = e.feature;
    //rest of features
    let restOfFeatures = vectorSource.getFeatures();
    //concatenate the event feat to the array of source feats
    let allFeatures = restOfFeatures.concat(currentFeature);
    features = allFeatures;
    console.log("Features", features.length, "\tRemovedFeatures: ", removedFeatures.length);
    updateMap()
  });

  map.addInteraction(draw);
}

window.addEventListener('keydown', function (event) {
  if (event.keyCode == 16) {
    draw.setActive(false);
    console.log("Shift Key Held");
  }
});

// Remove the last feature addeed
function undo() {
  if (features.length === 0 && map.getLayers().array_.length > 1) {
    for (let i = 0; i < map.getLayers().array_.length; i++) {
      let tempLayer = map.getLayers().array_[i];
      if (tempLayer.type === 'VECTOR') {
        console.log("Layer found.");
        console.log("-------------------");
        console.log(tempLayer);
        if (tempLayer.getSource().getFeatures().length > 0) {
          vectorLayer = map.getLayers().array_.pop();
          // removedFeatures = [];
          break;
        }
      }
    }
  }
  if (features.length > 0) {
    removedFeatures.push(features.pop());
    console.log(map.getLayers().array_.slice(-1)[0].getSource());
    vectorLayer.getSource().removeFeature(removedFeatures[removedFeatures.length - 1]);
  } else {
    console.log("Can't undo.");
  }
  features = vectorLayer.getSource().getFeatures();

  console.log("Features", features.length, "\tRemovedFeatures: ", removedFeatures.length);

}

// Add last removed feature
function redo() {

  if (removedFeatures.length > 0) {
    features.push(removedFeatures.pop());
    vectorLayer.getSource().addFeature(features[features.length - 1]);
  }
  else {
    console.log("Cannot redo.");
  }

  console.log("Features", features.length, "\tRemovedFeatures: ", removedFeatures.length);
}

addInteraction();