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

前言

	缺少前置学习使用资料,请自行查阅:[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>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 超图cesium是两种不同的地理信息系统软件。以下是它们之间的区别: 1. 功能和用途:超图是一个全功能的GIS软件,提供丰富的地图制作、地理数据处理和空间分析功能。它主要用于地理信息系统领域的数据管理、制图分析和决策支持等任务。而cesium则是一个基于Web的三维地球平台,主要用于展示、浏览和分析三维地理数据。它适用于虚拟现实、地球建模和三维可视化等应用场景。 2. 技术架构:超图基于自有的SuperMap GIS平台开发,使用Java语言编写,支持多种操作系统。它具有强大的空间数据库管理和分布式计算能力。而cesium则是基于JavaScript和WebGL技术构建,可以轻松集成到Web应用程序中,并支持主流的浏览器。 3. 数据格式和标准:超图支持多种地理数据格式,包括SHP、GDB、GeoTIFF等,同时也支持开放的地理空间数据标准,如OGC标准。而cesium主要使用其自有的3D Tiles数据格式,该格式针对大规模的三维数据进行了优化,并支持3D Tiles标准,以提供更高效的数据传输和可视化效果。 4. 社区和生态系统:超图在中国具有广泛的用户和开发者社区,有丰富的插件和扩展生态系统。它也与国内外多家科研机构和企业建立了合作关系。而cesium在全球范围内拥有庞大的用户社区,同时也有一些专业的开发者社区,提供各种扩展和创新的解决方案。 综上所述,超图cesium在功能、技术架构、数据格式和社区等方面存在明显的区别。根据具体的应用需求,选择合适的软件可以提高工作效率和数据可视化效果。 ### 回答2: 超图Cesium都是地理信息系统(GIS)领域中广泛使用的工具。它们在一些方面有相似之处,但也有一些明显的区别。 首先,超图是一种基于二维平面地图的GIS工具,主要用于处理和展示地理空间数据。它提供了丰富的地图制作功能,可以创建具有多种样式和符号的地图,以满足不同需求。超图支持矢量数据和栅格数据,可以进行地图叠加、查询和空间分析等操作。它还提供了丰富的地图编辑工具,使用户能够对地图进行绘制、修改和数据编辑。 Cesium则是一种基于三维球面模型的GIS工具,主要用于三维地理可视化。它通过基于Web的技术,如HTML、CSS和JavaScript,实现了在网页上展示和交互式浏览三维地球的功能。Cesium可以加载和可视化大规模的全球地理空间数据集,支持各种地球表面要素的渲染和高级效果,如光照和阴影等。它还提供了丰富的API和工具,使开发人员能够自定义和扩展其中的功能。 总体而言,超图更加专注于二维平面地图的制作和分析,而Cesium则更加专注于三维地球的可视化和交互。超图强调图形制作和编辑的功能,而Cesium则注重地理可视化和数据交互的能力。此外,Cesium基于Web技术,可以通过浏览器直接访问和使用,而超图则可能需要特定的软件环境和安装。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值