En el siguiente código, agrego una función para dibujar un polígono en un mapa web basado en Open Layer.
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> <style> #mapa { height: 100%; width: 100%; } </style> <title>Ejercicio 3</title> </head> <body> <div id="mapa"></div> <script type="text/javascript"> var vista = new ol.View({ center: [0, 5000000], zoom: 5 }); var fuenteOrtofoto = new ol.source.TileArcGISRest({ url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", params: { "LAYERS": "World Imagery" }, attributions: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community" }); var capaOrtofoto = new ol.layer.Tile({ source: fuenteOrtofoto }); var fuenteVectorial = new ol.source.Vector(); var capaVectorial = new ol.layer.Vector({ source: fuenteVectorial }); var mapa = new ol.Map({ target: "mapa", layers: [capaOrtofoto], view: vista, }); var dibujar = new ol.interaction.Draw({ source: fuenteVectorial, type: "Polygon" }); mapa.addInteraction(dibujar); </script> </body> </html>Pero, ¿cómo agrego un botón para activar y desactivar esta función haciendo clic? Sé que tienes que crear un botón con CreateElement, créalo y luego ocupa "addEventListener". Pero, ¿cómo le digo que active o desactive la función de dibujar en el mapa?