诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言.

最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些GIS功能.个人觉得,天地图API简单易上手,连我这个菜鸟看几个示例代码都能快速的做出包含地图的网站.只是,目前的天地图,基本上只有数据,没有GIS.

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改为如下:

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久的问题,终于解决!

菜鸟好痛苦,javaScript刚入门,dojo基本不会,ArcGIS JavaScript只浏览了下几个文档.一出问题,基本上上述所有的技术都可能是问题.