0
689
Viewscapas abiertas, dibujo de nubes, polígono con trazo personalizado
Estoy trabajando con openlayers 6 y necesito dibujar nubes en los mapas, un polígono con un trazo de medio círculo o una línea, no importa el tipo siempre que pueda modificarlo (agregar y quitar puntos, estirarlo, reducirlo) . Mi conocimiento de Openlayers es muy limitado, por lo que pido orientación, ¿cómo puedo hacer eso?
·
Juan Pablo Isaza
1 answers
Answer question0
Puede usar un estilo personalizado que cambie la geometría mostrada, similar a https://openlayers.org/en/latest/examples/polygon-styles.html pero reemplazando los segmentos del anillo del polígono con arcos semicirculares.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css"> <style> html, body, .map { margin: 0; padding: 0; width: 100%; height: 100%; } </style> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var source = new ol.source.Vector({wrapX: false}); var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }), geometry: function (feature) { var geometry = feature.getGeometry(); if (geometry.getType() === 'Polygon') { var coordinates = geometry.getCoordinates(true)[0]; var arcs = []; for (let i = 0, len = coordinates.length - 1; i < len; ++i) { var center = [ (coordinates[i + 1][0] + coordinates[i][0]) / 2, (coordinates[i + 1][1] + coordinates[i][1]) / 2 ]; var dx = coordinates[i + 1][0] - coordinates[i][0]; var dy = coordinates[i + 1][1] - coordinates[i][1]; var radius = Math.sqrt(dx * dx + dy * dy) / 2; var angle = Math.atan2(-dy, -dx); var sides = 32; arcs = arcs.concat( ol.geom.Polygon.fromCircle( new ol.geom.Circle(center, radius), sides, angle ).getCoordinates(true)[0].slice(0, sides / 2) ); } return new ol.geom.Polygon([arcs.concat([arcs[0]])]); } else { return geometry; } } }); var vector = new ol.layer.Vector({ source: source, style: style }); var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [-11000000, 4600000], zoom: 4 }) }); var modify = new ol.interaction.Modify({source: source}); map.addInteraction(modify); var draw = new ol.interaction.Draw({ source: source, type: 'Polygon', style: style }); map.addInteraction(draw); var snap = new ol.interaction.Snap({source: source}); map.addInteraction(snap); </script> </body> </html>
·
Juan Pablo Isaza
Report
Answer question