Más

Obtener el tamaño del área usando Dragbox en Openlayers 3


Necesito poder mostrar los metros cuadrados de un área usando dragbox. Hay un gran ejemplo usando dibujar polígono, pero necesito limitar a los usuarios a un rectángulo regular.

Las fórmulas y DEBERÍAN ser iguales o similares. Reemplacé "Draw" con "DragBox" y "drawstart" y "drawend" con "boxstart" y "boxend". También comenté la función "formatLength", ya que no la necesito.

Usaría este script si supiera cómo limitar el dibujo de un polígono a un rectángulo regular.


Así que después de una semana de prueba y error, lo descubrí por mí mismo ... de nuevo.

$ (documento) .ready (function () {var wgs84Sphere = new ol.Sphere (6378137); var interacciones = ol.interaction.defaults ({altShiftDragRotate: false, pinchRotate: false}); var MeasureTooltipEiement; var draw; var MeasureTooltip ; var pointerMoveHandler = function (evt) {if (evt instanceof ol.interaction.DragBox) {return;} var tooltipCoord = evt.coordinate; if (draw) {var output; var geom = (draw.getGeometry ()); if (instancia geom de ol.geom.Polygon) {output = formatArea (/ ** @type {ol.geom.Polygon} * / (geom));} tooltipCoord = geom.getlnteriorPoint (). getCoordinates (); meterTooltipEiement.innerHTML = output; MeasureTooltip.setPosition (tooltipCoord);}}; var layer = [new ol.layer.Tile ({source: new ol.source.TileWMS ({url: 'http://demo.boundlessgeo.com/geoserver/wms ', params: {' LAYERS ':' ne: NE1_HR_LC_SR_W_DR '}})})]; var map = new ol.Map ({controles: ol.control.defaults (). extend ([new ol.control.ScaleLine ( {unidades: 'grados'})]), capas: capas, destino: 'mapa', vista: nuevo ol.View ({ proyección: 'EPSG: 4326', centro: [0, 0], zoom: 2})}); // map.on ('pointermove', pointerMoveHandler); var drawBox; var aoiFeature = new ol.Feature (); var area; // Use un ol.FeatureOverlay para almacenar el AOI var aoiFeatureOverlay = new ol.FeatureOverlay (aoiFeature); var aoiStyle = new ol.style.Style ({stroke: new ol.style.Stroke ({color: 'cyan', width: 5}), fill: new ol.style.Fill ({color: 'rgba (O, 255, 255, 0,3) '})}); aoiFeatureOverlay.setStyle (aoiStyle); // Una interacción de Drag Box utilizada para pasar la geometría a aoiFeatureOverlay draw = new ol.interaction.DragBox ({condition: ol.events.condition.altKeyOnly, type: 'Polygon', style: new ol.style.Style ({ fill: new ol.style.Fill ({color: 'rgba (255, 255, 255, 0.2)'}), trazo: nuevo ol.style.Stroke ({color: 'rgba (O, 0, 0, 0.5) ', lineDash: [10, 10], ancho: 2}), imagen: nuevo ol.style.Circle ({radio: 5, trazo: nuevo ol.style.Stroke ({color:' rgba (O, 0, 0 , 0 .7) '}), fill: new ol.style.Fill ({color:' rgba (255, 255, 255, 0 .2) '})})})}); map.addlnteraction (dibujar); createMeasureTooltip (); draw.on ('boxstart', function () {map.on ('pointermove', pointerMoveHandler); map.removeOverlay (drawBox);}, esto); draw.on ('boxend', function (evt) {$ ('. tooltip-static'). remove (); if (aoiFeatureOverlay.getFeatures (). getArray (). length> = 1) {aoiFeatureOverlay.removeFeature (aoiFeature );} var geomBox = evt.target.getGeometry (); geom = draw.getGeometry (); var featureS = new ol.Feature ({geometry: geomBox}); drawBox = new ol.FeatureOverlay ({map: map, features : [featureS]}); map.addOverlay (drawBox);}, esto); function createMeasureTooltip () {if (medirTooltipEiement) {medirTooltipEiement.parentNode.removeChild (medirTooltipEiement); }} medidaTooltipEiement = document.createEiement ('div'); medirTooltipEiement.className = 'información sobre herramientas información sobre herramientas-medir'; MeasureTooltip = new ol.Overlay ({elemento: MeasureTooltipEiement, offset: [0, -15], posicionamiento: 'bottom-center'}); map.addOverlay (indicador de herramienta de medida); var formatArea = función (polígono) {var sourceProj = map.getView (). getProjection (); var geom = / ** @type {o l.geom.Polygon} * / (polygon.clone (). transform (sourceProj, 'EPSG: 4326')); var coordenadas = geom.getlinearRing (O) .getCoordinates (); área = Math.abs (wgs84Sphere.geodesicArea (coordenadas)); var salida; if (área> 10000) {salida = (Math.round (área / 1000000 * 100) / 100) + "+ 'km2'; } else {salida = (Math.round (área * 100) / 100) + "+ 'm2'; } retorno de salida; }; });

Recientemente necesitaba tener una funcionalidad similar. Vea el siguiente JSfiddle. Puede ajustar la parte de matemáticas según sus necesidades.

Violín


Ver el vídeo: OpenLayer (Septiembre 2021).