cesium 实战系列之鹰眼地图
看到这个题目可能有些小伙伴可能会问了怎么又是鹰眼地图之前不是说过一次鹰眼地图吗是的没错之前是说过鹰眼地图但是之前的案例是鹰眼地图实时跟随飞机视角飞行这次说的鹰眼地图略有不同讲的是鹰眼地图随着主地图的移动而移动随着主地图的缩放而同步缩放之前的案例放在飞机飞行中会有局限性这次说的案例就更为常见应用范围也更广。效果鹰眼跟随代码实现分别创建主地图与鹰眼地图容器、初始化地图这部分与前文提到的过程并无二致。主地图template div classmap-content div idcesiumContainer/div /div /template script export default { mounted() { this.$nextTick(() { cesiumMapInit(); }); }, }; /scriptfunction cesiumMapInit() { //初始化cesium三维地球 Cesium.Ion.defaultAccessToken xxxxxxx; viewer new Cesium.Viewer(cesiumContainer, { geocoder: false, sceneModePicker: false, baseLayerPicker: false, navigationHelpButton: false, animation: false, skyBox: false, //隐藏天空盒 shouldAnimate: true, timeline: true, homeButton: false, //是否显示Home按钮 fullscreenButton: false, //是否显示全屏按钮 baseLayerPicker: false, //是否显示图层选择控件 geocoder: false, //是否显示地名查找控件 sceneModePicker: false, //是否显示投影方式控件 navigationHelpButton: false, //是否显示帮助信息控件 infoBox: false, //是否显示点击要素之后显示的信息 // terrainProvider : false, scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存 sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode selectionIndicator: false, // 隐藏双击entity时的选中框 orderIndependentTranslucency: false, // imageryProvider: Cesium.createWorldImagery(), imageryProvider: false, contextOptions: { webgl: { alpha: true, }, }, }); //隐藏logo viewer._cesiumWidget._creditContainer.style.display none; //隐藏大气圈及星空背景 viewer.scene.skyAtmosphere.brightShift -1; viewer.scene.backgroundColor new Cesium.Color(0.0, 0.0, 0.0, 0.0); viewer.scene.globe.baseColor new Cesium.Color(0.0, 0.0, 0.0, 0.0); ////判断是否支持图像渲染像素化处理 if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { viewer.resolutionScale window.devicePixelRatio; } viewer.scene.fxaa true; viewer.scene.postProcessStages.fxaa.enabled true; // 设置缩放的最大高度 viewer.scene.screenSpaceCameraController.minimumZoomDistance 100; viewer.scene.screenSpaceCameraController.maximumZoomDistance 50050000; //隐藏时间轴 viewer.timeline.container.style.display none; Douglas_P new DouglasPeucker(); //初始化图层控制器 layerControl new Cesium.layerControl(viewer.imageryLayers); layerControl.addBaseLayer( baseLayer, new Cesium.WebMapTileServiceImageryProvider({ url: TDT_IMG_C, layer: tdtImg_c, style: default, format: tiles, tileMatrixSetID: c, subdomains: [t0, t1, t2, t3, t4, t5, t6, t7], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, ], maximumLevel: 50, show: false, }) ); viewer.scene.skyAtmosphere.show false; //隐藏大气圈 viewer.scene.backgroundColor new Cesium.Color(0.0, 0.0, 0.0, 0.0); viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 23000000), orientation: { heading: Cesium.Math.toRadians(348.4202942851978), pitch: Cesium.Math.toRadians(-89.74026687972041), roll: Cesium.Math.toRadians(0), }, }); //初始化handler handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); }鹰眼地图template div classmap-content div idhawkEyeContainer2 /div /div /template script export default { mounted() { this.$nextTick(() { initViewMap2(); }); }, }; /script style langscss scoped .map-content { position: absolute; width: 96%; height: 96%; top: 2%; left: 2%; overflow: hidden; } #hawkEyeContainer2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 4; } /stylefunction initViewMap2(){ hawkEyeViewer2 new Cesium.Viewer(hawkEyeContainer2, { timeline: true, animation: false, navigation: false, geocoder: false, sceneModePicker: false, navigationHelpButton: false, skyBox: false, //隐藏天空盒 shouldAnimate: true, homeButton: false, //是否显示Home按钮 fullscreenButton: false, //是否显示全屏按钮 baseLayerPicker: false, //是否显示图层选择控件 navigationHelpButton: false, //是否显示帮助信息控件 infoBox: false, //是否显示点击要素之后显示的信息 // terrainProvider : false, scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存 selectionIndicator: false, // 隐藏双击entity时的选中框 orderIndependentTranslucency: false, // imageryProvider: Cesium.createWorldImagery(), imageryProvider: false, contextOptions: { webgl: { alpha: true, }, }, }); hawkEyeViewer2.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: TDT_IMG_C, layer: tdtImg_c, style: default, format: tiles, tileMatrixSetID: c, subdomains: [t0, t1, t2, t3, t4, t5, t6, t7], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, ], maximumLevel: 50, show: false, }) ); hawkEyeViewer2.sceneMode Cesium.SceneMode.SCENE2D; // 隐藏鹰眼图的相关控件只保留地图显示 hawkEyeViewer2.cesiumWidget.creditContainer.style.display none; //隐藏logo hawkEyeViewer2._cesiumWidget._creditContainer.style.display none; //隐藏大气圈及星空背景 hawkEyeViewer2.scene.skyAtmosphere.brightShift -1; hawkEyeViewer2.scene.backgroundColor new Cesium.Color(0.0, 0.0, 0.0, 0.0); hawkEyeViewer2.scene.globe.baseColor new Cesium.Color(0.0, 0.0, 0.0, 0.0); ////判断是否支持图像渲染像素化处理 if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) { hawkEyeViewer2.resolutionScale window.devicePixelRatio; } hawkEyeViewer2.scene.fxaa true; hawkEyeViewer2.scene.postProcessStages.fxaa.enabled true; // 设置缩放的最大高度 hawkEyeViewer2.scene.screenSpaceCameraController.minimumZoomDistance 100; hawkEyeViewer2.scene.screenSpaceCameraController.maximumZoomDistance 50050000; //隐藏时间轴 hawkEyeViewer2.timeline.container.style.display none; }然后在页面初始化、地图初始化结束后将两个地图定位到同一个位置viewer.camera.setView({ destination: Cesium.Rectangle.fromDegrees(116.81701689886864, 40.46263853921053, 116.97619523643587, 40.32489599191241) }); hawkEyeViewer2.camera.setView({ destination: Cesium.Rectangle.fromDegrees(116.81701689886864, 40.46263853921053, 116.97619523643587, 40.32489599191241) });然后监测主地图视角变化实时调整鹰眼地图视角下面代码直接复制执行即可。let lastCenter null; viewer.scene.postRender.addEventListener(() { const rect viewer.camera.computeViewRectangle(); if (rect) { const centerLon Cesium.Math.toDegrees((rect.west rect.east) / 2); const centerLat Cesium.Math.toDegrees((rect.south rect.north) / 2); const currentCenter { lon: centerLon, lat: centerLat }; if (!lastCenter || Math.abs(lastCenter.lon - currentCenter.lon) 0.001 || Math.abs(lastCenter.lat - currentCenter.lat) 0.001) { lastCenter currentCenter; const width Cesium.Math.toDegrees(rect.east - rect.west); const height Cesium.Math.toDegrees(rect.north - rect.south); const scale 10; // 比例根据现有代码调整 const halfWidth width / (2 * scale); const halfHeight height / (2 * scale); hawkEyeViewer2.camera.setView({ destination: Cesium.Rectangle.fromDegrees( centerLon - halfWidth, centerLat - halfHeight, centerLon halfWidth, centerLat halfHeight ) }); } } });
