cesium实现鹰眼地图（三维）效果

文章目录

1.实现效果2.实现方法2.1实现思路2.2具体实现2.2.1核心代码2.2.2样式设置2.2.3具体调用

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

2.1实现思路

在网上看了有关Cesium鹰眼地图实现的方法，发现分为两种，一种是使用leaflet，另一种是Cesium新建Viewer，这里使用cesium新建viewer的方式来实现鹰眼地图。

这里采用在鹰眼图中仅添加百度地图作为指引，并设置鹰眼地图的相机位置与主图完全一致。

参考官方API中的camera的percentageChanged方法和changed事件。

其中percentageChanged用于设置相机变化幅度才能发生事件监听。而changed则用于监听相机变化事件。

最近发现主图第一次刷新时鹰眼地图不会更新，这里是解决办法是使用scene的preRender事件监听：传送门

即在场景渲染前更新。

2.2具体实现

2.2.1核心代码

核心代码hawkEyeMap.js如下：

/** @Description: 鹰眼地图效果* @Version: 1.0* @Author: Julian* @Date: -02-25 16:23:36* @LastEditors: Julian* @LastEditTime: -02-26 12:40:35*/class HawkEyeMap {constructor(viewer) {this._viewer = viewer;this._hawkEyeMap = null;}// 初始化函数_init() {this._hawkEyeMap = new Cesium.Viewer('hawkEyeMap', {geocoder: false,homeButton: false,sceneModePicker: false,baseLayerPicker: false,navigationHelpButton: false,animation: false,timeline: false,fullscreenButton: false,});this._hawkEyeMap.cesiumWidget.creditContainer.style.display = 'none';this._hawkEyeMap.scene.backgroundColor = Cesium.Color.TRANSPARENT;this._hawkEyeMap.imageryLayers.removeAll();// 鹰眼图中添加高德路网中文注记图this._hawkEyeMap.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: "http://webrd02./appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",minimumLevel: 3,maximumLevel: 18}));// 引起事件监听的相机变化幅度this._viewer.camera.percentageChanged = 0.01;this._bindEvent();}// 绑定事件_bindEvent() {// 监听主图相机变化this._viewer.camera.changed.addEventListener(this._syncMap, this);// 第一次刷新渲染时联动（否则第一次鹰眼地图不会联动）this._viewer.scene.preRender.addEventListener(this._syncEyeMap, this);}// 同步主图与鹰眼地图_syncMap() {this._hawkEyeMap.camera.flyTo({destination: this._viewer.camera.position,orientation: {heading: this._viewer.camera.heading,pitch: this._viewer.camera.pitch,roll: this._viewer.camera.roll,},duration: 0.0,})}}

2.2.2样式设置

（1）首先需要设置鹰眼地图的div，才能使用Cesium添加viewer。

<div id="hawkEyeMap"></div>

（2）然后设置其样式

/* 鹰眼图样式 */#hawkEyeMap {position: absolute;left: 70%;top: 2%;border-radius: 50%;height: 160px;width: 160px;overflow: hidden;border: 2px solid #002FA7;}

2.2.3具体调用

（1）引入js文件

<!-- 引入鹰眼地图js --><script src="./demo/hawkEyeMap/hawkEyeMap.js"></script>

（2）初始化调用

// 鹰眼地图初始化let hawkEyeMap = new HawkEyeMap(viewer);hawkEyeMap._init();