前言
我们平时使用ArcGIS API加载地图服务时，一般使用的是ArcGIS Server发布的服务，在不利用开源Server的情况下，我们需要进行花一笔不小的费用来购买第三方Server，在项目较小，用不到Server深入的分析功能的时候，我们可以使用IIS或者Tomcat作为切片地图的服务器，通过扩展ArcGIS API的TiledMapServiceLayer类，实现地图的展示和基础功能。
水经注地图下载器下载地图
根据需求下载地图切片，下载的范围最好要大于所展示区域的范围，否则出现空白区区域的时候报地图访问不到的错误。选择如下配置：
选择不同级别的图层
将下载下来的地图png放在tomcat下
代码实现
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/3.26/esri/css/esri.css"><style>html,body,#map {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script type="text/javascript">var dojoConfig = {async: true,parseOnLoad: true,packages: [{name: "layer",location: location.pathname.replace(/\/[^/]*$/, '') + '/layer'}]};</script><script src="/3.26/"></script></head><body><div id="map"></div><script>require(["esri/map","esri/SpatialReference","esri/geometry/Point","layer/offlineLayer","dojo/domReady!"], function (Map,SpatialReference,Point,offlineLayer,) {var map = new Map("map");// var layer = new bdLayer("http://localhost:8080/map");var layer = new offlineLayer("http://localhost:8080/map");map.addLayer(layer);// var point = new Point(13033472.000000002, 4390911.999999999, new SpatialReference({ wkid: 102100 }));//// map.centerAndZoom(point,8);// map.spatialReference = new SpatialReference({//wkid: 4326// });// map.setLevel(7);map.on('click',function (evt) {console.log(evt.mapPoint.x);console.log(evt.mapPoint.y);var point11 = new Point(evt.mapPoint.x, evt.mapPoint.y, new SpatialReference({ wkid: 102100 }));console.log(point11.getLongitude());console.log(point11.getLatitude());});});</script></body></html>
扩展offlineLayer
define(["dojo/_base/declare","esri/geometry/Extent","esri/SpatialReference","esri/geometry/Point","esri/layers/TileInfo","esri/layers/TiledMapServiceLayer"], function(declare, Extent, SpatialReference, Point, TileInfo, TiledMapServiceLayer) {return declare("offlineLayer", TiledMapServiceLayer, {layerUrl:null,layertype: "road", //图层类型constructor: function(layerUrl) {this.spatialReference = new SpatialReference({wkid: 102100});this.layerUrl = layerUrl;// 图层提供的起始显示范围以及整个图层的地理范围this.fullExtent = new Extent(-7508.342787, -7508.342787, 7508.342787, 7508.342787, this.spatialReference);this.initialExtent = new Extent(8332087.700000003, 2516475.5500000007, 15332151.700000003, 5940731.550000001, this.spatialReference);// this.initialExtent = new Extent(5186359.700000003, 5840379.550000001, 12088119.700000003, 9162235.55, this.spatialReference);this.tileInfo = new TileInfo({"cols": 256,"rows": 256,"compressionQuality": 0,"origin": {// "x":-7508.342787,// "y":7508.342787"x":-16777360,"y":16802960},"spatialReference": this.spatialReference,"lods": [{"level": 0,"resolution": 131072,"scale": 131072 * 256},{"level": 1,"resolution": 65536,"scale": 65536 * 256},{"level": 2,"resolution": 32768,"scale": 32768 * 256},{"level": 3,"resolution": 16384,"scale": 16384 * 256},{"level": 4,"resolution": 8192,"scale": 8192 * 256},{"level": 5,"resolution": 4096,"scale": 4096 * 256},{"level": 6,"resolution": 2048,"scale": 2048 * 256},{"level": 7,"resolution": 1024,"scale": 1024 * 256},{"level": 8,"resolution": 512,"scale": 512 * 256},{"level": 9,"resolution": 256,"scale": 256 * 256},{ "level": 10,"resolution": 128,"scale": 128 * 256},{"level": 11,"resolution": 64,"scale": 64 * 256},{"level": 12,"resolution": 32,"scale": 32 * 256},{"level": 13,"resolution": 16,"scale": 16 * 256},{"level": 14,"resolution": 8,"scale": 8 * 256},{"level": 15,"resolution": 4,"scale": 4 * 256},{"level": 16,"resolution": 2,"scale": 2 * 256},{"level": 17,"resolution": 1,"scale": 1 * 256},{"level": 18,"resolution": 0.5,"scale": 0.5 * 256},{"level": 19,"resolution": 0.25,"scale": 0.25 * 256}]});this.loaded = true;this.onLoad(this);},/*** 根据不同的layType返回不同的图层* @param level* @param row* @param col* @returns {string}*/getTileUrl: function(level, row, col) {var url = "";var zoom = level - 1;var offsetX = Math.pow(2, zoom);var offsetY = offsetX - 1;var numX = col - offsetX;var numY = (-row) + offsetY;zoom = level + 1;var num = (col + row) % 8 + 1;url = this.layerUrl+'/'+(level+1)+"/"+numX+"/"+numY+".png";return url;}});});
