首页 > 其他分享> 文章详细

cesium实现鹰眼地图效果

2022-03-03 09:03:22 阅读：259 来源： 互联网

标签：false viewer 地图鹰眼 ._ cesium 2.2 hawkEyeMap

文章目录

1.实现效果

在这里插入图片描述

2.实现方法

2.1实现思路

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

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

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

其中percentageChanged用于设置相机变化幅度才能发生事件监听。而changed则用于监听相机变化事件。
在这里插入图片描述

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);
    }

    // 同步主图与鹰眼地图
    _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();

标签：false,viewer,地图,鹰眼,._,cesium,2.2,hawkEyeMap
来源： https://blog.csdn.net/weixin_45782925/article/details/123109769

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9