Daugiau

Gaukite ploto dydį naudodami „Dragbox“ sistemoje „Openlayers 3“

Gaukite ploto dydį naudodami „Dragbox“ sistemoje „Openlayers 3“


Turiu sugebėti parodyti ploto kvadratinius metrus naudodamas „dragbox“. Yra puikus pavyzdys naudojant piešimo daugiakampį, bet turiu apriboti vartotojus įprastu stačiakampiu.

Formulės ir TURĖTŲ būti vienodos arba vienodos. „Draw“ pakeičiau „DragBox“ ir „drawstart“, o „drawend“ - „boxstart“ ir „boxend“. Aš taip pat pakomentavau funkciją „formatLength“, nes man jos nereikia.

Norėčiau naudoti šį scenarijų, jei mokėčiau apriboti piešimo daugiakampį iki įprasto stačiakampio.


Taigi po savaitės bandymų ir klaidų aš tai supratau pats ... dar kartą.

$ (document) .ready (function () {var wgs84Sphere = new ol.Sphere (6378137); var interactions = 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 ()); jei (geom instanceof ol.geom.Polygon) {output = formatArea (/ ** @type {ol.geom.Polygon} * / (geom));} tooltipCoord = geom.getlnteriorPoint (). getCoordinates (); measureTooltipEiement.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 ({controls: ol.control.defaults (). išplėsti ([new ol.control.ScaleLine ( {vienetai: 'laipsniai'})]]), sluoksniai: sluoksniai, taikinys: 'žemėlapis', rodinys: naujas ol.View ({ projekcija: 'EPSG: 4326', centre: [0, 0], priartinimas: 2})}); // map.on ('pointermove', pointerMoveHandler); var drawBox; var aoiFeature = naujas ol.Feature (); var plotas; // AOI var aoiFeatureOverlay = new ol.FeatureOverlay (aoiFeature) naudokite ol.FeatureOverlay; 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); // „Drag Box“ sąveika, naudojama perduodant geometriją „aoiFeatureOverlay draw“ = nauja ol.interaction.DragBox ({condition: ol.events.condition.altKeyOn, įveskite: „Polygon“, style: new ol.style.Style ({ užpildyti: naujas ol.style.Fill ({spalva: 'rgba (255, 255, 255, 0.2)'}), brūkšnys: naujas ol.style.Stroke ({spalva: 'rgba (O, 0, 0, 0,5) ', lineDash: [10, 10], plotis: 2}), vaizdas: new ol.style.Circle ({spindulys: 5, insultas: new ol.style.Stroke ({spalva:' rgba (O, 0, 0) , 0 .7) '}), užpildykite: naujas ol.style.Fill ({spalva:' rgba (255, 255, 255, 0 .2) '})})})}); žemėlapis.addlnteraction (atkreipti); createMeasureTooltip (); draw.on ('boxstart', function () {map.on ('pointermove', pointerMoveHandler); map.removeOverlay (drawBox);}, šis); 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);}, šis); funkcija createMeasureTooltip () {if (MeasureTooltipEiement) {MeasTooltipEiement.parentNode.removeChild (MeasureTooltipEiement); }} measureTooltipEiement = document.createEiement ('div'); measureTooltipEiement.className = 'įrankio patarimo įrankio patarimas'; measureTooltip = new ol.Overlay ({elementas: measureTooltipEiement, ofsetas: [0, -15], padėties nustatymas: 'apačioje-centre'}); map.addOverlay (MeasTooltip); var formatArea = funkcija (daugiakampis) {var sourceProj = map.getView (). getProjection (); var geom = / ** @type {o l.geom.Polygon} * / (daugiakampis.klonas (). transformuoti (sourceProj, 'EPSG: 4326')); var koordinatės = geom.getlinearRing (O) .getCoordinates (); plotas = Math.abs (wgs84Sphere.geodesicArea (koordinatės)); var produkcija; jei (plotas> 10000) {išvestis = (matematinis apvalumas (plotas / 1000000 * 100) / 100) + "+ 'km2"; } else {output = (mat.apvalus (plotas * 100) / 100) + "+ 'm2"; } grąžinimo išvestis; }; });

Neseniai man reikėjo turėti panašų funkcionalumą. Žr. Šį „JSfiddle“. Matematikos dalį galite pakoreguoti pagal savo poreikius.

Smuikas