vue + Echart + Cesium 绘制剖面分析图

目录

一、实现效果图

二、核心代码

1.世界坐标转换为经纬度

2.计算两点空间距离

3.线段插值

4.绘制剖面分析线段

三、完整源码

---

一、实现效果图

二、核心代码

1.世界坐标转换为经纬度

    /**
     * @author: 
     * @Date: 2022-03-14 19:58:29
     * @note: 注意事项
     * @description: 世界坐标转换为经纬度
     * @param {*} cart
     */    
    getDegrees(cart) {
      let lat = window.Cesium.Math.toDegrees(cart.latitude);
      let lng = window.Cesium.Math.toDegrees(cart.longitude);
      let alt = cart.height;
      return {x:lng, y:lat, z:alt};
    }

2.计算两点空间距离

    /**
     * @author: 
     * @Date: 2022-03-14 19:57:18
     * @note: 注意事项
     * @description: 空间两点距离计算
     * @param {*} positions
     */    
    getSpaceDistance(positions) {
      profileItem = [
        {
          point: this.getDegrees(window.viewer.scene.globe.ellipsoid.cartesianToCartographic(positions[0])),
          distance: 0
        }
      ];
      var distance = 0;
      for (var i = 0; i < positions.length - 1; i++) {
        var point1cartographic = window.Cesium.Cartographic.fromCartesian(positions[i]);
        var point2cartographic = window.Cesium.Cartographic.fromCartesian(positions[i + 1]);
        /**根据经纬度计算出距离**/
        var geodesic = new window.Cesium.EllipsoidGeodesic();
        geodesic.setEndPoints(point1cartographic, point2cartographic);
        var s = geodesic.surfaceDistance;
        //返回两点之间的距离
        s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
        distance = distance + s;
        var m_Item = {
          point: this.getDegrees(window.viewer.scene.globe.ellipsoid.cartesianToCartographic(positions[i + 1])),
          distance: distance
        };
        profileItem.push(m_Item);
      }
      return distance.toFixed(2);
    },

3.线段插值

    /**
     * @author: 
     * @Date: 2022-03-14 19:57:29
     * @note: 注意事项
     * @description: 线段插值点
     * @param {*} positions
     */     
    interPoints(positions) {
      positionsCartographic = [];
      var terrainSamplePositions = [];
      for (let index = 0; index < positions.length - 1; index++) {
        const element = positions[index];
        var ellipsoid = window.viewer.scene.globe.ellipsoid;
        var cartographic = ellipsoid.cartesianToCartographic(element);
        positionsCartographic.push(cartographic);
      }
      for (let i = 0; i < positionsCartographic.length; i++) {
        const m_Cartographic0 = positionsCartographic[i];
        const m_Cartographic1 = positionsCartographic[i + 1];
        if (m_Cartographic1) {
          var a = Math.abs(m_Cartographic0.longitude - m_Cartographic1.longitude) * 10000000;
          var b = Math.abs(m_Cartographic0.latitude - m_Cartographic1.latitude) * 10000000;
          //等距采样
          if (a > b) b = a;
          var length = parseInt(b / 2);
          if (length > 1000) length = 1000;
          if (length < 2) length = 2;
          // var length = 4;//等分采样
          for (var j = 0; j < length; j++) {
            terrainSamplePositions.push(
              new window.Cesium.Cartographic(
                window.Cesium.Math.lerp(m_Cartographic0.longitude, m_Cartographic1.longitude, j / (length - 1)),
                window.Cesium.Math.lerp(m_Cartographic0.latitude, m_Cartographic1.latitude, j / (length - 1))
              )
            );
          }
          terrainSamplePositions.pop();
        } else {
          terrainSamplePositions.push(m_Cartographic0);
        }
      }
      positions_Inter = [];
      for (var n = 0; n < terrainSamplePositions.length; n++) {
        //地理坐标（弧度）转经纬度坐标
        var m_cartographic = terrainSamplePositions[n];
        var height = window.viewer.scene.globe.getHeight(m_cartographic);
        var point = window.Cesium.Cartesian3.fromDegrees(m_cartographic.longitude / Math.PI * 180, m_cartographic.latitude / Math.PI * 180, height);
        positions_Inter.push(point);
      }
    },

4.绘制剖面分析线段

    /**
     * @author: 
     * @Date: 2022-03-14 18:58:12
     * @note: 注意事项
     * @description: 剖面分析
     */
    profileAnalysis() {
      window.viewer.scene.globe.depthTestAgainstTerrain = true
      pmfxHandler = new window.Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
      var positions = [];
      var distance = 0;
      var cartesian = null;
      var DistanceArray = [];

      this.clearFloatingPointList()
  
      pmfxHandler.setInputAction(function (movement) {
        cartesian = window.viewer.scene.pickPosition(movement.endPosition);
        if (positions.length >= 2) {
          if (!window.Cesium.defined(poly)) {
            poly = new PolyLinePrimitive(positions);
          } else {
            positions.pop();
            positions.push(cartesian);
          }
        }
      }, window.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  
      pmfxHandler.setInputAction((movement) => {
        cartesian = window.window.viewer.scene.pickPosition(movement.position);
        if (positions.length == 0) {
          positions.push(cartesian.clone());
        }
        positions.push(cartesian);
        if (poly) {
          //进行插值计算
          this.interPoints(poly.positions);
          distance = this.getSpaceDistance(positions_Inter);
        } else {
          distance = this.getSpaceDistance(positions);
        }
        var textDisance = distance + "米";
        DistanceArray.push(distance);
        floatingPoint = window.viewer.entities.add({
          position: positions[positions.length - 1],
          point: {
            pixelSize: 5,
            color: window.Cesium.Color.RED,
            outlineColor: window.Cesium.Color.WHITE,
            outlineWidth: 2,
            heightReference: window.Cesium.HeightReference.NONE
          },
          label: {
            text: textDisance === '0.00米' ? '' : textDisance,
            font: '18px sans-serif',
            fillColor: window.Cesium.Color.GOLD,
            style: window.Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new window.Cesium.Cartesian2(20, -20),
            heightReference: window.Cesium.HeightReference.NONE
          }
        });
        floatingPointList.push(floatingPoint)
      }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
  
      pmfxHandler.setInputAction((movement) =>{
        pmfxHandler.destroy();//关闭事件句柄
        positions.pop();//最后一个点无效
        window.viewer.scene.globe.depthTestAgainstTerrain = false
        
        this.$set(this.params, 'isShow', true)
        this.createProfileChart(profileItem);
        
      }, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  
      var PolyLinePrimitive = (function () {
        function _(positions) {
            this.options = {
              id: 'pmfx_line',
              polyline: {
                show: true,
                positions: [],
                material: window.Cesium.Color.CHARTREUSE,
                width: 2,
                clampToGround: true
              }
            };
            this.positions = positions;
            this._init();
          }
          _.prototype._init = function () {
              var _self = this;
              var _update = function () {
                  return _self.positions;
              };
              //实时更新polyline.positions
              this.options.polyline.positions = new window.Cesium.CallbackProperty(_update, false);
              window.viewer.entities.add(this.options);
          };
          return _;
      })();
    },

三、完整源码

源码下载：vue + Echart + Cesium 绘制剖面分析图源码