【超图+CESIUM】【基础API使用示例】15、超图｜CESIUM - 鼠标事件：点击、双击、按下、抬起滚轮等

最新推荐文章于 2024-04-07 13:48:03 发布

汪同学丶

最新推荐文章于 2024-04-07 13:48:03 发布

阅读量1.7k

点赞数

分类专栏：超图+CESIUMJS 文章标签：超图+CESIUMJS

本文链接：https://blog.csdn.net/weixin_44402694/article/details/123181390

版权

超图+CESIUMJS 专栏收录该内容

52 篇文章 45 订阅

订阅专栏

前言

	缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136)
	以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/weixin_44402694/82180350](https://download.csdn.net/download/weixin_44402694/82180350)。
	鼠标事件：点击、双击、按下、抬起滚轮等。

使用

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>鼠标事件</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null,
        scene = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        scene = viewer.scene
        setS3MServiceHandler()
        screenSpaceEventHandler()
      }

      // 添加由supermap iserver上发布的s3m服务
      function setS3MServiceHandler() {
        const promise = scene.open(
          'http://www.supermapol.com/realspace/services/3D-jinjiang/rest/realspace'
        )
        Cesium.when(promise, () => {
          //设置相机视角
          scene.camera.setView({
            //将经度、纬度、高度的坐标转换为笛卡尔坐标
            destination: new Cesium.Cartesian3(
              -2767302.844416157,
              5085941.49155452,
              2675759.1559041184
            ),
            orientation: {
              heading: 4.7793869967010565,
              pitch: -0.5899023527373464,
              roll: 8.539835505416704e-12,
            },
          })
          pickEventHandler()
        })
      }
      // 1、第一种方式ScreenSpaceEventHandler - 包含多种交互，以及和ALT、SHIFT、CTRL组合触发
      function screenSpaceEventHandler() {
        // Cesium.ScreenSpaceEventType.LEFT_CLICK ：表示鼠标左键单击事件。
        // Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK ：表示鼠标左键双击事件。
        // Cesium.ScreenSpaceEventType.LEFT_DOWN ：表示鼠标左键按下事件。
        // Cesium.ScreenSpaceEventType.LEFT_UP ：表示鼠标左键向上事件。
        // Cesium.ScreenSpaceEventType.MIDDLE_CLICK ：表示鼠标中键单击事件。
        // Cesium.ScreenSpaceEventType.MIDDLE_DOWN ：表示鼠标中键按下事件。
        // Cesium.ScreenSpaceEventType.MIDDLE_UP ：表示鼠标中键向上事件。
        // Cesium.ScreenSpaceEventType.MOUSE_MOVE ：表示鼠标移动事件。
        // Cesium.ScreenSpaceEventType.PINCH_END ：表示触摸表面上的两指事件的结束。
        // Cesium.ScreenSpaceEventType.PINCH_MOVE ：表示触摸表面上两指事件的变化。
        // Cesium.ScreenSpaceEventType.PINCH_START ：表示触摸表面上的两指事件的开始。
        // Cesium.ScreenSpaceEventType.RIGHT_CLICK ：表示鼠标右键单击事件。
        // Cesium.ScreenSpaceEventType.RIGHT_DOWN ：表示鼠标左键按下事件。
        // Cesium.ScreenSpaceEventType.RIGHT_UP ：表示鼠标右键向上事件。
        // Cesium.ScreenSpaceEventType.WHEEL ：表示鼠标滚轮事件。
        const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas) // event事件处理程序
        // 绑定各类事件
        handler.setInputAction(
          (e) => {
            console.log(scene.pick(e.position))
            console.log(scene.pickPosition(e.position))
          },
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        ) // 左键点击
        // handler.setInputAction(
        //   (e) => {
        //     console.log(scene.pick(e.position))
        //     console.log(scene.pickPosition(e.position))
        //   },
        //   Cesium.ScreenSpaceEventType.LEFT_CLICK,
        //   Cesium.KeyboardEventModifier.SHIFT
        // ) // 需要shift和左键组合触发
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.LEFT_UP)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.MIDDLE_UP)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.endPosition))
        //   console.log(scene.pickPosition(e.endPosition))
        // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.PINCH_END)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.PINCH_MOVE)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.PINCH_START)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.RIGHT_DOWN)
        // handler.setInputAction((e) => {
        //   console.log(scene.pick(e.position))
        //   console.log(scene.pickPosition(e.position))
        // }, Cesium.ScreenSpaceEventType.RIGHT_UP)
        // handler.setInputAction((e) => {
        //   console.log(e) // 可用来判断上下滑动的方向
        // }, Cesium.ScreenSpaceEventType.WHEEL)
        // 删除各类事件
        handler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK,
          Cesium.KeyboardEventModifier.SHIFT
        )
        // 销毁事件处理程序
        handler.destroy()
        console.log(handler)
        console.log(handler.isDestroyed()) // true 代表已经被销毁
      }
      // 2、第二种方式viewer.pickEvent.addEventListener - 只支持点击
      function pickEventHandler() {
        const layer = scene.layers.find('jinjiang')
        //需要前置设置属性查询参数，否则pickEvent不生效
        layer.setQueryParameter({
          url: 'http://www.supermapol.com/realspace/services/data-jinjiang/rest/data',
          dataSourceName: 'jinjiang',
          dataSetName: 'test',
          keyWord: 'SmID',
        })
        // 注册鼠标点击事件
        viewer.pickEvent.addEventListener(pickEventCallBackHandler)
        // 移除点击事件
        viewer.pickEvent.removeEventListener(pickEventCallBackHandler)
      }

      function pickEventCallBackHandler(feature) {
        console.log(feature) // 点击查询到的信息
      }
    </script>
  </body>
</html>