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