cesium 移动端 点击地图上的点作为旋转中心

<div style="margin-left:10px;">
	<div>第三人称查看</div>
      <van-switch
       	v-model="third"
      	@change="openThird"
        size="14px"
   	/>    
 </div>
data: {
	return {
		third: false,  // 是否开启选择点进行选择查看
	    thirdObj: {},  //  记录选择的点的经纬度、笛卡尔坐标等信息
	}
},
mounted() {
	this.addMobileClick() // 添加点击事件的回调函数
},
method: {
	addMobileClick() {
      let that = this
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

      // 设置鼠标左键单击回调事件
      handler.setInputAction(function(e) {
        // 首先移除之前添加的点
        viewer.entities.removeAll()
        // 获取点击位置笛卡尔坐标
        var position = viewer.scene.pickPosition(e.position)

        // 将笛卡尔坐标转化为经纬度坐标
        var cartographic = Cesium.Cartographic.fromCartesian(position)
        // console.log('笛卡尔坐标');
        // console.log(cartographic.longitude, cartographic.latitude, cartographic.height);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude)
        var latitude = Cesium.Math.toDegrees(cartographic.latitude)
        var height = cartographic.height
        if (height < 0) {
          height = 0
        }

        const x = longitude
        const y = latitude
        const z = height + 0.5
        if (that.third) {
          that.thirdObj = {
            x,
            y,
            z,
            heading: viewer.scene.camera.heading,
            pitch: viewer.scene.camera.pitch,
            roll: viewer.scene.camera.roll,
            position
          }
          that.changeThird()
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

      // 双击全屏
      handler.setInputAction(function() {
        if (Cesium.Fullscreen.fullscreen) {
          Cesium.Fullscreen.exitFullscreen()
        } else {
          Cesium.Fullscreen.requestFullscreen(scene.canvas)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    },
    changeThird() {
      const that = this
      if (that.third) {
        viewer.entities.removeAll();
        // 经纬度信息
        let x = that.thirdObj.x
        let y = that.thirdObj.y
        let z = that.thirdObj.z
        // 笛卡尔坐标
        const xC = that.thirdObj.position.x
        const yC = that.thirdObj.position.y
        const zC = that.thirdObj.position.z
        // hpr
        const heading = that.thirdObj.heading
        const pitch = that.thirdObj.pitch
        const roll = that.thirdObj.roll
        
        const position = Cesium.Cartesian3.fromDegrees(
          x,
          y,
          z
        );
        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(
          position,
          hpr
        );
        const entity = viewer.entities.add({
          position: position,
          orientation
        });
        viewer.trackedEntity = entity; // 如果是图层上面的entitiy则不需要了,使用 viewer.trackedEntity = that.nowLayers; 
        // 为更直观地展示查询的位置,在点击处添加对应点
        viewer.entities.add(
          new Cesium.Entity({
            point: new Cesium.PointGraphics({
              color: new Cesium.Color(1, 1, 0),
              pixelSize: 6,
              outlineColor: new Cesium.Color(0, 1, 1)
            }),
            position: Cesium.Cartesian3.fromDegrees(
              x,
              y,
              z
            )
          })
        )
        setTimeout(() => {
          var center = Cesium.Cartesian3.fromDegrees(x, y, z) 	//	目标位置
          viewer.camera.lookAt(center, new Cesium.Cartesian3(180, 50, 30)) 	// 	三个参数数字分别是:方位角,倾角,俯角
        }, 100)
      } else {
        viewer.entities.removeAll();
      }
    },
    // 开关控制
    openThird() {
      if (!this.third) {
        viewer.entities.removeAll()
      }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值