1.定义canvas屏幕点击事件,scene.canvas指的是HTMLCanvasElement元素,也就是屏幕画的东西
2.注册鼠标事件
3.转换为不包含地形的笛卡尔坐标
4.转经纬度(弧度)坐标
5.添加圆点
//定义canvas屏幕点击事件,scene.canvas指的是HTMLCanvasElement元素,也就是屏幕画的东西
var handler = new Cesium.ScreenSpaceEventHandler(
this.viewer.scene.canvas
);
console.log(this.viewer.scene.canvas);
//<canvas>
console.log(Cesium.ScreenSpaceEventType);
// {
// LEFT_CLICK: 2; 左键点击事件
// LEFT_DOUBLE_CLICK: 3;左键双击事件
// LEFT_DOWN: 0;左键按下事件
// LEFT_UP: 1;左键抬起事件
// MIDDLE_CLICK: 12;滚轮点击
// MIDDLE_DOWN: 10;滚轮按下
// MIDDLE_UP: 11;滚轮抬起
// MOUSE_MOVE: 15;鼠标移动
// PINCH_END: 18;两指按下结束
// PINCH_MOVE: 19; 两指移动
// PINCH_START: 17;两指开始触碰
// RIGHT_CLICK: 7;右键点击事件
// RIGHT_DOWN: 5;右键按下事件
// RIGHT_UP: 6;右键抬起事件
// WHEEL: 16;
// }
//注册鼠标事件
let that = this; //handler内拿不到this 用that接下
handler.setInputAction(function (event) {
conosle.log(event)
//event {position: position:{x:123,y:123}}
// 转换为不包含地形的笛卡尔坐标
let clickPosition = that.viewer.scene.camera.pickEllipsoid(
event.position
);
console.log(clickPosition);
// clickPosition{x: 101877.1201414885, y: 4637106.646197382, z: 4363390.89501216}
// 转经纬度(弧度)坐标
let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
console.log(radiansPos);
// radiansPos{longitude: 1.6396749591249946, latitude: 0.7371487514224602, height:636749216566357e-9}
// 转角度
console.log("经度:"+Cesium.Math.toDegrees(radiansPos.longitude) +", 纬度:" +Cesium.Math.toDegrees(radiansPos.latitude)
);
// // 添加圆点
that.viewer.entities.add({
position: clickPosition, //圆点位置
point: {
color: Cesium.Color.RED, //圆点颜色
pixelSize: 20, //圆点大小
},
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function () {
console.log(点击了中键)
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
handler.setInputAction(function () {
console.log("双击了左键");
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
handler.setInputAction(function () {
//取消鼠标点击事件
// handler.destroy()
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
handler.setInputAction(function () {
//取消鼠标点击事件
handler.destroy();
console.log("双击了右键,取消全部事件");
}, Cesium.ScreenSpaceEventType.RIGHT_DOUBLE_CLICK);