In this tutorial, we are going to create a dynamic measurement tool in OpenLayers version 6.5. We will create a Line and Area measurement tool to show measurements on labels that follow changing geometry like area, length or cursor position as shown in the above GIF image
Download the complete code of Dynamic Measurement from the GitHub repo by clicking here
Check the Live Dynamic Measurement Tool on map by clicking here
OpenLayers v6.5 doesn’t have any default measurement control. So any developer will have to develop it from scratch.
We will need the following 5 things in order to create this magic tool
1. A Map: First thing we need is a map. We will create a map in OpenLayers using the following snippet. Map is where we will do interaction like distance and area measurement. If you don’t how to create a map in OpenLayers, click here to know about it.
2. An Overlay: 2nd thing you need for the Dynamic Measurement tool is an Overlay. In OpenLayers, an Overlay is used to define labels on the map. We will use these overlays to display measurements. You can set the location of these labels on map by specifying Lat-Long points. We will use this Overlay functionality to create labels for our dynamic measurement tool and we will set the positions of these labels dynamically based on changing geometry of line and polygon.
Below is the code snippet for creating Overlay.
3. An interaction: Third thing we need is the interaction with map where we should be able to draw line for distance measurement and polygon for area measurement. We will use ol/Draw module from OpenLayers to draw Line and Polygon. Below is the code snippet to create a draw interaction on map. At line number 13 and 14 at below code snippet, we are binding two function with Draw interaction. In these two functions, main business logic is built for dynamic measure. We will discuss it later
4. A Vector layer: A vector layer is a temporary layer in OpenLayers that is used to store any geometry objects like Point, LineString, or Polygon. In our tool, we are drawing Line and Polygon for measurements. We will store these Line and Polygon into a vector layer. If we don’t store these in the vector layer, then we won’t be able to see any Line or Polygon when the drawing is finished as shown below.
Below is the code snippet to create a Vector Layer
5. A Logic: The last thing we need is a Logic that will able to do this task. The logic is built on one thing that is size of coordinates in geometry. For example, a single line will have a size of 2 because it contains 2 points. A line containing two parts will have a size of 3 because it has 3 points. Similarly, a triangle will have a size of 4, a square or rectangle will have a size of 5, and so on. So this is our coordinates length
coordinate_length variable is defined a line number 25 in below code. We will increment this variable whenever there will be a change in geometry coordinates size.
onDrawStart function defined at line 23 will be called when we will start drawing and it will initialise some variables needed for the dynamic measurement tool
onDrawEnd function defined at line 44 will add the drawn measurements to vector layer so that they remain visible on map
onGeomChange function defined at line number 53 will be constantly called if cursor changes during measurement. This function is binded to the geometry at line number 37. This is the magic function for the dynamic measurement. It keeps record of the coordinate _length variable and when coordinate _length value changes, onGeomChange function creates a new label for the measurement using overlay. Then, it will place the label on map with dynamic positioning. coordinate _length will be incremented whenever a new part or coordinates are added to geometry
calDistance function defined at line 93 calculates the length of line or line segment and place the measurement label on midpoint
calArea function defined at line 110 calculates the area of polygon and place the measurement label on centroid of it.
Note: onGeomChange, calDistance and calArea function will always be called on cursor movement while drawing thus providing us with dynamic measurement values
Similarly, you can develop much more advance and complex spatial tools using OpenLayers. In the next tutorial, we will create another OpenLayers tool which will divide the Polygon by a line in two parts. Stay tuned for it and Subscribes to my account.
Download the complete code of Dynamic Measurement from github repo by clicking here
Pingback: Layer's ZIndex in OpenLayers - Spatial Dev
Hallo, I would like to reach you regarding a Openlayers work. Can you share your email id.
You can reach me at contact@spatial-dev.guru
Congratulations on the code. About the button to delete the drawings, why ‘i>8’?
let removeInteractions = () => {
map.getInteractions().getArray().forEach((interaction, i) => {
if(i > 8) {
map.removeInteraction(interaction);
}
});
}
This code is removing the interactions. When we open the openlayers map, there are already 8 default interactions like zoom, pan etc. map.getInteractions().getArray() will have all interactions default as well as other interactions created by us. I am just removing those interaction which are added by me like drawing etc. Hence this logic
Thanks. I didn’t know that we have 8 standard interactions, so I didn’t understand why to remove from i > 8