Cesium应用篇：3控件（4）Geocoder

Geocoder是一个非常简单的控件，但也是非常常用且实用的控件，顾名思义，Geocoder就是地理编码的意思，而平常我们经常会查询一些地物，也就是常用的POI搜索，就是Geocoder的功劳。

 

 

首先，该控件支持经纬度定位，比如如下，是北京京洲世家小区的经纬度，输入后可以定位至该点，如上图所示。但是在天朝，有一种坐标叫做火星坐标。换句话说，如果你是在高德，百度等国内数据中获取的POI经纬度，该经纬度是经过偏移的，而我们的三维球通常都是用Bing，天地图等没有偏移的影像，这样就会导致地物的不匹配，还要，我们只需要纠偏POI就可以。范例里面有惊喜，自己看geocoder范例吧。

另外，Cesium采用的是Bing的地理编码和POI检索，需要Key，而且国内的数据，毕竟是中文检索，Bing在这点上有些水土不服的，所以，下面我们试着用SuperMap的POI服务来替代（当然，你也可以用其他的，比如高德，百度等，但需要申请Key，我申请了也不知道为何说我的plat不支持，想到范例的简单性，发现只有SuperMap的最简单易用，也算一个无奈之举吧。）

一个很不幸的事实是，Cesium没想到用户想要更换Geocoder的服务，所以并没有提供对应的接口来方便我们的扩展，不过，毕竟是JavaScript吗，只要深挖掘，什么都能替换之。

 

 

如上图，我们需要改写的就是searchCommand函数，尽管geocoder只提供了get接口。这里有两个逻辑，第一个就是geocode，就是POI的查询，另一个是正在查询的状态下，则会中断正在进行的查询操作。我们直接把GeocoderViewModel中的cancelGeocode函数拿来重用即可。而geocode则是需要重写的重点函数。

直接输入经纬度定位是很不错的功能，所以要保留，这段代码就留着。下面，就要开始替换Bing的POI检索了。先看看超图的POI检索服务：

 

 

输入京洲世家，为什么总要输入这个？总比输一个故宫博物院好吧。点击查询，我们就可以获取其对应的url和json结果。

知道了url的规范后，通过Cesium构造一个Promise来发送请求：

 

 

返回的结果如下：

 

 

有了返回值，我们就需要解析里面的内容，并讲这些POI信息构造成Entity，保存到Viewer中。同样，这里的经纬度是偏移后的，我们需要做一个纠偏处理。

这里还有一个小技巧，我们每次查询时，都需要清除上一次查询的对象，所以我们需要在Geocoder中保存一份当前查询POI的Entity对象，方便下次查询后的删除，而删除是通过id的，所以需要付给一个唯一的ID值，我觉得通过Clock获取当前时间是一个不错的方式。

另外，为了能够让Entity在点击时获取其描述信息，我们也需要指定Entity的description，在geocoder.html范例中，采用了最简单的ConstantProperty，如果对这一块不清楚的，可以参考InfoBox控件篇，里面对Property有一个较为详细的介绍。具体代码如下：

 

 

至此，我们对Geocoder有了一个较为详细的认识，同时也扩展Geocoder控件，能够指定其他的POI服务来满足自己的需要，并实现了对查询后的POI构造并管理Entity的功能，更好的展现查询后的结果。另外，由于火星坐标的原因，会有匹配不准确的情况，这里通过纠偏也解决了这一实际应用的问题。奉上一个范例的效果图，Geocoder的介绍就到这里。