记录步骤如下:
假设已经有了地图瓦片数据,无论是ArcGIS,还是百度、高德、天地图,在这个文章里,使用的是ArcGIS地图瓦片数据。ArcMap发布缓存地图服务后会在server的目录下生成切片数据。
1、复制_alllayers目录到IIS或者tomcat的服务器目录下,再了解下ArcGIS切片的目录结构。
2、在Conf.xml和conf.cdi文件中获取切片数据的参数信息。
3、自定义切片图层类。
define(["dojo/_base/declare",
"esri/layers/TiledMapServiceLayer",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TileInfo"], function (declare, TiledMapServiceLayer) {
return declare('customTileLyr',TiledMapServiceLayer, { //没定义类名,就以文件名为准 第一个参数是父类
constructor: function (baseUrl) {
this.url=baseUrl; //下面的参数信息参考2中的截图
this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
this.initialExtent = this.fullExtent = new esri.geometry.Extent(73.45100463562233, 18.159038005131432, 134.97679764650596, 53.531943152223576, this.spatialReference);
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {"x": -400.0, "y": 400.0},
"spatialReference": { "wkid": 4326 },
"lods": [
{"level": 0, "scale": 32000000, "resolution": 0.07614275218656896},
{"level": 1, "scale": 16000000, "resolution": 0.03807137609328448},
{"level": 2, "scale": 8000000, "resolution": 0.01903568804664224},
{"level": 3, "scale": 4000000, "resolution": 0.00951784402332112},
{"level": 4, "scale": 2000000, "resolution": 0.00475892201166056},
{"level": 5, "scale": 1000000, "resolution": 0.00237946100583028},
{"level": 6, "scale": 500000, "resolution": 0.00118973050291514}]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
return "http://localhost/_alllayers/" +
"L" + dojo.string.pad(level, 2, '0') + "/" +
"R" + dojo.string.pad(row.toString(16), 8, '0') + "/" +
"C" + dojo.string.pad(col.toString(16), 8, '0') + "." +
"png";
}
});
});
4、使用自定义图层类显示地图。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>本地瓦片地图</title> <style> html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; } </style> <script> var dojoConfig = { async: true, packages: [{ name: "js", location: location.pathname.replace(/\/[^/]*$/, '') + '/js' }] }; </script> <link rel="stylesheet" href="http://localhost/arcgis_api_v325/3.25/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://localhost/arcgis_api_v325/3.25/esri/css/esri.css"> <script type="text/javascript" src="http://localhost/arcgis_api_v325/3.25/init.js"></script> </head> <body> <div id="mapDiv"></div> <script type="text/javascript"> var map; require(["esri/map","js/customTiledLyr"], function (Map,customTiledLyr) { map=new Map("mapDiv"); var tileUrl='http://localhost/_alllayers/'; var customTileLyr = new customTiledLyr(tileUrl); map.addLayer(customTileLyr); }); </script> </body> </html>
对于其他本地瓦片地图,套路都是一样的。最终效果图如下: