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>

多了一个singleclick来用于显示距离测量时每个线段节点到起点的距离

绘制类型我写死为Polygon了 注意自己修改一下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/a1771744344/article/details/107310794