Cesium中实现鹰眼图

鹰眼图实现

提示：这里可以添加本文要记录的大概内容：

实现右下角鹰眼地图的实现，并且与主地图同步。

一、实现效果

二、实现代码

1.创建Overview.js文件

完整代码如下：

import AmapMercatorTilingScheme from "../correct/AmapMercatorTilingScheme.js";
import * as Cesium from 'cesium';

class HawkEyeMap {
    constructor(viewer) {
        this._viewer = viewer;
        this._hawkEyeMap = null;
        this._init(); // 在构造函数中直接调用 _init() 方法
    }

    // 初始化函数
    _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,
                tilingScheme: new AmapMercatorTilingScheme(),
            })
        );
        // 引起事件监听的相机变化幅度
        this._viewer.camera.percentageChanged = 0.01;
        this._bindEvent();
    }

    // 绑定事件
    _bindEvent() {
        // 监听主图相机变化
        this._viewer.camera.changed.addEventListener(this._syncMap.bind(this)); 
        this._viewer.scene.preRender.addEventListener(this._syncEyeMap.bind(this)); 
    }
    _syncMap() {
        // 直接设置相机位置和姿态，而不是使用 flyTo 方法
        this._hawkEyeMap.camera.setView({
            destination: this._viewer.camera.positionWC,
            orientation: {
                heading: this._viewer.camera.heading,
                pitch: this._viewer.camera.pitch,
                roll: this._viewer.camera.roll,
            }
        });
    }
    // 同步鹰眼地图
    _syncEyeMap() {
        this._hawkEyeMap.scene.requestRender(); 
    }
}
export default HawkEyeMap;

2.对js文件进行调用与初始化

import HawkEyeMap from "../js/Overview/Overview.js"  
   
let hawkEyeMap = ref(null);
hawkEyeMap.value = new HawkEyeMap(viewer);

---

总结

本片文章主要在于自己学习总结、记录。