cesium学习之路（六）获取当前地图点击位置坐标，并圆点标记

m0_63701303

已于 2022-11-16 17:59:01 修改

阅读量2k

点赞数 1

分类专栏： cesium 文章标签：学习

于 2022-11-15 16:52:38 首次发布

本文链接：https://blog.csdn.net/m0_63701303/article/details/127869108

版权

cesium 专栏收录该内容

31 篇文章 11 订阅

订阅专栏

1.定义canvas屏幕点击事件，scene.canvas指的是HTMLCanvasElement元素，也就是屏幕画的东西

2.注册鼠标事件

3.转换为不包含地形的笛卡尔坐标

4.转经纬度（弧度）坐标

5.添加圆点

 //定义canvas屏幕点击事件，scene.canvas指的是HTMLCanvasElement元素，也就是屏幕画的东西
      var handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
      );
      console.log(this.viewer.scene.canvas);
         //<canvas>   
      console.log(Cesium.ScreenSpaceEventType);
         // {
      //   LEFT_CLICK: 2; 左键点击事件
      //   LEFT_DOUBLE_CLICK: 3;左键双击事件
      //   LEFT_DOWN: 0;左键按下事件
      //   LEFT_UP: 1;左键抬起事件
      //   MIDDLE_CLICK: 12;滚轮点击
      //   MIDDLE_DOWN: 10;滚轮按下
      //   MIDDLE_UP: 11;滚轮抬起
      //   MOUSE_MOVE: 15;鼠标移动
      //   PINCH_END: 18;两指按下结束
      //   PINCH_MOVE: 19; 两指移动
      //   PINCH_START: 17;两指开始触碰
      //   RIGHT_CLICK: 7;右键点击事件
      //   RIGHT_DOWN: 5;右键按下事件
      //   RIGHT_UP: 6;右键抬起事件
      //   WHEEL: 16;
      // }
      //注册鼠标事件
      let that = this;  //handler内拿不到this 用that接下
      handler.setInputAction(function (event) {
        conosle.log(event)
        //event {position: position:{x:123,y:123}}
        // 转换为不包含地形的笛卡尔坐标
        let clickPosition = that.viewer.scene.camera.pickEllipsoid(
          event.position
        );
        console.log(clickPosition);
        // clickPosition{x: 101877.1201414885, y: 4637106.646197382, z: 4363390.89501216}
        // 转经纬度（弧度）坐标
        let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
        console.log(radiansPos);
        // radiansPos{longitude: 1.6396749591249946, latitude: 0.7371487514224602, height:636749216566357e-9}
        // 转角度
        console.log("经度："+Cesium.Math.toDegrees(radiansPos.longitude) +", 纬度：" +Cesium.Math.toDegrees(radiansPos.latitude)
        );
        //   // 添加圆点
        that.viewer.entities.add({
          position: clickPosition, //圆点位置
          point: {
            color: Cesium.Color.RED, //圆点颜色
            pixelSize: 20,     //圆点大小
          },
        });
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      handler.setInputAction(function () {
         console.log(点击了中键)
      }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
      handler.setInputAction(function () {
        console.log("双击了左键");
      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      handler.setInputAction(function () {
         //取消鼠标点击事件
        // handler.destroy()
        handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

      handler.setInputAction(function () {
        //取消鼠标点击事件
        handler.destroy();
        console.log("双击了右键，取消全部事件");
      }, Cesium.ScreenSpaceEventType.RIGHT_DOUBLE_CLICK);