Openlayers实现距离面积测量

本文实例为大家分享了Openlayers实现距离面积测量的具体代码，供大家参考，具体内容如下

CSS

				?

									.ol-tooltip {

									 position: relative;

									 background: rgba(0, 0, 0, 0.5);

									 border-radius: 4px;

									 color: white;

									 padding: 4px 8px;

									 opacity: 0.7;

									 white-space: nowrap;

									 font-size: 12px;

									 }

									 .ol-tooltip-measure {

									 opacity: 1;

									 font-weight: bold;

									 }

									 .ol-tooltip-static {

									 background-color: #ffcc33;

									 color: black;

									 border: 1px solid white;

									 }

									 .ol-tooltip-measure:before,

									 .ol-tooltip-static:before {

									 border-top: 6px solid rgba(0, 0, 0, 0.5);

									 border-right: 6px solid transparent;

									 border-left: 6px solid transparent;

									 content: "";

									 position: absolute;

									 bottom: -6px;

									 margin-left: -7px;

									 left: 50%;

									 }

									 .ol-tooltip-static:before {

									 border-top-color: #ffcc33;

									}

具体实现

				?

									let layer_1 =new ol.layer.Tile({

									  source: new ol.source.OSM()

									 });

									 let source = new ol.source.Vector();

									 let vector = new ol.layer.Vector({

									 source: source,

									 style: new ol.style.Style({

									  fill: new ol.style.Fill({

									  color: 'rgba(255, 255, 255, 0.2)'

									  }),

									  stroke: new ol.style.Stroke({

									  color: '#ffcc33',

									  width: 2

									  }),

									  image: new ol.style.Circle({

									  radius: 7,

									  fill: new ol.style.Fill({

									   color: '#ffcc33'

									  })

									  })

									 })

									 });

									 let map=new ol.Map({

									 layers: [

									  layer_1 ,vector

									 ],

									 view: new ol.View({

									  center: [-11000000, 4600000],

									  zoom: 5,

									 }),

									 target: 'map'

									 });

									 let count=0;

									 let draw;

									 let sketch=new ol.Feature();

									 let listener;

									 let helpTooltipElement;

									 let helpTooltip;

									 let measureTooltipElement;

									 let measureTooltip;

									 let continuePolygonMsg="继续点击绘制多边形";

									 let continueLineMsg="继续点击绘制线";

									 createMeasureTooltip();

									 createHelpTooltip();

									 let pointerMoveHandler=function(evt){

									 if (evt.dragging) {

									  return;

									 }

									 /** @type {string} */

									 let helpMsg = 'Click to start drawing';

									 if (sketch) {

									  let geom = (sketch.getGeometry());

									  if (geom instanceof ol.geom.Polygon) {

									  helpMsg = continuePolygonMsg;

									  } else if (geom instanceof ol.geom.LineString) {

									  helpMsg = continueLineMsg;

									  }

									 }

									 helpTooltipElement.classList.remove('hidden');

									 };

									 map.on('pointermove', pointerMoveHandler);

									 map.getViewport().addEventListener('mouseout', function() {

									 });

									 let formatLength=function (line) {

									 let length = ol.sphere.getLength(line);

									 let output;

									 if(length>100){

									  output=(Math.round(length/1000*100)/100)+''+'km'

									 }else{

									  output=(Math.round(length*100)/100)+''+'m'

									 }

									 return output;

									 };

									 let formatArea=function (polygon) {

									 let area = ol.sphere.getArea(polygon);

									 let output;

									 if(area>10000){

									  output=(Math.round(area/1000000*100)/100)+''+'km<sup>2</sup>'

									 }else{

									  output=(Math.round(area*100)/100)+''+'m<sup>2</sup>'

									 }

									 return output;

									 };

									 function addInteraction(){

									 let type="Polygon";

									 draw=new ol.interaction.Draw({

									  source:source,

									  type:type,

									  style: new ol.style.Style({

									  fill: new ol.style.Fill({

									   color: 'rgba(255, 255, 255, 0.2)'

									  }),

									  stroke: new ol.style.Stroke({

									   color: 'rgba(0, 0, 0, 0.5)',

									   lineDash: [10, 10],

									   width: 2

									  }),

									  image: new ol.style.Circle({

									   radius: 5,

									   stroke: new ol.style.Stroke({

									   color: 'rgba(0, 0, 0, 0.7)'

									   }),

									   fill: new ol.style.Fill({

									   color: 'rgba(255, 255, 255, 0.2)'

									   })

									  })

									  }),

									  snapTolerance:50

									 });

									 map.addInteraction(draw);

									 map.on('singleclick',function (evt) {

									  measureTooltip.setPosition(evt.coordinate);

									  if(count==0){

									  measureTooltipElement.innerHTML='起点'

									  }else{

									  measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';

									  measureTooltip.setOffset([0, -20]);

									  // unset sketch

									  sketch = null;

									  // unset tooltip so that a new one can be created

									  measureTooltipElement = null;

									  createMeasureTooltip();

									  //map.removeInteraction(draw);

									  }

									  createMeasureTooltip();

									  //点击次数增加

									  count++;

									 });

									 draw.on('drawstart',function (evt) {

									  sketch=evt.feature;

									  let tooltipCoord=evt.coordinate;

									  listener=sketch.getGeometry().on('change',function (evt) {

									  let geom=evt.target;

									  let output;

									  if(geom instanceof ol.geom.Polygon){

									   map.removeEventListener('singleclick');

									   output=formatArea(geom);

									   tooltipCoord=geom.getInteriorPoint().getCoordinates();

									  }else if(geom instanceof ol.geom.LineString){

									   output=formatLength(geom);

									   tooltipCoord=geom.getLastCoordinate();

									  }

									  measureTooltipElement.innerHTML = output;

									  measureTooltip.setPosition(tooltipCoord);

									  })

									 });

									 draw.on('drawend',

									  function() {

									  measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';

									  measureTooltip.setOffset([0, -7]);

									  // unset sketch

									  sketch = null;

									  // unset tooltip so that a new one can be created

									  measureTooltipElement = null;

									  createMeasureTooltip();

									  map.removeInteraction('singleclick');

									  count=0;

									  ol.Observable.unByKey(listener);

									  });

									 }

									 function createHelpTooltip() {

									 if (helpTooltipElement) {

									  helpTooltipElement.parentNode.removeChild(helpTooltipElement);

									 }

									 helpTooltipElement = document.createElement('div');

									 helpTooltipElement.className = 'ol-tooltip hidden';

									 helpTooltip = new ol.Overlay({

									  element: helpTooltipElement,

									  offset: [15, 0],

									  positioning: 'center-left'

									 });

									 map.addOverlay(helpTooltip);

									 }

									 /**

									 * Creates a new measure tooltip

									 */

									 function createMeasureTooltip() {

									 if (measureTooltipElement) {

									  measureTooltipElement.parentNode.removeChild(measureTooltipElement);

									 }

									 measureTooltipElement = document.createElement('div');

									 measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';

									 measureTooltip = new ol.Overlay({

									  element: measureTooltipElement,

									  offset: [-30, -30],

									  positioning: 'center-center'

									 });

									 map.addOverlay(measureTooltip);

									 }

									 /**

									  * Let user change the geometry type.

									  */

									 addInteraction();

参考官网教程

在线引用地址

				?

									<link rel="stylesheeth" ref="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">

									<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>