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

我会带着你远行 2021-09-17 10:28 532阅读 0赞

### 前言 ###

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

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

根据需求下载地图切片，下载的范围最好要大于所展示区域的范围，否则出现空白区区域的时候报地图访问不到的错误。选择如下配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]  
    选择不同级别的图层  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70 1]  
    将下载下来的地图png放在tomcat下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70 2]

### 代码实现 ###

####     index.html ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://js.arcgis.com/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="https://js.arcgis.com/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(-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;
            }
        });
    });

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/4c869f2550e74e489dcaf0c8a6e3259b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70 1]: /images/20210726/8f466efe93bf4c6faa869b64fe5d2109.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70 2]: /images/20210726/be2168311f2246588300d7e909b4671a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70 3]: /images/20210726/41b9d35d7c2746a6babe9c3c1b910ca0.png