diff --git a/examples/polygon-styles.html b/examples/polygon-styles.html new file mode 100644 index 0000000000..5464d2f097 --- /dev/null +++ b/examples/polygon-styles.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + Custom styles for polygons + + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Custom styles for polygons

+

Showing the vertices of a polygon with a custom style geometry.

+
+

See the polygon-styles.js source to see how this is done.

+
+
polygon, vector, style, GeometryFunction
+
+ +
+ +
+ + + + + + + diff --git a/examples/polygon-styles.js b/examples/polygon-styles.js new file mode 100644 index 0000000000..70d18b1510 --- /dev/null +++ b/examples/polygon-styles.js @@ -0,0 +1,101 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.geom.MultiPoint'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.GeoJSON'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + +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 source = new ol.source.GeoJSON(/** @type {olx.source.GeoJSONOptions} */ ({ + object: { + '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 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 + }) +});