When you create a vector layer in OpenLayers, it comes with default styles or when you use Draw or Modify interaction, they also use default styles. OpenLayers style module is use for creating custom style for your vector layers like defining new color, border color, border width, fill color or fill pattern.
In other words, OpenLayers Style is a like a CSS to your vector layers.
To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
In this tutorial, we will implement advance style in OpenLayers for vector data. This tutorial is the extension to following tutorial where we have explained basics of style and implemented dynamic style. Please go through the following tutorial first if you haven’t.
1. Display custom image in place of points
ol.style.Icon module is used for showing the image in place of points. anchor, scale and src parameters are used with ol.style.Icon module. anchor parameter specifies the offset value meaning how you want show the image with respect to the point. scale parameter specifies the size of image. src parameter specifies the location (local or url) of image that you want to display. See line numbers 20-28 in below code snippet
2. Implement a dashed style for Line and display points at vertices
For Line feature, we will use array of styles. See line numbers from 29-51. The first style object is used to implement dashed style on Line and the second style object in the array is used to implement vertices style(to display points at the corners).
Display points at vertices for line
To show point on vertices, we will use ol.style.Circle module and geometry parameter in ol.style.Style object . See line number 38-51, the geometry parameter takes an anonymous function which will return the line coordinates in the form MultiPoint object. This MultiPoint object will be rendered on vertices of Line and the style which is defined in line numbers 40-45 will be implemented on this MultiPoint object.
3. Implement fill pattern style for Polygon and display points at vertices
For Polygon feature, we will also use array of styles. See line numbers from 52-79. The first style object is used to implement stroke and fill pattern style and second style object is used to implement vertices style(to display points at the corners).
Implement Fill Pattern style for Polygon
To implement a fill pattern for polygon is little bit trickier. To implement pattern, we will use canvas element which is used to create 2D graphics on web page. From line number 1-18, we are creating a canvas pattern. The OpenLayers ol.style.Fill defines fill color for polygon which takes color as parameter. This color parameter takes any color code or canvas pattern that we defined as value. For implementing fill pattern, we will assign pattern object as value to ol.style.Fill . See line number 62. This will implement fill pattern for the polygon. Using canvas, you can create any kind of pattern and implement it on OpenLayers.
To display vertices on polygon feature, we are using the same method that is used for line feature. See line number from 66-79.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
// Create a pattern const patternCanvas = document.createElement('canvas'); const patternContext = patternCanvas.getContext('2d'); // Give the pattern a width and height of 50 patternCanvas.width = 50; patternCanvas.height = 50; // Give the pattern a background color and draw an arc patternContext.fillStyle = 'rgba(255, 238, 204, 0.33)'; patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height); patternContext.arc(0, 0, 50, 0, .5 * Math.PI); patternContext.stroke(); // Create our primary canvas and fill it with the pattern const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const pattern = ctx.createPattern(patternCanvas, 'repeat'); //Advance Style let advanceStyle = { 'point': new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], scale: [0.5, 0.5], src: './assets/location.png' }) }), 'line': [ //Implement Dash style new ol.style.Style({ stroke: new ol.style.Stroke({ color: [191, 17, 183, 1], width: 3, lineDash: [10, 10] }) }), //Implement style for LineString vertices new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'orange', }) }), geometry: (feature) => { const coordinates = feature.getGeometry().getCoordinates(); return new ol.geom.MultiPoint(coordinates); } }) ], 'polygon': [ new ol.style.Style({ //Width of the stroke stroke: new ol.style.Stroke({ color: [255, 0, 51, 1], width: 3 }), //Fill polygon with canvas pattern fill: new ol.style.Fill({ // color: [255, 0, 51, 0.1] color: pattern }) }), //Implement style for Polygon vertices new ol.style.Style({ image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: 'orange', }), }), geometry: (feature) => { const coordinates = feature.getGeometry().getCoordinates()[0]; return new ol.geom.MultiPoint(coordinates); } }) ] } |
I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru.
To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
OpenLayers Style API for reference:
https://openlayers.org/en/latest/apidoc/module-ol_style_Style-Style.html
Pingback: OpenLayers Dynamic Style - Spatial Dev Guru