To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
OpenLayers provide lot of interactions to interact with your web map. One such interaction is Modify interaction which is defined using ol.interaction.Modify module. Using this interaction, you can modify existing vector features. In order to implement this functionality, we will divide it into two steps.
- Select feature you want to modify using select interaction
- Modify the selected feature using Modify interaction
To modify an existing feature, first you have to select it.
To select any feature in OpenLayers, we will use Select interaction which can be defined using ol.interaction.Select module. See line number 64 in code snippet below. If you see there, we are using two properties layers and style. layers property specify the vector layers on which select interaction will work. style property will apply style on selected features.
Once we have selected an existing feature, we will use Modify interaction to modify it. At line number 72, we are creating a Modify interaction. Modify interaction uses features property. To this features property, we will assign features that are selected using Select interaction. Basically, this property is telling that Modify interaction can modify only these selected features.
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 |
// Defining Static Style let staticStyle = new ol.style.Style({ // Line and Polygon Style stroke: new ol.style.Stroke({ color: '#0e97fa', width: 4 }), fill: new ol.style.Fill({ color: 'rgba(0, 153, 255, 0.2)' }), // Point Style image: new ol.style.Circle({ radius: 9, fill: new ol.style.Fill({ color: [0, 153, 255, 1], }), stroke: new ol.style.Stroke({ color: [255, 255, 255, 1], width: 5 }) }) }); // Defining Dynamic Styles let dynamicStyle = { 'Point': new ol.style.Style({ image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: [247, 5, 25, 1], }), stroke: new ol.style.Stroke({ color: [5, 74, 247, 1], width: 5 }) }) }), 'LineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: [191, 17, 183, 1], width: 10 }) }), 'Polygon': new ol.style.Style({ // Line and Polygon Style stroke: new ol.style.Stroke({ color: [255, 204, 0, 1], width: 10 }), fill: new ol.style.Fill({ color: [255, 0, 51, 0.4] }) }) } //Add Modify Control to map let modifyClick = (e) => { //Remove previous interactions removeInteractions(); //Select Features let select = new ol.interaction.Select({ layers: [vector_layer], style: (e) => { return dynamicStyle[e.getGeometry().getType()]; } }); //Add Modify Control to map let modify = new ol.interaction.Modify({ features: select.getFeatures() }); map.addInteraction(select); map.addInteraction(modify); } |
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
Very good, Your posts have helped me a lot with Openlayers. Could you include in this example a button to draw and modify a circle? I have doubts. Thanks
Hello Andrei, give me time, will definitely do that and will update you
Hi can you do a tutorial on adding, deleting, modifying features but with activation buttons not just interactions and restricted under login permissions thru Geoserver?
Sure, will implement that soon