零、技术选型及相关网址

技术选型：Vue2、VueCli5、Cesium.js、天地图
相关网址：三维服务 - 天地图 帮助文档

一、cesium 初始化参数解析

initializeCesium() {this.viewer = new Cesium.Map("cesiumContainer", {shouldAnimate: true, // 是否启用动画效果。selectionIndicator: false, // 是否显示选中指示器。baseLayerPicker: false, // 是否显示底图选择器。fullscreenButton: false, // 是否显示全屏按钮。geocoder: false, // 是否显示地理编码器（用于地址搜索）。homeButton: false, // 是否显示“回到初始视角”的按钮。infoBox: false, // 是否显示信息框。sceneModePicker: false, // 是否显示场景模式选择器（2D、3D、哥伦布视图）。timeline: false, // 是否显示时间线。navigationHelpButton: false, // 是否显示导航帮助按钮。navigationInstructionsInitiallyVisible: false, // 是否初始显示导航指示。showRenderLoopErrors: false, // 是否显示渲染循环错误。shadows: false, // 是否渲染阴影。});
}

二、配置相关属性

setupConfigProp() {// 抗锯齿。this.viewer.scene.fxaa = false;// 禁用快速近似抗锯齿(FXAA)后处理阶段。this.viewer.scene.postProcessStages.fxaa.enabled = false;if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {// 判断是否支持图像渲染像素化处理this.viewer.resolutionScale = window.devicePixelRatio;}// 启用地球大气层效果（如地平线上的光晕）。this.viewer.scene.globe.showGroundAtmosphere = true;// 设置相机的最大俯仰角度，这里设置为-20度（弧度制）。this.viewer.scene.screenSpaceCameraController.constrainedPitch =Cesium.Math.toRadians(-20);// 禁用相机在视角重置时自动调整俯仰和方向。this.viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;// 设置相机缩放的惯性，0.5 表示中等惯性。this.viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;// 设置相机允许的最小缩放距离，单位米。this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;// 设置相机允许的最大缩放距离，单位米。this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;// 定义相机缩放的触发事件类型。this.viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.RIGHT_DRAG, // 右键拖拽Cesium.CameraEventType.WHEEL, // 鼠标滚轮Cesium.CameraEventType.PINCH, // 触摸屏捏合];// 定义相机倾斜的触发事件类型。this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, // 中键拖拽Cesium.CameraEventType.PINCH, // 触摸屏捏合{eventType: Cesium.CameraEventType.LEFT_DRAG,modifier: Cesium.KeyboardEventModifier.CTRL,}, // 按住 CTRL 键的同时左键拖拽{eventType: Cesium.CameraEventType.RIGHT_DRAG,modifier: Cesium.KeyboardEventModifier.CTRL,}, // 按住 CTRL 键的同时右键拖拽];
}

三、叠加影像服务

setupImageryLayers() {// 叠加影像服务(通过使用指定的URL模板请求图块来提供图像)const imgMap = new Cesium.UrlTemplateImageryProvider({url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,subdomains: subdomains,tilingScheme: new Cesium.WebMercatorTilingScheme(),maximumLevel: 18,});this.viewer.imageryLayers.addImageryProvider(imgMap);// 叠加国界服务const iboMap = new Cesium.UrlTemplateImageryProvider({url: tdtUrl + "DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + token,subdomains: subdomains,tilingScheme: new Cesium.WebMercatorTilingScheme(),maximumLevel: 10,});this.viewer.imageryLayers.addImageryProvider(iboMap);
},

四、点击事件、双击事件

setupEventHandlers() {// 取消默认的双击事件this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);// 添加鼠标点击事件监听器const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);handler.setInputAction((click) => {const earthPosition = this.viewer.scene.pickPosition(click.position);if (Cesium.defined(earthPosition)) {const cartographic = Cesium.Cartographic.fromCartesian(earthPosition);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);const height = cartographic.height; // 获取高度信息console.log(`经度: ${longitude}, 纬度: ${latitude}, 高度: ${height}`);// 在这里可以根据经纬度进行进一步的处理}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},

鼠标点击事件输入为：

五、相机飞行位置

flyToPosition() {// 将三维球定位到中国this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees( 121.28148939885521, 30.702808303473166, 700 ),orientation: {heading: Cesium.Math.toRadians(334.8202942851978),pitch: Cesium.Math.toRadians(-45),roll: Cesium.Math.toRadians(0),},complete: function callback() {// 定位完成之后的回调函数},});
}

六、叠加三维地名服务

// 叠加三维地名服务
addGeoWTFS() {// 叠加三维地名服务const wtfs = new Cesium.GeoWTFS({viewer: this.viewer,//三维地名服务，使用wtfs服务subdomains: cesiumConfig.subdomains,metadata: {boundBox: {minX: -180,minY: -90,maxX: 180,maxY: 90,},minLevel: 1,maxLevel: 20,},depthTestOptimization: true,dTOElevation: 15000,dTOPitch: Cesium.Math.toRadians(-70),aotuCollide: true, //是否开启避让collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左serverFirstStyle: true, //服务端样式优先labelGraphics: {font: "28px sans-serif",fontSize: 28,fillColor: Cesium.Color.WHITE,scale: 0.5,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,style: Cesium.LabelStyle.FILL_AND_OUTLINE,showBackground: false,backgroundColor: Cesium.Color.RED,backgroundPadding: new Cesium.Cartesian2(10, 10),horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.TOP,eyeOffset: Cesium.Cartesian3.ZERO,pixelOffset: new Cesium.Cartesian2(5, 5),disableDepthTestDistance: undefined,},billboardGraphics: {horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.CENTER,eyeOffset: Cesium.Cartesian3.ZERO,pixelOffset: Cesium.Cartesian2.ZERO,alignedAxis: Cesium.Cartesian3.ZERO,color: Cesium.Color.WHITE,rotation: 0,scale: 1,width: 18,height: 18,disableDepthTestDistance: undefined,},});// 三维地名服务，使用wtfs服务wtfs.getTileUrl = function () {return (cesiumConfig.tdtUrl +"mapservice/GetTiles?lxys={z},{x},{y}&tk=" +cesiumConfig.token);};// 三维图标服务wtfs.getIcoUrl = function () {return (cesiumConfig.tdtUrl +"mapservice/GetIcon?id={id}&tk=" +cesiumConfig.token);};wtfs.initTDT([{x: 6,y: 1,level: 2,boundBox: { minX: 90, minY: 0, maxX: 135, maxY: 45 },},{x: 7,y: 1,level: 2,boundBox: { minX: 135, minY: 0, maxX: 180, maxY: 45 },},{x: 6,y: 0,level: 2,boundBox: { minX: 90, minY: 45, maxX: 135, maxY: 90 },},{x: 7,y: 0,level: 2,boundBox: { minX: 135, minY: 45, maxX: 180, maxY: 90 },},{x: 5,y: 1,level: 2,boundBox: { minX: 45, minY: 0, maxX: 90, maxY: 45 },},{x: 4,y: 1,level: 2,boundBox: { minX: 0, minY: 0, maxX: 45, maxY: 45 },},{x: 5,y: 0,level: 2,boundBox: { minX: 45, minY: 45, maxX: 90, maxY: 90 },},{x: 4,y: 0,level: 2,boundBox: { minX: 0, minY: 45, maxX: 45, maxY: 90 },},{x: 6,y: 2,level: 2,boundBox: { minX: 90, minY: -45, maxX: 135, maxY: 0 },},{x: 6,y: 3,level: 2,boundBox: { minX: 90, minY: -90, maxX: 135, maxY: -45 },},{x: 7,y: 2,level: 2,boundBox: { minX: 135, minY: -45, maxX: 180, maxY: 0 },},{x: 5,y: 2,level: 2,boundBox: { minX: 45, minY: -45, maxX: 90, maxY: 0 },},{x: 4,y: 2,level: 2,boundBox: { minX: 0, minY: -45, maxX: 45, maxY: 0 },},{x: 3,y: 1,level: 2,boundBox: { minX: -45, minY: 0, maxX: 0, maxY: 45 },},{x: 3,y: 0,level: 2,boundBox: { minX: -45, minY: 45, maxX: 0, maxY: 90 },},{x: 2,y: 0,level: 2,boundBox: { minX: -90, minY: 45, maxX: -45, maxY: 90 },},{x: 0,y: 1,level: 2,boundBox: { minX: -180, minY: 0, maxX: -135, maxY: 45 },},{x: 1,y: 0,level: 2,boundBox: { minX: -135, minY: 45, maxX: -90, maxY: 90 },},{x: 0,y: 0,level: 2,boundBox: { minX: -180, minY: 45, maxX: -135, maxY: 90 },},]);
}