OpenLayers Tutorial: Drawing Geometric Figures

OpenLayers Tutorial: Drawing Geometric Figures

    OpenLayers' ol.interaction.Draw class realizes the function of interactively drawing geometric figures. It can be regarded as a control for drawing graphics, initialize it with appropriate parameters, and add it to the map object to perform interactive graphics drawing. .

    Let's look directly at an example:

View Image


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Draw Shapes</title> <link rel="stylesheet" href="../v5.3.0/css/ol.css"/> <script src="../v5.3.0/build/ol.js"></script> </head> <body> <div id="map"></div> <label>Shape type  </label> <select id="type"> <option value="Point">Point</option> <option value="LineString">LineString</option> <option value="Polygon">Polygon</option> <option value="Circle">Circle</option> <option value="Square">Square</option> <option value="Box">Box</option> <option value="None">None</option> </select> <script> let vectorSource = new ol.source.Vector(); let vectorLayer = new ol.layer.Vector({ source: vectorSource }); let map = new ol.Map({ target:'map', layers: [ new ol.layer.Tile({//Tile layer source: new ol.source.OSM()//OpenStreetMap data source }), vectorLayer ], view: new ol.View({//Map view projection:'EPSG:3857', center: [0, 0], zoom: 0 }) }); let typeSelect = document.getElementById('type'); let draw; function addInteraction(){ let type = typeSelect.value; if(type !=='None'){ let geometryFunction; switch(type){ case "Square": type ='Circle'; //Graphical function for generating regular quadrilaterals geometryFunction = ol.interaction.Draw.createRegularPolygon(4); break; case'Box': type ='Circle'; //Graphic function to generate box shape geometryFunction = ol.interaction.Draw.createBox(); break; default:break; } //Initialize Draw drawing control draw = new ol.interaction.Draw({ source: vectorSource, type: type, geometryFunction: geometryFunction }); //Add the Draw drawing control to the Map object map.addInteraction(draw); } } typeSelect.addEventListener('change', () => { //Remove Draw drawing control map.removeInteraction(draw); addInteraction(); }); addInteraction(); </script> </body> </html>

    This example shows three parameters set when initializing the ol.interaction.Draw object:

  • source-the drawn geometry will be stored in this map source
  • type —— The type of geometric figure to be drawn, which can be set as:
  • geometryFunction —— This parameter allows you to freely set the shape of the geometric figure to be drawn. For example, in this example, the two functions createBox() and createRegularPolygon() are used to generate a specific graphic function instead of drawing a circle, but use these two A function must set the type parameter to'Circle'

 In addition, you can also hold down the Shift key of the keyboard to trigger the free hand mode. The Draw class implements this function.

Reference :