OL5.3 | Polygon

by Dennis Bauszus

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

#map {
  height: 100%;
  width: 100%;
}

JavaScript

var polyCoords = [
ol.proj.transform([180, 90], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([180, -90], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-180, -90], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-180, 90], 'EPSG:4326', 'EPSG:3857')
];

var polyHole = [
ol.proj.transform([10, 65], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([10, 45], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-15, 45], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-15, 65], 'EPSG:4326', 'EPSG:3857')
];


var feature = new ol.Feature({
    geometry: new ol.geom.Polygon([polyCoords, polyHole])
})

var _layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [feature]
    })
});



const layerBase = new ol.layer.Tile({
  source: new ol.source.OSM({
    url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
    opaque: false,
    attributions: []
  })
});

const map = new ol.Map({
  target: 'map',
  layers: [layerBase, _layer],
  view: new ol.View({
    center: ol.proj.fromLonLat([0,55]),
    zoom: 4
  })
});