Cesium高级开发教程之四：鹰眼地图#leafLet

一、原理

实现鹰眼图的主要搭配方法是Cesium原生、Cesium-Leaflet、Cesium-OpenLayer三种方法。

本文以Cesium作为三维地球框架，以Leaflet作为二维地图框架，来实现鹰眼图的效果。

• 视图同步：通过监听 Cesium 视图变化事件，将相关信息传递给 Leaflet 视图，实现 Cesium 主地图与 Leaflet 鹰眼小地图的同步。同时，也监听 Leaflet 视图变化事件，将其同步到 Cesium 主地图，确保两者在操作时保持一致。例如，当在 Cesium 主地图上进行缩放、平移等操作时，Leaflet 鹰眼小地图会相应地更新显示范围和视角；反之，在鹰眼小地图上进行操作，主地图也会做出相应变化。
• 坐标转换：需要在 Cesium 的三维坐标系统和 Leaflet 的二维坐标系统之间进行转换。由于两者使用的坐标系统不同，要实现准确的同步，就需要通过特定的算法将 Cesium 中的坐标转换为 Leaflet 能够理解和处理的坐标，反之亦然。这样才能保证在不同地图上显示的位置和范围是对应的。

二、效果

二、代码

分别引入Cesium和Leaflet的JS和CSS。

    $(function () {
      initWork();
    })

    function initW