Dynamic Style

dynamicstyle.js

// Defining Dynamic Styles
let dynamicStyle = {
  'point': new ol.style.Style({
    image: new ol.style.Circle({
      radius: 10,
      fill: new ol.style.Fill({
        color: [247, 5, 25, 1],
      }),
      stroke: new ol.style.Stroke({
        color: [5, 74, 247, 1],
        width: 5
      })
    })
  }),
  'line': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: [191, 17, 183, 1],
      width: 10
    })
  }),
  'polygon': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: [255, 204, 0, 1],
      width: 10
    }),
    fill: new ol.style.Fill({
      color: [255, 0, 51, 0.4]
    })
  })
};

function styleChange(val) {
  if (val == "static") {
    vector_layer.setStyle(staticStyle);
  }
  else if (val == "dynamic") {
    vector_layer.setStyle((e)=>{
      let geomType = e.getGeometry().getType();
      if (geomType == 'Point') {        
        return dynamicStyle['point']
      } else if (geomType == 'LineString') {
        return dynamicStyle['line']
      } else if (geomType == 'Polygon') {963.
        return dynamicStyle['polygon']
      }      
    });
  }
}