Cesium鼠标交互

一、获取对象的方法

• scene.pick返回的是包含给定窗口位置基元的对象
• scene.drillpick返回的是给定窗口所有对象的列表
• Globe.pick返回的是给定光线和地形的交点

二、鼠标监听的方法

• Cesium.ScreenSpaceEventType.MIDDLE_CLICL 鼠标中键点击事件
• Cesium.ScreenSpaceEventType.MOUSE_MOVE 鼠标移入事件
• Cesium.ScreenSpaceEventType.RIGHT_CLICK 鼠标右击事件
• Cesium.ScreenSpaceEventType.LEFT_CLICK 鼠标左击事件

下面来展示一个鼠标左击事件的实例：

// 加载新地图，设置一个变量用于存储新地图的信息
var esri = new Cesium.ArcGisMapServerImageryProvider({
	url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxMjQxNmU0YS1hNTBjLTRhMTItYTM4Yy02MTI5MDUyYjVhZGEiLCJpZCI6MTAyNTk5LCJpYXQiOjE2NTg4MzAwODB9.NknDn2xRdJLRdInv0fH7g_G4svRx07FcXduNvv_RW2w';
 const viewer = new Cesium.Viewer('yc-cesiumContainer',{
   // 首先要把默认的地图按钮设置为隐藏,否则会影响新地图的加载
   baseLayerPicker: false,
   // 设置地图
   imageryProvider:esri,
   // 放入引入的地形,CesiumTerrainProvider方法是将地形数据，转换为Cesium可以访问的格式
   terrainProvider: new Cesium.CesiumTerrainProvider({
     // url用于放入地形服务器的地址
     url:Cesium.IonResource.fromAssetId(1),
     // 可以增加法线，用于提高光照效果
     requestVertexNormals:true,
     // 可以增加水面特效
     requestWaterMask:true
   })
 });

 // 设置好视口位置，否则观测不到加载的物体
 viewer.camera.setView({
   // 设置经纬度位置和相机高度
   destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2500.0),
   // 设置相机方向
   orientation: {
     heading: Cesium.Math.toRadians(0),
     pitch: Cesium.Math.toRadians(-90.0),
     roll:0.0
   }
 })

 // 先添加一个图片
 const entity = viewer.entities.add({
   id:'planeLogo',
   position: new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0),
   plane: {
     // 确认面得朝向,这里设置沿着Z轴平铺，参考笛卡尔坐标
     plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z,0.0),
     // dimensions属性设置面的长度和宽度
     dimensions: new Cesium.Cartesian2(500,300),
     // 背景图片
     material:"../../lib/image/ui.jpg",
     // 是否显示边框
     outline:true,
     outlineColor: Cesium.Color.BLACK
   },
   //用于设置选定对象的显示信息，可以直接用HTML标签，包裹后可直接传到页面中
   description:`<div>
     <img width="100%" height="250px" src="../../lib/image/ui.jpg" />
     <h3>欢迎来到</h3>
     <h3>长沙</h3>
     </div>`
 })

 // 先定义一个变量，用于存储实例,ScreenSpaceEventHandler方法创建了一个屏幕控制实例
 // 获取scene下的所有canvas创建的元素
 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
 // 再使用setInputAction方法进行监听：它可以用于监听各种点击、移入事件
 // 第一个参数放入回调函数，第二个参数录入的是我们监听的具体是鼠标哪个事件
 handler.setInputAction(function(mobement){
   // 通过viewer.scene.pick可以获取到点击的对象
   var pick = viewer.scene.pick(movement.position)
   // 先确定他的位置信息是否为空并要同时满足当前获取对象的id号是否和之前绑定的一致
   if(Cesium.defined(pick) && (pick.id.id === 'planeLogo')){
     alert('欢迎来到长沙')
   }
   // 监听鼠标左键点击事件
 },Cesium.ScreenSpaceEventType.LEFT_CLICK)

效果图：