地图框架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的概念，就是当前可见范围。于是沿着这个思路寻找，发现leaflet中有fitbounds和getbounds的接口，而cesium中有Rectangle的接口，那就开干吧。

cesium

var rectangle = viewer.camera.computeViewRectangle();

// 弧度转为经纬度

var west =rectangle.west / Math.PI * 180;

var north = rectangle.north / Math.PI * 180;

var east = rectangle.east / Math.PI * 180;

var south = rectangle.south / Math.PI * 180;
使用leaflet的fitbounds接口，西北、东南传入参数即可。

leaflet

使用getbounds接口，获取四至，当然，需要转成度。然后用cesium.Rectanle传入参数即可。

注意，东南西北参数的对应

三 总结

代码写完基本就忘，因为这都不是核心。发现问题、提出问题、界定问题、解决问题的能力，无论是搞技术还是产品，这都是核心竞争力。

Cesium.Rectangle.fromDegrees(x1, y1, x2, y2)