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

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: 2022-02-25 16:23:36
 * @LastEditors: Julian
 * @LastEditTime: 2022-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.is.autonavi.com/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();