cesium 鹰眼 (2D或3D地图与2D鹰眼联动)

原创

已于 2022-12-19 17:39:03 修改 · 1.5k 阅读

标签

#前端

收录于

于 2022-07-05 09:21:20 首次发布

本文介绍如何在Cesium中实现三维地球视图与二维鹰眼视图的联动效果。通过监听三维视图变化，并调整二维鹰眼地图的位置与缩放级别，使两者保持同步。同时展示了如何加载高德地图作为底图。

我把初始位置定位到了中国,效果如下:

这是三维地球与二维鹰眼联动

这是二维地图与二维鹰眼联动:

三维与三维联动的网上有很多,而且目前暂时没有这个需求,所以这里省略

主要代码如下,个别地方不太完善,但基本实现效果

首先,在你要放置鹰眼的地方写一个div

<div id="eagleEye" class="eagleEye"></div>

.eagleEye {
  position: absolute;
  width: 18%;
  height: 20%;
  bottom: 0;
  right: 0;
  z-index: 999;
  background: red;
  border: solid blue 1px;
}

定义一个viewer1,初始化鹰眼地图

viewer1 = new Cesium.Viewer("eagleEye", {
        geocoder: false, //搜索框
        animation: false, //左下角的动画控件的显示
        shouldAnimate: false, //控制模型动画
        timeline: false, //底部的时间轴
        ful