Cesium 若干标注和绘制

 

/**
 * 绘制折线
 * @param {*} viewer
 * @param {*} options
 */

function DrawPolyLine(viewer, options) {
  this.viewer = viewer;
  this.ismeare = options.ismeare || false;
  this.positions = [];
  this.poly = null;
  this.tooltip = document.getElementById(options.toolTip || "toolTip");
  this.cartesian = null;
  this.floatingPoint = null;
  this.mouseHandler = null;
  this.onCompleted = options.onCompleted;
  this._pointLabels = [];
  this._totalLengthPointLabel = undefined;
  this._originCursor = undefined;
}

DrawPolyLine.prototype.end = function() {
  this.positions = [];
  this.poly = null;
  this.cartesian = null;
  this.floatingPoint = null;
  if (this.tooltip) {
    this.tooltip.style.display = "none";
  }
  if (this.mouseHandler) {
    this.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    this.mouseHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    );
    this.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    this.mouseHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.RIGHT_CLICK
    );
    this.mouseHandler.destroy();
    this.mouseHandler = null;
  }
  if (this.floatingPoint) {
    this.viewer.entities.remove(this.floatingPoint);
  }
  this._pointLabels = [];
  this._totalLengthPointLabel = undefined;
  viewer.scene.canvas.style.cursor = this._originCursor;
  this.viewer.selectedEntity = null;
  this.viewer.trackedEntity = null;
};

/**
 * 清除绘制
 */
DrawPolyLine.prototype.clear = function() {
  let removeLayerName = ["drawpolyline", "drawpolylinepoint"];
  for (var i = 0; i < window.viewer.entities.values.length; i++) {
    var entity = window.viewer.entities.values[i];
    if (removeLayerName.indexOf(entity.name) > -1) {
      window.viewer.entities.removeById(entity.id);
      i--;
    }
  }
  this.end();
};

/**
 * 开始绘制
 */
DrawPolyLine.prototype.startDraw = function() {
  this.clear();
  let tooltip = this.tooltip;
  this.ismeare = true;
  let ismeare = this.ismeare;
  let viewer = this.viewer;
  let cartesian = this.cartesian;
  let positions = this.positions;
  let floatingPoint = this.floatingPoint;
  this.mouseHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  let handler = this.mouseHandler;
  let poly = this.poly;
  let that = this;
  this._originCursor = viewer.scene.canvas.style.cursor;
  viewer.scene.canvas.style.cursor = "crosshair";
  handler.setInputAction(function(movement) {
    if (!ismeare) {
      return;
    }
    tooltip.style.display = "block";
    tooltip.style.left = movement.endPosition.x + 3 + "px";
    tooltip.style.top = movement.endPosition.y - 25 + "px";
    tooltip.innerHTML = "<p>单击开始，双击结束，右键取消</p>";
    let ray = viewer.camera.getPickRay(movement.endPosition);
    //cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    cartesian = pickPosition(viewer, movement.endPosition);
    if (positions.length >= 2) {
      if (!Cesium.defined(poly)) {
        poly = new PolyLinePrimitive(positions);
      } else {
        positions.pop();
        positions.push(cartesian);
      }
      
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  //鼠标左键单击事件
  handler.setInputAction(function(movement) {
    if (!ismeare) {
      return;
    }
    let ray = viewer.camera.getPickRay(movement.position);
    //cartesian = viewer.scene.pickPosition(movement.position, new Cesium.Cartesian3());
    //cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    cartesian = pickPosition(viewer, movement.position);
    if (!cartesian) {
      return;
    }
    if (ismeare) {
      tooltip.style.display = "none";
      if (!cartesian) {
        return;
      }
      if (positions.length == 0) {
        positions.push(cartesian.clone());
      }
      positions.push(cartesian);
      floatingPoint = viewer.entities.add({
        name: "drawpolylinepoint",
        position: positions[positions.length - 1],
        point: {
          pixelSize: 4,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2
        }
      });
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  /**
   * 双击事件
   */
  handler.setInputAction(function(movement) {
that.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //     that.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    //     that.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    //     that.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    that.end();
    if (that.onCompleted) {
      that.onCompleted(that.positions);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

  handler.setInputAction(function(movement) {
    that.clear();
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

  var PolyLinePrimitive = (function() {
    function _(positions) {
      this.options = {
        name: "drawpolyline",
        polyline: {
          show: true,
          positions: [],
          material: Cesium.Color.CHARTREUSE,
          width: 3
          //clampToGround: true
        }
      };
      this.positions = positions;
      this._init();
    }
    _.prototype._init = function() {
      var _self = this;
      var _update = function() {
        return _self.positions;
      this.options.polyline.positions = new Cesium.CallbackProperty(
        _update,
        false
      );
      viewer.entities.add(this.options);
    };
    return _;
  })();
};

methods: {
    // 在vuex main 模块中查找
    ...homeMapActions(["setNavIdx"]),
    // 地球初始化
    earthInit() {
      this.$cesiumUtil.cesiumCommon.init3D();
    },
    loadBIM() {},
    dblclickFunc(model) {
      let entity = this.billboardEntityList.find(v => v.name === model.name);
      if (entity) {
        viewer.flyTo(entity, {
          duration: 2,
          offset: new Cesium.HeadingPitchRange(0, -0.7, 20)
        });
      }
    },
    loadData() {
      let that = this;
      viewer.scene.postProcessStages.fxaa.enabled = true;

      threeDataManager.add3Dtiles(
        "http://localhost:8083/cesium148/xiongan/models/pc/0/terra_b3dms/tileset.json",
        {
          maximumScreenSpaceError: 5.0
        },
        function(tileset) {
          if (tileset) {
            threeDataManager.update3DtilesHeight(tileset, -210);
            //threeDataManager.flyTo3dtiles(tileset, 2, 1.5);
            that.modelset = tileset;
            that.flyHome();
            setTimeout(that.addOtherData, 1000);
            //that.addOtherData();
          }
        }
      );
      let tilesetBIM = threeDataManager.add3Dtiles(
        "http://localhost:8083/cesium148/xiongan/tiles/tileset.json",
        {
          maximumScreenSpaceError: 2.0
        },
        function(tileset) {
          if (tileset) {
            that.bimset = tileset;
            // threeDataManager.flyTo3dtiles(tileset);
            //threeDataManager.update3DtilesHeight(tileset, -210);
            threeDataManager.update3dtilesMaxtrix(tileset, {
              rx: 0,
              ry: 0,
              rz: 0,
              tx: 115.916939,
              ty: 39.045741,
              tz: 0.0,
              scale: 1.0
            });
          }
        }
      );
      new BIMMousePickUtil({
        viewer: viewer,
        tileset: tilesetBIM,
        picking: true
      });
    },

    addOtherData() {
      this.billboardList.map(v => {
        this.addBill(v.name, v.params, v.position, v.color, v.chName);
      });

      //this.$cesiumUtil.popupcesium.init(viewer, "#cesiumContainer");

      let minlon = 115.915263;
      let minlat = 39.046234;
      let maxlat = minlat;
      let maxlon = 115.915345;
      let minheight = -0.585;
      let maxheight = 3.962;
      this.$cesiumUtil.cesiumUtil.addGao1(
        minlon,
        minlat,
        maxlat,
        maxlon,
        minheight,
        maxheight
      );
      let minlon1 = 115.91584;
      let minlat1 = 39.046733;
      let maxlat1 = 39.046792;
      let maxlon1 = minlon1;
      let minheight1 = 5.983;
      let maxheight1 = 14.783;
      this.$cesiumUtil.cesiumUtil.addGao2(
        minlon1,
        minlat1,
        maxlat1,
        maxlon1,
        minheight1,
        maxheight1
      );

      //左边的那个柱子
      let minlon2 = 115.914828;
      let minlat2 = 39.046194;
      let maxlat2 = minlat2;
      let maxlon2 = 115.914885;
      let minheight2 = -1.111;
      let maxheight2 = 7.949;
      this.$cesiumUtil.cesiumUtil.addGao1(
        minlon2,
        minlat2,
        maxlat2,
        maxlon2,
        minheight2,
        maxheight2
      );
      //左边的那个测量坡度和高度
      let middlePoint = [115.914799, 39.046336, -1.22];
      let rightPoint = [115.914887, 39.046336, -1.22];

      let leftPoint = [115.914751, 39.046336, 5.4];

      this.$cesiumUtil.cesiumUtil.addsimpleline0(
        [...leftPoint, ...middlePoint, ...rightPoint],
        6,
        Cesium.Color.YELLOW,
        "louti",
        true
      );
      let minlon3 = leftPoint[0];
      let minlat3 = leftPoint[1];
      let maxlat3 = minlat3;
      let maxlon3 = middlePoint[0] + 0.00006;
      let minheight3 = middlePoint[2];
      let maxheight3 = leftPoint[2];
      this.$cesiumUtil.cesiumUtil.addGao1(
        minlon3,
        minlat3,
        maxlat3,
        maxlon3,
        minheight3,
        maxheight3,
        true
      );
      /

      let point1 = [115.915271, 39.046487, 4];
      let point2 = [115.915273, 39.046294, 4];

      let point3 = [115.91534, 39.046288, 4];
      let point4 = [115.915341, 39.046119, 4];

      let point5 = [115.915873, 39.046107, 4];
      this.$cesiumUtil.cesiumUtil.addsimpleline0(
        [...point1, ...point2, ...point3, ...point4, ...point5],
        5,
        Cesium.Color.BLUE,
        "louti"
      );
      let flashPointOption = this.$cesiumUtil.cesiumUtil.getFlashPoint(
        Cesium.Color.DARKORANGE
      );
      this.$cesiumUtil.cesiumUtil.addEntity(
        "louti",
        flashPointOption,
        Cesium.Cartesian3.fromDegrees(point1[0], point1[1], point1[2] + 0.1)
      );
      this.$cesiumUtil.cesiumUtil.addEntity(
        "louti",
        flashPointOption,
        Cesium.Cartesian3.fromDegrees(point2[0], point2[1], point2[2] + 0.1)
      );
      this.$cesiumUtil.cesiumUtil.addEntity(
        "louti",
        flashPointOption,
        Cesium.Cartesian3.fromDegrees(point3[0], point3[1], point3[2] + 0.1)
      );
      this.$cesiumUtil.cesiumUtil.addEntity(
        "louti",
        flashPointOption,
        Cesium.Cartesian3.fromDegrees(point4[0], point4[1], point4[2] + 0.1)
      );
      this.$cesiumUtil.cesiumUtil.addEntity(
        "louti",
        flashPointOption,
        Cesium.Cartesian3.fromDegrees(point5[0], point5[1], point5[2] + 0.1)
      );
      let dis1 = this.$cesiumUtil.cesiumCoordUtil.getDistanceF(point1, point2);
      this.$cesiumUtil.cesiumUtil.addwalllabel(
        (point1[0] + point2[0]) / 2,
        (point1[1] + point2[1]) / 2,
        point1[2] + 0.1,
        dis1.toFixed(2) + "米",
        "louti"
      );

      let dis2 = this.$cesiumUtil.cesiumCoordUtil.getDistanceF(point2, point3);
      this.$cesiumUtil.cesiumUtil.addwalllabel(
        (point2[0] + point3[0]) / 2,
        (point2[1] + point3[1]) / 2,
        point2[2] + 0.1,
        dis2.toFixed(2) + "米",
        "louti"
      );

      let dis3 = this.$cesiumUtil.cesiumCoordUtil.getDistanceF(point3, point4);
      this.$cesiumUtil.cesiumUtil.addwalllabel(
        (point3[0] + point4[0]) / 2,
        (point3[1] + point4[1]) / 2,
        point3[2] + 0.1,
        dis3.toFixed(2) + "米",
        "louti"
      );

      let dis4 = this.$cesiumUtil.cesiumCoordUtil.getDistanceF(point4, point5);
      this.$cesiumUtil.cesiumUtil.addwalllabel(
        (point4[0] + point5[0]) / 2,
        (point4[1] + point5[1]) / 2,
        point4[2] + 0.1,
        dis4.toFixed(2) + "米",
        "louti"
      );

      //圈梁
      this.$cesiumUtil.cesiumUtil.addcorridor();

      //右边的那个圈线
      this.addLineFeatuers(this.rightRightPoints, Cesium.Color.BLUE, 0.15);
      //左边那个圈线
      this.addLineFeatuers(this.leftPoints, Cesium.Color.YELLOW, 0.5);
      //左上那个圈线
      this.addLineFeatuers(this.leftTopPoints, Cesium.Color.YELLOW, 0.5);
    },

    addLineFeatuers(linePoints, lineColor, addHeight) {
      linePoints.forEach((e, index) => {
        if ((index + 1) % 3 === 0) {
          linePoints[index] += addHeight;
        }
      });
      this.$cesiumUtil.cesiumUtil.addsimpleline0(
        linePoints,
        3,
        lineColor || Cesium.Color.YELLOW,
        "louti",
        false
      );
      let flashPointOption = this.$cesiumUtil.cesiumUtil.getFlashPoint(
        Cesium.Color.DARKORANGE
      );
      for (let index = 0; index < linePoints.length - 2; index += 3) {
        this.$cesiumUtil.cesiumUtil.addEntity(
          "louti",
          flashPointOption,
          Cesium.Cartesian3.fromDegrees(
            linePoints[index],
            linePoints[index + 1],
            linePoints[index + 2] + 0.15
          )
        );
      }

      for (let index = 0; index < linePoints.length - 5; index += 3) {
        let point1 = [
          linePoints[index],
          linePoints[index + 1],
          linePoints[index + 2]
        ];
        let point2 = [
          linePoints[index + 3],
          linePoints[index + 4],
          linePoints[index + 5]
        ];
        let dis = this.$cesiumUtil.cesiumCoordUtil.getDistanceF(point1, point2);
        if (dis < 10) {
          continue;
        }
        this.$cesiumUtil.cesiumUtil.addwalllabel(
          (point1[0] + point2[0]) / 2,
          (point1[1] + point2[1]) / 2,
          point1[2] + 0.1,
          dis.toFixed(2) + "米",
          "louti"
        );
      }
    },

    addBill(type, datainfo, pos, color, label = "楼 体") {
      var pinBuilder = new Cesium.PinBuilder();
      var entity = viewer.entities.add({
        // id: label,
        name: type,
        position: Cesium.Cartesian3.fromDegrees(pos.jd, pos.wd, pos.gd),
        billboard: {
          //image:pinBuilder.fromText("楼 体", Cesium.Color.ROYALBLUE, 65).toDataURL(),
          image: pinBuilder.fromColor(color, 48).toDataURL(),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        },
        datainfo: datainfo
      });
      this.addinfobiaoqian(entity, label);
      if (!this.billboardEntityList.find(v => v.name === type)) {
        this.billboardEntityList.push(entity);
      }
    },
    // 初始化方法
    init() {
      this.$refs.eleCheckList.open();
      this.earthInit();
      this.loadData();
    },
    openAnalyMask() {
      bus.$emit("analysis_measure", true);
    },
    closemeasure() {
      bus.$emit("analysis_measure", false);
    },
    closeCheck() {
      this.$refs.eleCheckList.close();
    },

    flyHome() {
      let that = this;
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          that.homePos.position.x,
          that.homePos.position.y,
          that.homePos.position.z
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            that.homePos.direction.x,
            that.homePos.direction.y,
            that.homePos.direction.z
          ),
          up: new Cesium.Cartesian3(
            that.homePos.up.x,
            that.homePos.up.y,
            that.homePos.up.z
          )
        }
      });
    },