OpenLayers - ol.style#GeometryFunction

by Jonatas Walker

HTML

<link rel="stylesheet" href="//openlayers.org/en/v3.11.2/css/ol.css">
<script src="//openlayers.org/en/v3.11.1/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

html, body, .map {
      height: 100%;
      width:100%;
      margin:0;
      padding:0;
 }
.map {
    position: absolute;
    z-index: 5;
}

JavaScript

var coords = [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6], [-5e6, 6e6]]];

var style = [
  new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 2
    }),
    geometry: function(feature) { // return only 3 sides
      var geom = feature.getGeometry();
      var extent = geom.getExtent();
      var topLeft = ol.extent.getTopLeft(extent);
      var topRight = ol.extent.getTopRight(extent);
      var bottomLeft = ol.extent.getBottomLeft(extent);
      var bottomRight = ol.extent.getBottomRight(extent);
      
      var borderLeft = new ol.geom.LineString([topLeft, bottomLeft]);
      var borderTop = new ol.geom.LineString([topLeft, topRight]);
      var borderRight = new ol.geom.LineString([topRight, bottomRight]);
      
      var multiLineString = new ol.geom.MultiLineString([]);
      multiLineString.appendLineString(borderLeft);
      multiLineString.appendLineString(borderTop);
      multiLineString.appendLineString(borderRight);

      return multiLineString;
    }
  }),
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      lineDash: [0, 6],
      width: 4
    }),
    geometry: function(feature) {
      var geom = feature.getGeometry();
      var extent = geom.getExtent();
      var bottomLeft = ol.extent.getBottomLeft(extent);
      var bottomRight = ol.extent.getBottomRight(extent);

      // return a linestring with the second style
      return new ol.geom.LineString([bottomLeft, bottomRight]);
    }
  })
];

var polygon = new ol.Feature(new ol.geom.Polygon(coords));
polygon.setStyle(style);

var vectorSource = new ol.source.Vector({
	features: [polygon]
});

var map = new ol.Map({
  layers: [
    new ol.layer.Vector({source: vectorSource})
  ],
  target: 'map',
  view: new ol.View({
    center: [-4e6, 68e5],
    zoom: 4
  })
});