vue+openlayers 测量

引入

import Draw from 'ol/interaction/Draw'
import VectorLayer from 'ol/layer/Vector';
import VectorSoure from 'ol/Soure/Vector';
import { unByKey } from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {getLength} from 'ol/sphere';
import {getArea} from 'ol/sphere';
import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import { Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';

参数

data(){
	return {
		draw: null, //定义画图
	    measureSource: new VectorSource(), //定义测距图层源
	    sketch: null, //测量画图之前的要素
	    helpTooltipElement: null, //点击测距之后出现在鼠标附近的overlay内容
	    helpTooltip: null, //点击测距测面之后出现在鼠标附近的overlay
	    measureTooltipElement: null,
	    measureTooltip: null,
	    helpMsg: "点击地图开始绘制",
	    continueLineMsg: "点击地图继续绘制",
	    continuePolygonMsg: "点击地图继续绘制",
	}
}

测距

LineMeasure() {
   this.measureSource.clear();
   this.measureType = "LineString";
   if (document.getElementById("tooltip") != null) {
       var obj = document.getElementById("tooltip")
       obj.parentNode.remove();
   }
   let _this = this;
   this.map.on("pointermove", function (evt) {
       if (evt.dragging) {
           return;
       }
       if (_this.sketch) {
           var geom = _this.sketch.getGeometry();
           if (geom instanceof LineString) {
               _this.helpMsg = _this.continueLineMsg;
           }
       }

       _this.helpTooltipElement.innerHTML =
           `<span style="color:white;font-size:18px;background-color:#D3D3D3;">${_this.helpMsg}</span>`;
       _this.helpTooltip.setPosition(evt.coordinate);
       _this.helpTooltipElement.classList.remove('hidden');
   });
   let vectorMeasure = new VectorLayer({
       source: this.measureSource,
       style: new Style({
           fill: new Fill({
               color: "rgba(255, 255, 255, 0.2)",
           }),
           stroke: new Stroke({
               color: "red",
               width: 2,
           }),
       }),
   });
   this.map.addLayer(vectorMeasure);
   this.map.removeInteraction(this.draw);
   this.addInteraction();
}

测面

pologonMeasure(){ //测面     
      this.measureSource.clear();
      this.measureType = "Polygon";
      let _this = this;
      this.map.on("pointermove", function(evt) {
        if (evt.dragging) {
          return;
        }
        if (_this.sketch) {
          var geom = _this.sketch.getGeometry();
          if (geom instanceof Polygon) {
            _this.helpMsg = _this.continuePolygonMsg;
          } else if (geom instanceof LineString) {
            _this.helpMsg = _this.continueLineMsg;
          }
        }
        _this.helpTooltipElement.innerHTML =`<span style="color:white;font-size:18px;background-color:#D3D3D3;">${_this.helpMsg}</span>` ;
        _this.helpTooltip.setPosition(evt.coordinate);
        _this.helpTooltipElement.classList.remove('hidden');
      });
      //
      let vectorMeasure = new VectorLayer({
        source: this.measureSource,
        style: new Style({
          fill: new Fill({
            color: "#FFFFFF4d",
          }),
          stroke: new Stroke({
            color: "red",
            width: 2,
          }),
        }),
      });
      this.map.addLayer(vectorMeasure);
      this.map.removeInteraction(this.draw);
      this.addInteraction();
    }

其他

addInteraction() {
      var type = this.measureType;
      this.draw = new Draw({
        source: this.measureSource,
        type: type,
        style: new Style({
          fill: new Fill({
            color: "#FFA5004d",
          }),
          stroke: new Stroke({
            color: "#FFA500",
            lineDash: [10, 10],
            width: 2,
          }),
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: "#FFA500",
            }),
            fill: new Fill({
              color: "#FFA500",
            }),
          }),
        }),
      });
      this.map.addInteraction(this.draw);
      this.createMeasureTooltip();
      this.createHelpTooltip();

      var listener;
      let _this = this;
      this.draw.on( "drawstart", function (evt) {
          _this.sketch = evt.feature;
          var tooltipCoord = evt.coordinate;
          listener = _this.sketch.getGeometry().on("change", function (evt) {
            var geom = evt.target;
            var output;
            if (geom instanceof Polygon) {
              output = _this.formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = _this.formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            _this.measureTooltipElement.innerHTML = `<span style="color:white;font-size:20px;background-color:#0b9170;">${output}</span>`;
            _this.measureTooltip.setPosition(tooltipCoord);
          });
        });
      this.draw.on( "drawend", function () {
          _this.measureTooltipElement.className = "tooltip tooltip-static";
          _this.measureTooltipElement.id = "tooltip";
          _this.measureTooltip.setOffset([0, -7]);
          // unset sketch
          _this.sketch = null;
          // unset tooltip so that a new one can be created
          _this.measureTooltipElement = null;
          _this.createMeasureTooltip();
          unByKey(listener);
          _this.map.un("pointermove", function(evt) {
            if (evt.dragging) {
              return;
            }
            if (_this.sketch) {
              var geom = this.sketch.getGeometry();
              if (geom instanceof Polygon) {
                _this.helpMsg = this.continuePolygonMsg;
              } else if (geom instanceof LineString) {
                _this.helpMsg = this.continueLineMsg;
              }
            }

            _this.helpTooltipElement.innerHTML = _this.helpMsg;
            _this.helpTooltip.setPosition(evt.coordinate);

            _this.helpTooltipElement.classList.remove("hidden");
          });
          _this.map.removeInteraction(_this.draw);
          _this.map.removeOverlay(_this.helpTooltip);
          _this.helpTooltipElement.classList.add("hidden");
        });
    },

formatLength(line) {
      //获取投影坐标系
      var sourceProj = this.map.getView().getProjection();
      //ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
      var length = getLength(line, { projection: sourceProj });
      //var length = getLength(line);
      var output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + " " + "km";
      } else {
        output = Math.round(length * 100) / 100 + " " + "m";
      }
      return output;
    },

formatArea(polygon) {
      //获取投影坐标系
      var sourceProj = this.map.getView().getProjection();
      var area = getArea(polygon, {projection: sourceProj})
      //var area = getArea(polygon);
      //console.info(area)
      var 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;
    },

createMeasureTooltip() {
      if (this.measureTooltipElement) {
        this.measureTooltipElement.parentNode.removeChild(
          this.measureTooltipElement
        );
      }
      this.measureTooltipElement = document.createElement("div");
      this.measureTooltipElement.className = "tooltip tooltip-measure";
      this.measureTooltip = new Overlay({
        element: this.measureTooltipElement,
        offset: [0, -15],
        positioning: "bottom-center",
      });
      this.map.addOverlay(this.measureTooltip);
    },

createHelpTooltip() {
      if (this.helpTooltipElement) {
        this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
      }
      this.helpTooltipElement = document.createElement("div");
      this.helpTooltipElement.className = "tooltip hidden";
      this.helpTooltip = new Overlay({
        element: this.helpTooltipElement,
        offset: [15, 0],
        positioning: "center-left",
      });
      this.map.addOverlay(this.helpTooltip);
    },

效果图