cesium教程

2024-07-10 23:49| 来源: 网络整理| 查看: 265

老规矩先看效果

在这里插入图片描述解析：在Cesium里面，我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件：

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //Cesium.ScreenSpaceEventType.MOUSE_MOVE ：监听鼠标移动 handler.setInputAction(function(event) { }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); //其他鼠标事件监听 //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.WHEEL //鼠标滚轮事件 // handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //解除鼠标左键单击事件

实现显示高度，海拔，经纬度，的方法代码

show3DCoordinates() { //地图底部工具栏显示地图坐标信息 var coordinatesDiv = document.getElementById("map_coordinates"); if (coordinatesDiv) { coordinatesDiv.style.display = "block"; } else { coordinatesDiv = document.createElement("div"); coordinatesDiv.id = "map_coordinates"; coordinatesDiv.style.zIndex = "50"; coordinatesDiv.style.bottom = "1px"; coordinatesDiv.style.height = "29px"; coordinatesDiv.style.position = "absolute"; coordinatesDiv.style.overflow = "hidden"; coordinatesDiv.style.textAlign = "center"; coordinatesDiv.style.padding = '0 10px' coordinatesDiv.style.background = "rgba(0,0,0,0.5)" coordinatesDiv.style.left = "0"; coordinatesDiv.style.bottom = "0" coordinatesDiv.style.lineHeight = "29px"; coordinatesDiv.innerHTML = "暂无坐标信息"; document.getElementById(this.id).append(coordinatesDiv);//this.id为球的根节点 var handler3D = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); handler3D.setInputAction((movement) => { var pick = new Cesium.Cartesian2(movement.endPosition.x, movement.endPosition.y); if (pick) { var cartesian = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(pick), this.viewer.scene); if (cartesian) { //世界坐标转地理坐标（弧度） var cartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian); if (cartographic) { //海拔 var height = this.viewer.scene.globe.getHeight(cartographic); //视角海拔高度 var he = Math.sqrt(this.viewer.scene.camera.positionWC.x * this.viewer.scene.camera.positionWC.x + this.viewer.scene.camera.positionWC.y * this.viewer.scene.camera.positionWC.y + this.viewer.scene.camera.positionWC.z * this.viewer.scene.camera.positionWC.z); var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z); //地理坐标（弧度）转经纬度坐标 var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]; if (!height) { height = 0; } if (!he) { he = 0; } if (!he2) { he2 = 0; } if (!point) { point = [0, 0]; } coordinatesDiv.innerHTML = "视角高度:" + (he - he2).toFixed(2) + "米;;;;海拔高度:" + height.toFixed(2) + "米;;;;经度：" + point[0].toFixed(6) + ";;纬度：" + point[1].toFixed(6) + ""; } } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); } }

代码放在：https://github.com/weshmily/cesiumPDG

欢迎各位大佬点星星

作者作者: weshmily前端官网: 百度搜索(weshmily前端) CSDN博客:http://blog.csdn.net/qq_27118895 GitHub: https://github.com/weshmily 公众号:搜索"weshmilyqd"

【本文地址】

cesium教程

cesium教程

今日新闻

推荐新闻