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: 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();

cesium实现鹰眼地图（三维）效果相关推荐

cesium实现二三维分屏地图同步效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2具体代码 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法实现方法与二维鹰眼地图类似,将二维地图与三维地图同步. 2. ...
cesium小场景鹰眼地图
一.基本需求由于项目需要,用基于CEIUSM引擎和3DMAX建模搭建一个小区级别的三维场景,在导航时,需要实现鹰眼小地图.一看到鹰眼小地图,我们会很自然地想到用百度地图或者别的什么地图加一个小图标, ...
CesiumForUnreal实现鹰眼地图（MiniMap）效果
文章目录 1.实现目标 2.实现过程 3.参考资料 1.实现目标基于CesiumForUnreal插件加载的在线地形和影像数据,使用Widget实现鹰眼小地图的效果,GIF动图如下: 2.实现过程 ...
[cesium] 卫星雷达传感器,雷达探测效果
前言整理了一下关于卫星视锥和雷达测控的三维效果. 包含视锥体,传感器,扫描探测等效果修改部分插件,支持最新版cesium 效果相控雷达传感器球形相控雷达传感器卫星传感波卫星视锥雷达跟踪 ...
Cesium开发：地下模式效果
主要是如何修改Cesium的源码,才能达到实现地下模式的效果. 修改完源码后,在执行地下模式的时候,设置地图的底色,要同步将地图影像进行半透明的操作,并且还要刷新一下影像图层,及时显示效果. //设置 ...
cesium 切换瓦片地图的加载方式
cesium 切换瓦片地图的加载方式如果你熟悉 cesium,那么你或多或少应该用过或者了解如何用 cesium 加载瓦片地图. 熟悉加载瓦片地图这本身不是一个太难的工作,一般来说,只要你照着官方的 ...
15.（cesium篇）cesium暗色系地图样式地图（滤镜实现，反色滤镜）
地图之家总目录(订阅之前请先查看该博客) 地图之家:cesium+leaflet+echart+地图数据+地图工具等相关内容的介绍文章末尾处提供保证可运行完整代码包,运行如有问题,可"私信 ...
Silverlight 参考：三维效果（透视转换） -- MSN
您可以使用"透视转换"来将三维效果应用于任何 Silverlight UIElement.例如,您可以制造这样一个假象,即对象朝向您或远离您进行旋转,如下图中所示. 使用透视转换的 ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...