天地图结合ArcGIS api for JavaScript实现点聚合ClusterLayer
2015-12-01 09:21
441 查看
最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些GIS功能.个人觉得,天地图API简单易上手,连我这个菜鸟看几个示例代码都能快速的做出包含地图的网站.只是,目前的天地图,基本上只有数据,没有GIS相关的esri的东西.
网上看了esri的ClusterLayer的示例代码,网址如下: https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html 以及根据国内一些技术牛人写的文章,进行修改.由于是相当菜的菜鸟,可能出问题的地方相当多,相当纠结的一点点排查.
问题1:天地图不显示
天地图的类库之前测试正常,在ClusterLayer中却不显示.经逐行调试,发现将天地图的类库与clusterLayer中的类库在一起require时,出现了奇怪的指向问题.调试过程中,天地图的类库没有正确指向自己写的代码,却指向了未知的esri的代码.后来将天地图在独立的require块中添加,地图显示正常.
问题2:clusterLayer不显示
这个问题相当之蛋疼.基本上把esri的clusterLayer的代码都看了一遍之后,发现
问题2.1 在天地图页面中,无论怎么缩放,clusterLayer中clusters的个数与原始数据的个数是一致的,没有出现随着缩放而聚合的效果(这里说的效果是数据层面的,既聚合的个数不是显示层面的,因为数据不显示....),经仔细调试,发现_clusterResolution值与ersi提供的示例代码中的值差好很多个数量级.进一步追踪,发现是map.extent.getWidth()值相当之小,只有个位数.进一步核查发现,esri的示例代码中底图数据是arcgisonline的图,其空间参考为webMercator,wkid:102100.而封装好的ArcGIS
JavaScript版的天地图的空间参考为wgs84,wkid:4326.因此,在clusterLayer中,map.extent.getWdith()就出现了及其小的问题,导致了后续的聚类异常。
解决方法:在ClusterLayer中,将_clusterResolution改为如下:
修改完成之后,再源数据层面,可以看到clusters的个数随着缩放而在动态的改变着.
问题2.2 clusterlayer不显示. 上述问题解决之后,地图中仍然没有出现聚合点.在代码中百般调试,百般推测,百般琢磨,并在界面中输出了clusterLayer中的核心的参数,比如graphics.length等,发现结果都是正常的,就是没有显示聚合点.以为天地图的某种显示机制与Graphics有某种冲突,就自己添加了一些Graphics,图层中也是显示正常的.纠结了近一天,晚上突然想明白,还是坐标系的问题!官方给的ClusterLayer是基于webMercator投影的,因此,聚合之后的点簇的坐标,仍然是WebMercator的,由于示例代码中给的ArcGISOnline的图也是基于webMercator的,所以,点能正常显示.而网上的天地图封装类库是基于wgs84的经纬度坐标.所以,经过聚合之后的点簇坐标,就无法显示了,因为远远超出了经纬度的坐标范围.
解决方法:将聚合之后的点簇坐标,再转换为wgs84的坐标,即可.在ClusterLayer中修改如下函数:
纠结了N久的问题,终于解决!
转自:http://www.mamicode.com/info-detail-613651.html
网上看了esri的ClusterLayer的示例代码,网址如下: https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html 以及根据国内一些技术牛人写的文章,进行修改.由于是相当菜的菜鸟,可能出问题的地方相当多,相当纠结的一点点排查.
问题1:天地图不显示
天地图的类库之前测试正常,在ClusterLayer中却不显示.经逐行调试,发现将天地图的类库与clusterLayer中的类库在一起require时,出现了奇怪的指向问题.调试过程中,天地图的类库没有正确指向自己写的代码,却指向了未知的esri的代码.后来将天地图在独立的require块中添加,地图显示正常.
问题2:clusterLayer不显示
这个问题相当之蛋疼.基本上把esri的clusterLayer的代码都看了一遍之后,发现
问题2.1 在天地图页面中,无论怎么缩放,clusterLayer中clusters的个数与原始数据的个数是一致的,没有出现随着缩放而聚合的效果(这里说的效果是数据层面的,既聚合的个数不是显示层面的,因为数据不显示....),经仔细调试,发现_clusterResolution值与ersi提供的示例代码中的值差好很多个数量级.进一步追踪,发现是map.extent.getWidth()值相当之小,只有个位数.进一步核查发现,esri的示例代码中底图数据是arcgisonline的图,其空间参考为webMercator,wkid:102100.而封装好的ArcGIS
JavaScript版的天地图的空间参考为wgs84,wkid:4326.因此,在clusterLayer中,map.extent.getWdith()就出现了及其小的问题,导致了后续的聚类异常。
解决方法:在ClusterLayer中,将_clusterResolution改为如下:
if (map.spatialReference.isWebMercator()) { this._clusterResolution = map.extent.getWidth() / map.width; // probably a bad default... } else { //WGS 84坐标,转换为web Mercator var latlng1 = new Point(map.extent.xmax, map.extent.ymax, map.spatialReference); //右上角 var latlng2 = new Point(map.extent.xmin, map.extent.ymin, map.spatialReference); //左下角 var webMercator1 = webMercatorUtils.geographicToWebMercator(latlng1); var webMercator2 = webMercatorUtils.geographicToWebMercator(latlng2); this._clusterResolution = (webMercator1.x - webMercator2.x) / map.width; }
修改完成之后,再源数据层面,可以看到clusters的个数随着缩放而在动态的改变着.
问题2.2 clusterlayer不显示. 上述问题解决之后,地图中仍然没有出现聚合点.在代码中百般调试,百般推测,百般琢磨,并在界面中输出了clusterLayer中的核心的参数,比如graphics.length等,发现结果都是正常的,就是没有显示聚合点.以为天地图的某种显示机制与Graphics有某种冲突,就自己添加了一些Graphics,图层中也是显示正常的.纠结了近一天,晚上突然想明白,还是坐标系的问题!官方给的ClusterLayer是基于webMercator投影的,因此,聚合之后的点簇的坐标,仍然是WebMercator的,由于示例代码中给的ArcGISOnline的图也是基于webMercator的,所以,点能正常显示.而网上的天地图封装类库是基于wgs84的经纬度坐标.所以,经过聚合之后的点簇坐标,就无法显示了,因为远远超出了经纬度的坐标范围.
解决方法:将聚合之后的点簇坐标,再转换为wgs84的坐标,即可.在ClusterLayer中修改如下函数:
_showAllClusters: function () { var tp; if (map.spatialReference.isWebMercator()) { //map为WebMercator坐标系 tp="webm"; } else { //map为非WebMercator坐标系 tp="nowebm"; } for (var i = 0, il = this._clusters.length; i < il; i++) { var c = this._clusters[i]; this._showCluster(c,tp); } }, _showCluster: function (c, tp) { var point if (tp == "webm") { point = new Point(c.x, c.y, this._sr); } else { var latlng = new Point(parseFloat(c.x), parseFloat(c.y), this._sr); point = webMercatorUtils.webMercatorToGeographic(latlng); } this.add( new Graphic( point, null, c.attributes ) );
纠结了N久的问题,终于解决!
转自:http://www.mamicode.com/info-detail-613651.html
相关文章推荐
- js跨域请求数据的3种常用的方法
- JS 时间转换为时间戳函数
- JavaScript使用DeviceOne开发实战(二) 生成调试安装包
- JSP/Servlet及相关技术详解
- js显示隐藏层
- [Javascript] Advanced Reduce: Common Mistakes
- Javascript如何获取选中checkbox的值
- Javascript操作DOM常用API总结
- 6种javascript显示当前系统时间代码
- 超全的js正则表达式整理笔记
- js跨域请求数据的3种常用的方法
- 深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
- javascript定义类和类的实现实例详解
- 详解JavaScript函数
- 常见JS验证脚本汇总
- 基于JavaScript操作DOM常用的API小结
- JS验证邮件地址格式方法小结
- js获取及判断键盘按键的方法
- 整理Javascript函数学习笔记
- JavaScript保留关键字汇总