地图框架leaflet和cesium实现二三维联动

地图框架leaflet和cesium实现二三维联动

最近做个项目，要实现二三维联动。二维是基于leaflet的地图，三维是基于cesium，webgl的场景。要实现的是，平移、缩放二维地图时，三维跟着平移缩放，反过来也一样。

  一  问题界定

总体看，一共三个问题。

1 要解决二维三维循环联动的问题。就是说，不能拖动二维，三维跟着动，然后二维再跟着三维动，无限循环。

2 二维和三维的平移联动

3 二维和三维的缩放联动

二  问题解决

1 使用flag，鼠标进入二维div时，flag为true，进入三维时为false。使用onmouseover事件

2 这个比较简单，但注意坐标转换，cesium中需要将二维传过来的经纬度转为笛卡尔坐标，使用Cartesian3.fromDegrees接口

3 本文讨论的重点：

问题3的难点在于，leallet中的zoom和cesium中的height，这显然不是一个概念，那么常规的想法就是将zoom和height建立起联系。最简单粗暴的就是多观测几组zoom和height的对应值，然后用最小二乘法等回归算法进行拟合。但对于我这种懒人，这方法实在太麻烦、太“业余”，而且进一步想想，zoom是离散型变量，height是连续型的，即使拟合出了联系，效果也不会很好的，于是这个方案pass掉。

那么就开动脑筋想想其他方案。zoom和height对应是最直观的方式，但是除此之外，在相同视角下，二维地图和三维地图的范围应当一致。无论是二维和三维地图，一定都有extent的概念，就是当前