一先了解切片服务的源头TiledMapServiceLayer
TiledMapServiceLayer类是一切切片服务的源头，该类是一个抽象类，只能被子类来实例化，但是它却了方位切片服务所需要的方法，下面看看该类的属性和方法：
| 属性 | 说明 |
|---|---|
| fullExtent | 地图服务的范围 |
| initExtent | 地图服务的初始范围 |
| spatialReference | 地图服务的空间参考 |
| tileInfo | 瓦片信息，该类包含切片的信息 |
| 方法 | 说明 |
| getTileUrl | 获取每一个切片的URl,这个方法是当地图移动，放大缩小的时候会发生，然后获取每一个切片的并获得图片进行显示 |
二定义一个类继承该抽象类
define(["dojo/_base/declare",
"esri/layers/tiled"],
function (declare) {
return declare(esri.layers.TiledMapServiceLayer, {
_maptype:"",
constructor: function (maptype) {
this._maptype = maptype;
this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {
"x": -180,
"y": 90
},
"spatialReference": {
"wkid": 4326
},
"lods": [
{ "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
{ "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
{ "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
{ "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
{ "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
{ "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
{ "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
{ "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
{ "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
{ "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
{ "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
{ "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
{ "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
{ "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
{ "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
{ "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
{ "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
return "http://t" + col % 8 + ".tianditu.cn/"+this._maptype+"_c/wmts?"+
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER="+this._maptype+
"&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" +
level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
}
});
});关于那个getTileurl函数中返回的地址为何这么拼接
上面红框中的地址，复制打开浏览器，然后F12在网络（这里火狐浏览器）中获取header中的请求地址就可以知道为什么这么拼接了。
三、模块的引用示例
var path = this.location.pathname.replace(//[^/]+$/, "");
var dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "MapCluster",
"location": path + "/lib"
} ]
};不懂怎么引用模块看这点击打开链接
四、注册map的load事件
map.on("Load", function () {
addClusterLayer(county.items);
});五、addClusterLayer函数的封装
function addClusterLayer(items) {
var countyInfo = {};
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);
var clusterResolution = (webMercator1.x - webMercator2.x) / map.width;
countyInfo.data = arrayUtils.map(items, function (item) {
var latlng = new Point(parseFloat(item.x), parseFloat(item.y), map.spatialReference);
var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
var attributes = {
"省份": item.attribute.proname,
"proCode": item.procode,
"市名": item.attribute.name,
"lng": item.x,
"lat": item.y
};
return {
"x": webMercator.x,
"y": webMercator.y,
"attributes": attributes
};
});
clusterLayer = new ClusterLayer({
"data": countyInfo.data,
"distance": 100,
"id": "clusters",
"labelColor": "#333374",
"labelOffset": 16,
"singleColor": "#888",
"resolution": clusterResolution,
"spatialReference": new SpatialReference({ "wkid": 4326 })
});
//下面是设置聚合效果模型，根据聚合的点数来分三个等级，不同等级用不同的大小以及颜色图标来表示，0-2为蓝色；2-200为绿色；200-1001为红色
var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var picBaseUrl = "lib/";
var blue = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker.png", 32, 32).setOffset(0, 15);
var green = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker-1.png", 64, 64).setOffset(0, 15);
var red = new esri.symbol.PictureMarkerSymbol(picBaseUrl + "Marker-2.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 2, blue);
renderer.addBreak(2, 100, green);
renderer.addBreak(100, 200, red)
clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);
map.on("click", cleanUp);
map.on("key-down", function (e) {
if (e.keyCode === 27) {
cleanUp();
}
});
}六、cleanUp函数的封装
function cleanUp() {
map.infoWindow.hide();
clusterLayer.clearSingles();
}七、总结
ClusterLayer.js这个文件是要改的，否则无法加载出来，唯一让我感觉恶心的这个map的load事件是真的恶心，图标在阿里下载的真的丑（是我自己做的丑）后面的继续改进
八、最终效果
数据下载（ClusterLayer.js和data.js）点击打开链接