Cesium应用篇:3控件(4)Geocoder

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

Cesium应用篇:3控件(4)Geocoder

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

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

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

Cesium应用篇:3控件(4)Geocoder

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

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

Cesium应用篇:3控件(4)Geocoder

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

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

Cesium应用篇:3控件(4)Geocoder

返回的结果如下:

Cesium应用篇:3控件(4)Geocoder

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

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

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

Cesium应用篇:3控件(4)Geocoder

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

Cesium应用篇:3控件(4)Geocoder

上一篇:Easyui+MVC+FullCalendar插件实现日程记录功能


下一篇:HDU1551&&HDU1064 Cable master 2017-05-11 17:50 38人阅读 评论(0) 收藏