cesium空间测量功能

根据用户鼠标绘制线，通过勾股定理功能，分段求出距离，最后求出和

// DrawPolyline
/*
绘制线(距离测量)
 */
class measureLine {
  constructor(arg) {
    //设置唯一id 备用
    this.objId = Number(
      new Date().getTime() + "" + Number(Math.random() * 1000).toFixed(0)
    );
    this.viewer = arg.viewer;
    this.Cesium = arg.Cesium;
    this.callback = arg.callback;
    this._polyline = null; //活动线
    this._polylineLast = null; //最后一条线
    this._positions = []; //活动点
    this._entities_point = []; //脏数据
    this._entities_line = []; //脏数据
    this._polylineData = null; //用于构造线数据
  }

  //返回最后活动线
  get line() {
    return this._polylineLast;
  }

  //返回线数据用于加载线
  getData() {
    return this._polylineData;
  }

  //加载线
  loadPolyline(data) {
    var $this = this;
    var polyline = this.viewer.entities.add({
      polyline: {
        positions: data,
        show: true,
        material: $this.Cesium.Color.RED,
        width: 3,
        clampToGround: true
      }
    });
    polyline.objId = this.objId;
    return polyline;
  }

  //开始创建
  startCreate() {
    var $this = this;
    $this.clear();
    this.handler = new this.Cesium.ScreenSpaceEventHandler(
      this.viewer.scene.canvas
    );

    this.handler.setInputAction(function(evt) {
      //单机开始绘制
      //屏幕坐标转地形上坐标
      var cartesian = $this.getCatesian3FromPX(evt.position);
      if ($this._positions.length == 0) {
        $this._positions.push(cartesian.clone());
      }
      if (cartesian) $this._positions.push(cartesian);
      var text = "起点";
      if ($this._polyline) {
        text = $this.getSpaceDistance($this._positions);
      }
      $this.createPoint(cartesian, text); // 绘制点
    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
    this.handler.setInputAction(function(evt) {
      //移动时绘制线
      if ($this._positions.length < 1) return;
      var cartesian = $this.getCatesian3FromPX(evt.endPosition);

      if (cartesian) {
        if (!$this.Cesium.defined($this._polyline)) {
          $this._polyline = $this.createPolyline();
        }
        if ($this._polyline) {
          $this._positions.pop();
          $this._positions.push(cartesian);
        }
      }
    }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    this.handler.setInputAction(function(evt) {
      if (!$this._polyline) return;
      var cartesian = $this.getCatesian3FromPX(evt.position);
      if (cartesian) {
        $this._positions.pop();
        $this._positions.push(cartesian);
        var text = $this.getSpaceDistance($this._positions);
        $this.createPoint(cartesian, text);
        $this.destroy();
        if (typeof $this.callback == "function") {
          $this.callback(cartesian);
        }
      }
      // 绘制点
      // $this._polylineData = $this._positions.concat();
      // $this.viewer.entities.remove($this._polyline); //移除
      // $this._polyline = null;
      // $this._positions = [];
      // var line = $this.loadPolyline($this._polylineData); //加载线
      // $this._entities_line.push(line);
      // $this._polylineLast = line;
    }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    this.handler.setInputAction(function(evt) {
      if (!$this._polyline) return;
      var cartesian = $this.getCatesian3FromPX(evt.position);
      if (cartesian) {
        $this._positions.pop();
        $this._positions.push(cartesian);
        var text = $this.getSpaceDistance($this._positions);
        $this.createPoint(cartesian, text);
        $this.destroy();
      }
      // 绘制点
      // $this._polylineData = $this._positions.concat();
      // $this.viewer.entities.remove($this._polyline); //移除
      // $this._polyline = null;
      // $this._positions = [];
      // var line = $this.loadPolyline($this._polylineData); //加载线
      // $this._entities_line.push(line);
      // $this._polylineLast = line;
    }, $this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  }

  //创建点
  createPoint(cartesian, text) {
    var $this = this;
    var point = this.viewer.entities.add({
      position: cartesian,
      point: {
        pixelSize: 10,
        color: $this.Cesium.Color.YELLOW,
        disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
        classificationType: Cesium.ClassificationType.BOTTOM
      },
      label: {
        text: text,
        font: "18px sans-serif",
        style: $this.Cesium.LabelStyle.FILL,
        outlineWidth: 1,
        fillColor: $this.Cesium.Color.WHITE,
        showBackground: false,
        disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
        classificationType: Cesium.ClassificationType.BOTTOM,
        backgroundColor: $this.Cesium.Color.ORANGE.withAlpha(0.6),
        pixelOffset: new $this.Cesium.Cartesian2(5.0, -20.0)
      }
    });
    point.objId = this.objId;
    $this._entities_point.push(point);
    return point;
  }

  //创建线
  createPolyline() {
    var $this = this;
    var polyline = this.viewer.entities.add({
      polyline: {
        //使用cesium的peoperty
        positions: new $this.Cesium.CallbackProperty(function() {
          return $this._positions;
        }, false),
        show: true,
        material: $this.Cesium.Color.RED,
        width: 3,
        clampToGround: false
      }
    });
    polyline.objId = this.objId;
    $this._entities_line.push(polyline);
    return polyline;
  }

  //销毁
  destroy() {
    if (this.handler) {
      this.handler.destroy();
      this.handler = null;
    }
  }

  //清空实体对象
  clear() {
    for (var i = 0; i < this._entities_point.length; i++) {
      this.viewer.entities.remove(this._entities_point[i]);
    }
    for (var i = 0; i < this._entities_line.length; i++) {
      this.viewer.entities.remove(this._entities_line[i]);
    }
    this._polyline = null;
    this._positions = [];
    this._entities_point = []; //脏数据
    this._entities_line = []; //脏数据
    this._polylineData = null; //用于构造线数据
    this._polylineLast = null;
  }

  getCatesian3FromPX(px) {
    var cartesian;
    //获取模型的
    cartesian = this.viewer.scene.pickPosition(px);
    return cartesian;
  }
  //空间两点距离计算函数
  getSpaceDistance(positions) {
    var distance = 0;
    var $this = this;
    for (var i = 0; i < positions.length - 1; i++) {
      if (positions[i] && positions[i + 1]) {
        var point1cartographic = $this.Cesium.Cartographic.fromCartesian(
          positions[i]
        );
        var point2cartographic = $this.Cesium.Cartographic.fromCartesian(
          positions[i + 1]
        );
        /**根据经纬度计算出距离**/
        var geodesic = new $this.Cesium.EllipsoidGeodesic();
        geodesic.setEndPoints(point1cartographic, point2cartographic);
        var s = geodesic.surfaceDistance;
        //console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
        //返回两点之间的距离
        s = Math.sqrt(
          Math.pow(s, 2) +
            Math.pow(point2cartographic.height - point1cartographic.height, 2)
        );
        distance = distance + s;
      }
    }
    return distance.toFixed(2) > 1000
      ? (distance / 1000).toFixed(2) + "公里"
      : distance.toFixed(2) + "米";
  }
}

export default measureLine;

下面是使用方式

import measuredistan from "@/assets/js/measureLine.js";
let measuredistances = new measuredistan({
        viewer: window.viewer,
        Cesium: Cesium
      });
      measuredistances.startCreate();