vue2+cesium实现长度计算

BalanceUse() {

      const viewer = QJViewer;

      const _this = this;

      var positions = [];

      var tempPositions = [];

      // 测量功能激活

      var isMeasure = true;

      var lineEntity = undefined;

      _this.$message({

        message: "开始计算空间距离，右键结束计算",

        type: "success",

        customClass: "message",

      });

      unRegisterEvents();

      //创建线对象

      function createLineEntity() {

        lineEntity = viewer.entities.add({

          polyline: {

            positions: new Cesium.CallbackProperty((event) => {

              return tempPositions;

            }, false),

            width: 2,

            material: Cesium.Color.YELLOW,

            depthFailMaterial: Cesium.Color.YELLOW,

          },

        });

        _this.vertexEntities.push(lineEntity);

      }

      // 创建起点

      function createStartEntity() {

        let vertexEntity = viewer.entities.add({

          position: positions[0],

          type: "MeasureDistanceVertex",

          point: {

            color: Cesium.Color.FUCHSIA,

            pixelSize: 6,

          },

        });

        _this.vertexEntities.push(vertexEntity);

      }

      // 计算距离

      function spaceDistance(positions) {

        let totalDistance = 0;

        for (let i = 0; i < positions.length - 1; i++) {

          const start = positions[i];

          const end = positions[i + 1];

          const distance = Cesium.Cartesian3.distance(start, end);

          totalDistance += distance;

        }

        return totalDistance.toFixed(2); // 返回保留两位小数的距离

      }

      //创建线节点

      function createVertex() {

        let vertexEntity = viewer.entities.add({

          position: positions[positions.length - 1],

          id: "MeasureDistanceVertex" + positions[positions.length - 1],

          type: "MeasureDistanceVertex",

          label: {

            text: spaceDistance(positions) + "米",

            scale: 0.5,

            font: "normal 24px MicroSoft YaHei",

            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000), //设置可见距离 10000米可见

            scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 1), //设置随图缩放距离和比例

            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

            style: Cesium.LabelStyle.FILL_AND_OUTLINE,

            pixelOffset: new Cesium.Cartesian2(0, -30),

            outlineWidth: 9,

            outlineColor: Cesium.Color.WHITE,

          },

          point: {

            color: Cesium.Color.FUCHSIA,

            pixelSize: 8,

            disableDepthTestDistance: 500,

          },

        });

        _this.vertexEntities.push(vertexEntity);

      }

      //创建终点节点

      function createEndEntity() {

        //结束时删除最后一个节点的距离标识

        let lastLabel = viewer.entities.getById(

          "MeasureDistanceVertex" + positions[positions.length - 1]

        );

        viewer.entities.remove(lastLabel);

        // viewer.entities.remove(moveVertexEntity);

        let vertexEntity = viewer.entities.add({

          position: positions[positions.length - 1],

          type: "MeasureDistanceVertex",

          label: {

            text: "总长度：" + spaceDistance(positions) + "米",

            scale: 0.5,

            font: "normal 26px MicroSoft YaHei",

            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),

            scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 1),

            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

            style: Cesium.LabelStyle.FILL_AND_OUTLINE,

            pixelOffset: new Cesium.Cartesian2(0, -50),

            // eyeOffset: new Cesium.Cartesian3(0, 0, -10)

            outlineWidth: 9,

            outlineColor: Cesium.Color.WHITE,

          },

          point: {

            color: Cesium.Color.FUCHSIA,

            pixelSize: 6,

          },

        });

        _this.vertexEntities.push(vertexEntity);

      }

      //禁用

      function deactivate() {

        if (!isMeasure) return;

        unRegisterEvents();

        viewer._element.style.cursor = "pointer";

        viewer.enableCursorStyle = true;

        isMeasure = false;

        tempPositions = [];

        positions = [];

      }

      // 解除鼠标事件

      function unRegisterEvents() {

        viewer.screenSpaceEventHandler.removeInputAction(

          Cesium.ScreenSpaceEventType.LEFT_CLICK

        );

        viewer.screenSpaceEventHandler.removeInputAction(

          Cesium.ScreenSpaceEventType.RIGHT_CLICK

        );

        viewer.screenSpaceEventHandler.removeInputAction(

          Cesium.ScreenSpaceEventType.MOUSE_MOVE

        );

      }

      // 清除

      function clear() {

        //清除线对象

        viewer.entities.remove(lineEntity);

        lineEntity = undefined;

        //清除节点

        _this.vertexEntities.forEach((item) => {

          viewer.entities.remove(item);

        });

        _this.vertexEntities = [];

      }

      //单击鼠标左键画点点击事件

      viewer.screenSpaceEventHandler.setInputAction(function (event) {

        viewer._element.style.cursor = "crosshair";

        // 获取鼠标点击位置的屏幕坐标

        var ray = viewer.camera.getPickRay(event.position);

        if (!ray) return null;

        var earthPosition = viewer.scene.globe.pick(ray, viewer.scene);

        if (Cesium.defined(earthPosition)) {

          const ellipsoid = viewer.scene.globe.ellipsoid;

          earthPosition = viewer.scene.camera.pickEllipsoid(

            event.position,

            ellipsoid

          );

          // console.log("earthPosition", earthPosition); // 世界坐标

        }

        if (!earthPosition) return;

        positions.push(earthPosition);

        if (positions.length == 1) {

          //首次点击

          createLineEntity();

          createStartEntity();

          return;

        }

        createVertex();

      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      //鼠标移动事件

      viewer.screenSpaceEventHandler.setInputAction(function (event) {

        viewer._element.style.cursor = "crosshair";

        if (!isMeasure) return;

        // 获取鼠标点击位置的屏幕坐标

        var ray = viewer.camera.getPickRay(event.endPosition);

        if (!ray) return null;

        var earthPosition = viewer.scene.globe.pick(ray, viewer.scene);

        if (earthPosition) {

          earthPosition = viewer.scene.camera.pickEllipsoid(

            event.startPosition,

            viewer.scene.globe.ellipsoid

          );

        }

        if (!earthPosition) return;

        if (earthPosition.length < 1) return;

        tempPositions = positions.concat(earthPosition);

      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      //鼠标右键事件

      viewer.screenSpaceEventHandler.setInputAction(function (event) {

        viewer._element.style.cursor = "default";

        if (!isMeasure || positions.length < 1) {

          deactivate();

          clear();

        } else {

          createEndEntity();

          lineEntity.polyline = {

            positions: positions,

            width: 2,

            material: Cesium.Color.YELLOW,

            depthFailMaterial: Cesium.Color.YELLOW,

          };

          deactivate();

        }

      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    },