文章目录
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();