ArcGIS API for JavaScript 加载水经注离线地图

前言

    我们平时使用ArcGIS API加载地图服务时，一般使用的是ArcGIS Server发布的服务，在不利用开源Server的情况下，我们需要进行花一笔不小的费用来购买第三方Server，在项目较小，用不到Server深入的分析功能的时候，我们可以使用IIS或者Tomcat作为切片地图的服务器，通过扩展ArcGIS API的TiledMapServiceLayer类，实现地图的展示和基础功能。

水经注地图下载器下载地图

    根据需求下载地图切片，下载的范围最好要大于所展示区域的范围，否则出现空白区区域的时候报地图访问不到的错误。选择如下配置：

    选择不同级别的图层

    将下载下来的地图png放在tomcat下

代码实现

    index.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(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.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":-20037508.342787,
                    // "y":20037508.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;
        }
    });
});

实现效果