cesium小场景鹰眼地图

一、基本需求

由于项目需要，用基于CEIUSM引擎和3DMAX建模搭建一个小区级别的三维场景，在导航时，需要实现鹰眼小地图。一看到鹰眼小地图，我们会很自然地想到用百度地图或者别的什么地图加一个小图标，然后三维场景与小地图坐标同步就可以了。但是这里我想直接用图片来实现，主要原因有：

（1）我的三维场景是随便放在一个地方的，并没有与小区真实坐标匹配；

（2）三用3DMX建模时，为了美观，建模师把建模范围做了一定 夸张。

（3）鹰眼的主要目的，并不是要实现很精准的定位，而是知道当前的大致位置。

基于以上三点，真的用地图来实现的话比较麻烦，而且在CESIUM上面再加载一个二维地图，效率并不一定好。而一个图片40K就搞定，在导航过程中不需要资源请求和加载。而且实现的效果比地图好。效果如下图（如果鹰眼地图中的小图标用闪烁的gif图标的话会好更好）：

二、方案与实现步骤

方案也很简单，就是在小区的正射图片上标注人头，人头的位置由三维场景中坐标通过计算得到。当三维场景中的人坐标变化时，实时更新图片中的人头的坐标即可。

右下角如何加载图片和人头图标，就不多了说了，是一个纯前端的技术。主要问题是：如何从三维场景的笛卡尔坐标（或经纬度坐标得到图片中人头的屏幕坐标）。下面是实现步骤。

（1）调整三维场景，把图片中的场景在三维场景中调整成正南正北的，这是最开始的一步，也是最关键的一步。这一步主要目的是把地理坐标的经度、纬度与屏幕坐标的x、y对应起来，即经度对应x，纬度对应y。这样就得到了三维场景往右时，经度越大，往上纬度越大的三维场景。如下图：

（2）获取图片，用于鹰眼底图。把调整好的正南正北场景，屏幕截图，需要多大底图范围、截多大图。其实还有更好的其它办法，目标就是得到一张鹰眼底而已。得到的图片用PS处理一下，主要是为了调整图片大小与DIV容器一样，调低图片质量，减少体积，提高加载速度。

（3）获取坐标，获取所截图中四个角点的经纬度坐标，如果鹰眼底图不是屏幕截图，找到对应点获取角点坐标也是一样的，坐标对应得越准确，计算出来的鹰眼坐标就越准确。

（4）计算坐标，假设得到的三维场景中四个角点的坐标为：左下角（x1,y1），左上角（x2,y2），右下角（x3,y3），右上角（x4,y4），(x0,y0)为需要计算的经纬度坐标。眼底图DIV宽为w，高为h。理论上来说，x1=x2，x3=x4，y1=y3，y2=y4。因为是用鼠标获取有坐标，一定是有偏差的，这会导致后面的计算误差。先不考虑误差。则得到人头在鹰眼上的坐标计算式为：

                                  left=(x3-x0)*w/(x3-x1)

                                  top=h-(y3-y0)*h/(y3-y1)

其中left、top就是人头像在CSS中的left、top。

（5）调整误差。别忘了，上面说到是有误差的，调整误差只需要调整计算式中w和h的值即可。

三、伪代码

计算部份代码如下：

  let wgs84 = Common.CoordinateTransform(position)
    let ox = 113.95329849138493
    let oy = 22.72536436186122
    let dlon = 385 / 0.010101131211357028
    let dlat = 280 / 0.0061121473857213005
    let dx = wgs84.x - ox
    let dy = wgs84.y - oy
    let returnData = {}
    returnData.left = dx * dlon
    returnData.top = 231 - dy * dlat
    return returnData

试验中，DIV的真实高度231，宽度是400。误差调整成280和385就得到了鹰眼效果。