cesiumjs Primitive实现鼠标左键点击交互

今天要学习的是给cesiumjs Primitive添加点击事件，并根据点击事件做交互处理。今天要实现的点击实体修改实体颜色。

cesiumjs 点击前颜色

cesiumjs 点击后颜色

实例演示地址

创建几何体

// 创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
        // 西边经度
        90,
        // 南边纬度
        20,
        // 东边经度
        110,
        // 北边纬度
        30),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  })

创建实体

给实体添加一个id,为后面的点击交互做准备。

//创建几何体实例
  let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry,
    id: 'redRect',
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.RED.withAlpha(0.5)
      )
    }
  })

创建图元

  // 创建图元
  let primitive = new Cesium.Primitive({
    geometryInstances: instance,
    // 材质 设置外观
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true
    })
  })

  viewer.scene.primitives.add(primitive)

获取cesium画布事件

通过ScreenSpaceEventHandler我们可以获取到Cesium的事件。

 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

事件监听

通过setInputAction我们可以监听点击事件，获取到我们点击的实体。

  handler.setInputAction(function (movement) {
    var pickedObject = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedObject)) {
      console.log(pickedObject)
      console.log(pickedObject.id)
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

可以监听到事件类型有以下几种：

事件	类型	描述
LEFT_DOWN	数字	表示鼠标左键按下事件。
LEFT_UP	数字	表示鼠标左键弹起事件。
LEFT_CLICK	数字	表示鼠标左键单击事件。
LEFT_DOUBLE_CLICK	数字	表示鼠标左键双击事件。
RIGHT_DOWN	数字	表示鼠标左键按下事件。
RIGHT_UP	数字	表示鼠标右键弹起事件。
RIGHT_CLICK	数字	表示鼠标右键单击事件。
MIDDLE_DOWN	数字	表示鼠标中键按下事件。
MIDDLE_UP	数字	表示鼠标中键弹起事件。
MIDDLE_CLICK	数字	表示鼠标中键单击事件。
MOUSE_MOVE	数字	表示鼠标移动事件。
WHEEL	数字	表示鼠标滚轮事件。
PINCH_START	数字	表示触摸表面上双指事件的开始。
PINCH_END	数字	表示触摸表面上双指事件的结束。
PINCH_MOVE	数字	表示触摸表面上双指事件的变化。

点击实体修改颜色

这里我们要实现的交互效果：点击实体，修改实体的颜色，首先获取到实体的id,然后通过我们上节课学到的cesiumjs Primitive动态修改实体颜色的方法来修改颜色即可。

  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handler.setInputAction(function (movement) {
    var pickedObject = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedObject) && typeof pickedObject.id == 'string') {
      console.log(pickedObject)
      console.log(pickedObject.id)
      let attributes = primitive.getGeometryInstanceAttributes(pickedObject.id);
      attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
          Cesium.Color.YELLOW.withAlpha(1)
      )
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

完整实例代码

/**
* @Author: 858834013@qq.com
* @Name: cesiumBody
* @Date: 2023年06月08日
* @Desc: Primitive物体交互
*/
<template>
  <div class="cesiumBody" id="cesiumBody" ref="cesiumBody">
  </div>
</template>

<script setup>
import {modelUrl} from '@/config/config'
import * as Cesium from 'cesium'
import '../../Widgets/widgets.css'
import {onMounted} from "vue";
// 设置cesium的静态资源路径
window.CESIUM_BASE_URL = modelUrl + 'cesium'
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    // 西边的经度
    89.5,
    // 南边的纬度
    20.4,
    // 东边的经度
    110.4,
    // 北边的纬度
    61.2
)

// 设置cesium token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NDcwNDBjMS03MDg1LTQyMDMtYjNkMi00MjMxMjY1ZWIyODMiLCJpZCI6MTI0MzA0LCJpYXQiOjE2NzYxMjE3MzN9.FzxO4W9AbW8UlsG3_bc8HuuRd-FlZvbNuQS3DrifzxA'

onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumBody', {
    // 是否显示信息窗口
    infoBox: false,
    // 是否显示查询按钮
    geocoder: false,
    // 是否显示home按钮
    homeButton: false,
    // 控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择器
    baseLayerPicker: false,
    // 是否显示帮助
    navigationHelpButton: false,
    // 隐藏左下角的仪表盘
    animation: false,
    // 隐藏底部时间轴
    timeline: false,
    // 是否显示全屏按钮
    fullscreenButton: false
  })
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  // 创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
        // 西边经度
        90,
        // 南边纬度
        20,
        // 东边经度
        110,
        // 北边纬度
        30),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  })
//创建几何体实例
  let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry,
    id: 'redRect',
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.RED.withAlpha(0.5)
      )
    }
  })

  // 创建图元
  let primitive = new Cesium.Primitive({
    geometryInstances: instance,
    // 材质 设置外观
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true
    })
  })

  viewer.scene.primitives.add(primitive)

  // 拾取
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handler.setInputAction(function (movement) {
    var pickedObject = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedObject) && typeof pickedObject.id == 'string') {
      console.log(pickedObject)
      console.log(pickedObject.id)
      let attributes = primitive.getGeometryInstanceAttributes(pickedObject.id);
      attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
          Cesium.Color.YELLOW.withAlpha(1)
      )
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
})
</script>

<style lang="scss" scoped>
.cesiumBody {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-与entity和primitive物体交互-实践的学习笔记

笔记汇总

Cesium学习笔记汇总

cesiumjs Primitive实现鼠标左键点击交互完整实例代码下载

代码运行环境：vue3 + vite + js nodejs 14