Showing the vertices of a polygon with a custom style geometry.
In this example two different styles are created for the polygons:
<!DOCTYPE html> <html> <head> <title>Custom styles for polygons</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> <link rel="stylesheet" href="polygon-styles.css"> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div> </div> <script> var styles = [ /* We are using two different styles for the polygons: * - The first style is for the polygons themselves. * - The second style is to draw the vertices of the polygons. * In a custom `geometry` function the vertices of a polygon are * returned as `MultiPoint` geometry, which will be used to render * the style. */ new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }), new ol.style.Style({ image: new ol.style.Circle({ radius: 5, fill: new ol.style.Fill({ color: 'orange' }) }), geometry: function(feature) { // return the coordinates of the first ring of the polygon var coordinates = feature.getGeometry().getCoordinates()[0]; return new ol.geom.MultiPoint(coordinates); } }) ]; var geojsonObject = { 'type': 'FeatureCollection', 'crs': { 'type': 'name', 'properties': { 'name': 'EPSG:3857' } }, 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6], [-5e6, 6e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6], [-2e6, 6e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6], [1e6, 6e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-2e6, -1e6], [-1e6, 1e6], [0, -1e6], [-2e6, -1e6]]] } } ] }; var source = new ol.source.Vector({ features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) }); var layer = new ol.layer.Vector({ source: source, style: styles }); var map = new ol.Map({ layers: [layer], target: 'map', view: new ol.View({ center: [0, 1000000], zoom: 2 }) }); </script> </body> </html>