Cesium 点击事件教程

点击事件 ·Click Event· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Cesium Viewer 初始化Cesium Entity 高层 APICesium 鼠标拾取交互Cesium 影像图层Cesium 动态材质属性效果说明点击地球表面或 Entity 时控制台输出经纬高或对 Entity 弹出提示。演示 Cesium 最基础的屏幕空间拾取流程。基础功能 · Cesium.js核心概念Viewer封装地球、相机、图层可关闭 animation/timeline 等 UI 精简界面。Entity加点线面、模型、标签适合业务对象与交互。ScreenSpaceEventHandler监听点击scene.pick取 EntitypickPosition取地表坐标。ImageryLayer叠加 XYZ/WMTS/ArcGIS 等底图imageryLayers.add/remove管理。实现步骤初始化Cesium.Viewer与底图图层添加 Entity / Primitive / DataSource 等业务对象配置 ScreenSpaceEventHandler 交互按需camera.flyTo定位视角代码要点import * as Cesium from cesiumconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮baseLayer: false, // 不显示默认图层fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框})const url GLOBAL_CONFIG.getLayerUrl() const layer Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(url))viewer.imageryLayers.add(layer)// 添加点击事件监听器 viewer.screenSpaceEventHandler.setInputAction(function (event) {const object viewer.scene.pick(event.position)const cartesian viewer.scene.pickPosition(event.position)if (Cesium.defined(cartesian)) {const cartographic Cesium.Cartographic.fromCartesian(cartesian)const longitude Cesium.Math.toDegrees(cartographic.longitude)const latitude Cesium.Math.toDegrees(cartographic.latitude)const height cartographic.heightconsole.log(经度, longitude, 纬度, latitude, 高度, height)}if (Cesium.defined(object)) {const { id } objectalert(点击到的对象 id.name -----id id.id) }}, Cesium.ScreenSpaceEventType.LEFT_CLICK)// 视角定位到中国 viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 10000000)})// 测试点 const point viewer.entities.add({name: 测试点,id: 点-id,position: Cesium.Cartesian3.fromDegrees(116.39, 39.9),point: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2}})// 测试面 const polygon viewer.entities.add({name: 测试多边形,id: 多边形-id,polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray([90.38, 30.91,80.38, 30.89,100.4, 39.89,105.4, 39.91]),material: Cesium.Color.RED.withAlpha(0.5)}})// 测试线 const polyline viewer.entities.add({name: 测试线段,id: 线段-id,polyline: {positions: Cesium.Cartesian3.fromDegreesArray([116.41, 36.91,100.41, 30.89]),width: 20,material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.1,color: Cesium.Color.YELLOW})}})完整源码GitHub小结本文提供点击事件完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库