cesium借助折线的两个端点绘制一个矩形--vue2.0版本 --按照经纬线横纵排列

1. 使用流程演示

2.vue页面源码

// 绘制矩形   对角线方式  
    drawRectangle11() {
      this.$message({
        type: "success",
        message: "鼠标左键单击开始绘制，右键结束",
      });
      // 绘制的时候清除上一个矩形数据
      this.cleanRectangle();
      //绘制点
      let that = this;
      let viewer = window.map.map3D;
      let tempEntities = [];
      let position = [];
      let tempPoints = [];
      // 开启深度检测
      viewer.scene.globe.depthTestAgainstTerrain = true;
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      //鼠标移动事件
      handler.setInputAction(function (movement) {},
      Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      //左键点击操作
      handler.setInputAction(function (click) {
        //调用获取位置信息的接口
        let ray = viewer.camera.getPickRay(click.position);
        position = viewer.scene.globe.pick(ray, viewer.scene);
        tempPoints.push(position);
        let tempLength = tempPoints.length;
        //调用绘制点的接口
        let point = that.drawPoint(tempPoints[tempPoints.length - 1]);
        tempEntities.push(point);
        if (tempLength > 1) {
          let pointline = that.drawPolyline([
            tempPoints[tempPoints.length - 2],
            tempPoints[tempPoints.length - 1],
          ]);
          tempEntities.push(pointline);
        } else {
          // tooltip.innerHTML = "请绘制下一个点，右键结束";
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      //右键点击操作
      handler.setInputAction(function (click) {
        that.rectanglePoint = [];
        let point1 = that.cartesianTolngLatAlt(tempPoints[0]);
        let point2 = that.cartesianTolngLatAlt(tempPoints[1]);
        let x1 = null;
        let x2 = null;
        let y1 = null;
        let y2 = null;
        //处理得到的两个点，让不管是从哪个方向绘制都最终得到的是左上（x1,y2） 右下（x2,y1）两个坐标  *****
        if (point1.lat * 1 < point2.lat * 1) {
          y1 = point1.lat;
          y2 = point2.lat;
        } else {
          y1 = point2.lat;
          y2 = point1.lat;
        }
        if (point1.lng * 1 > point2.lng * 1) {
          x1 = point1.lng;
          x2 = point2.lng;
        } else {
          x1 = point2.lng;
          x2 = point1.lng;
        }
        tempPoints = [];
        handler.destroy(); //关闭事件句柄
        handler = null;
        viewer.entities.removeAll();
        // 绘制矩形
        let graphical = viewer.entities.add({
          id: "Rectangle",
          rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(x2, y1, x1, y2), // 最西、最南、最东、最北
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            material: Cesium.Color.BLUE.withAlpha(0.3),
            outlineWidth: 4,
            stRotation: Cesium.Math.toRadians(45),
            // material: stripeMaterial,
          },
        });
        // 更新输入框的内容
        that.rectanglePoint = [x2, y1, x1, y2];
        that.rectanglePointShow = `[${x2.toFixed(0)},${y1.toFixed(
          0
        )}] - [${x1.toFixed(0)},${y2.toFixed(0)}]`;
        that.params[2].range[0] = that.rectanglePointShow;
        that.$message({
          type: "success",
          message: `绘图坐标：${that.rectanglePoint}`,
        });
        that.getList();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    // 清除绘制的矩形
    cleanRectangle() {
      var viewer = window.map.map3D;
      // 删除全部
      viewer.entities.removeAll();
    },
    drawPolyline(positions, config_) {
      let viewer = window.map.map3D;
      if (positions.length < 1) return;
      let config = config_ ? config_ : {};
      return viewer.entities.add({
        name: "线几何对象",
        polyline: {
          positions: positions,
          width: config.width ? config.width : 5.0,
          material: new Cesium.PolylineGlowMaterialProperty({
            color: config.color
              ? new Cesium.Color.fromCssColorString(config.color)
              : Cesium.Color.GOLD,
          }),
          depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
            color: config.color
              ? new Cesium.Color.fromCssColorString(config.color)
              : Cesium.Color.GOLD,
          }),
          clampToGround: true,
        },
      });
    },
    drawPoint(position, config) {
      let viewer = window.map.map3D;
      let config_ = config ? config : {};
      return viewer.entities.add({
        name: "点几何对象",
        position: position,
        point: {
          color: Cesium.Color.SKYBLUE,
          pixelSize: 10,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });
    },
    cartesianTolngLatAlt(cartesianObj) {
      let viewer = window.map.map3D;
      const cartesian3 = new Cesium.Cartesian3(
        cartesianObj.x,
        cartesianObj.y,
        cartesianObj.z
      );
      const cartographic =
        viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);
      const lng = Cesium.Math.toDegrees(cartographic.longitude);
      const alt = cartographic.height;

      return { lat, lng, alt };
    },