一先了解切片服務的源頭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）點擊打開鏈接