cesium常用的事件

包括鼠标移动事件

鼠标按下事件

鼠标弹起事件

滚轮滚动事件

鼠标点击事件

下面是demo代码

<template>
  <div>
    <div id="cesiumDemo"></div>
  </div>
</template>

<script>
let viewer
export default {
  name: 'cesiumEvent',
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.getCesiumDem()
  },
  destroyed () {
  },
  methods: {
    // 实例cesium
    getCesiumDem () {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
      viewer = new Cesium.Viewer('cesiumDemo', {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        vrButton: false, // 是否显示VR控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
        infoBox: false, // 是否显示点击要素之后显示的信息
        fullscreenButton: false, // 是否显示全屏按钮
        selectionIndicator: true, // 是否显示选中指示框
        homeButton: false, // 是否显示返回主视角控件
        scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        // terrainProvider: Cesium.createWorldTerrain({
        //   // 光照阴影
        //   requestVertexNormals: true,
        //   // 水流效果
        //   requestWaterMask: true
        // }) // 显示地形
        terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不显示地形
      })
      // 地图事件
      // 得到当前三维场景
      let scene = viewer.scene
      // 得到当前三维场景的椭球体
      let ellipsoid = scene.globe.ellipsoid
      // 定义当前场景的画布元素的事件处理
      let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
      // 设置鼠标移动事件的处理函数，这里负责监听x,y坐标值的变化
      handler.setInputAction(function (movement) {
        // console.log(movement)
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      // 鼠标按下
      handler.setInputAction(function (movement) {
        // console.log(movement)
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
      // 鼠标弹起
      handler.setInputAction(function (movement) {
        // console.log(movement)
      }, Cesium.ScreenSpaceEventType.LEFT_UP)
      // 设置鼠标滚动事件的处理函数，这里负责监听高度值变化
      handler.setInputAction(function (movement) {
        // 获取当前离地高度
        let heightTo = Math.ceil(viewer.camera.positionCartographic.height)
        console.log(heightTo)
      }, Cesium.ScreenSpaceEventType.WHEEL)
      // 设置鼠标点击事件
      handler.setInputAction(function (event) {
        console.log(event)
        var cartesian = viewer.camera.pickEllipsoid(event.position, ellipsoid)
        console.log(cartesian)
        if (cartesian) {
          // 将笛卡尔坐标转换为地理坐标
          var cartographic = ellipsoid.cartesianToCartographic(cartesian)
          console.log(cartographic)
          // 经纬度坐标
          let longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
          let latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
          console.log(longitudeString)
          console.log(latitudeString)
          var pick = viewer.scene.pick(event.position)
          if (Cesium.defined(pick) && pick) {
            // 如果点击的是实例，获取实例对象
            console.log(pick)
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    }
  }
}
</script>
<style scoped>
#cesiumDemo {
  width: 100vw;
  height: 100vh;
}
/* 隐藏cesium标志 */
.cesium-viewer .cesium-widget-credits {
  display: none;
}
</style>

打印