对一个之前一直做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只浏览了下几个文档.一出问题,基本上上述所有的技术都可能是问题.