ArcGIS API for JavaScript 加载高德地图

谁践踏了优雅 2021-09-15 03:28 595阅读 0赞

### 前言 ###

加载高德作为底图

### 切片线划图层 ###

gaodeLayer.js

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("gaodeLayer", TiledMapServiceLayer, {
            layertype: "road",//图层类型
            constructor: function (args) {
                this.spatialReference = new SpatialReference({
                    wkid: 3857
                });
                declare.safeMixin(this, args);
                this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
                this.initialExtent = this.fullExtent;
                this.tileInfo = new TileInfo({
                    "cols": 256,
                    "rows": 256,
                    "compressionQuality": 0,
                    "origin": new Point(-20037508.342787, 20037508.342787, this.spatialReference),
                    "spatialReference": this.spatialReference,
                    "lods": [{
                        "level": 0,
                        "resolution": 156543.033928,
                        "scale": 591657527.591555
                    }, {
                        "level": 1,
                        "resolution": 78271.5169639999,
                        "scale": 295828763.795777
                    }, {
                        "level": 2,
                        "resolution": 39135.7584820001,
                        "scale": 147914381.897889
                    }, {
                        "level": 3,
                        "resolution": 19567.8792409999,
                        "scale": 73957190.948944
                    }, {
                        "level": 4,
                        "resolution": 9783.93962049996,
                        "scale": 36978595.474472
                    }, {
                        "level": 5,
                        "resolution": 4891.96981024998,
                        "scale": 18489297.737236
                    }, {
                        "level": 6,
                        "resolution": 2445.98490512499,
                        "scale": 9244648.868618
                    }, {
                        "level": 7,
                        "resolution": 1222.99245256249,
                        "scale": 4622324.434309
                    }, {
                        "level": 8,
                        "resolution": 611.49622628138,
                        "scale": 2311162.217155
                    }, {
                        "level": 9,
                        "resolution": 305.748113140558,
                        "scale": 1155581.108577
                    }, {
                        "level": 10,
                        "resolution": 152.874056570411,
                        "scale": 577790.554289
                    }, {
                        "level": 11,
                        "resolution": 76.4370282850732,
                        "scale": 288895.277144
                    }, {
                        "level": 12,
                        "resolution": 38.2185141425366,
                        "scale": 144447.638572
                    }, {
                        "level": 13,
                        "resolution": 19.1092570712683,
                        "scale": 72223.819286
                    }, {
                        "level": 14,
                        "resolution": 9.55462853563415,
                        "scale": 36111.909643
                    }, {
                        "level": 15,
                        "resolution": 4.77731426794937,
                        "scale": 18055.954822
                    }, {
                        "level": 16,
                        "resolution": 2.38865713397468,
                        "scale": 9027.977411
                    }, {
                        "level": 17,
                        "resolution": 1.19432856685505,
                        "scale": 4513.988705
                    }, {
                        "level": 18,
                        "resolution": 0.597164283559817,
                        "scale": 2256.994353
                    }, {
                        "level": 19,
                        "resolution": 0.298582141647617,
                        "scale": 1128.497176
                    }]
                });
    
                this.loaded = true;
                this.onLoad(this);
            },
            /** * 根据不同的layType返回不同的图层 * @param level * @param row * @param col * @returns {string} */
            getTileUrl: function (level, row, col) {
                var url = "";
                switch (this.layertype) {
                    case "road":
                        url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
                        break;
                    case "st":
                        url = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;
                        break;
                    case "label":
                        url = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;
                        break;
                    default:
                        url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
                        break;
                }
                return url;
            }
        });
    });

### 在首页集成 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>ArcGIS JS加载高德地图</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
        <style> html,body{ height: 100%; } #map{ height: 100%; } </style>
    
    
        <script type="text/javascript"> var dojoConfig = { async: false, //是否异步 parseOnLoad: true, packages: [{ //解释：require(["js/.."],function(){}) 中 js/ 即为 location的值 name: "js", //对应require引用包里的js location: location.pathname.replace(/\/[^/]*$/, '') + '/js' //对应的路径 }] }; </script>
        <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
    
    
    
        <script> //地图控件 var map; require(["esri/map", "js/gaodeLayer", "dojo/domReady!"], function (Map, gaodeLayer) { map = new Map("map", { center: [118.15, 31.55], zoom: 11, logo : false, //logo slider : false //缩小按钮 }); // var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以 // var baselayer = new gaodeLayer({layertype: "st"});//加载卫星图 var baselayer = new gaodeLayer({layertype: "label"});//加载标注图 map.addLayer(baselayer);//添加高德地图到map容器 }); </script>
    </head>
    <body>
    
    <div id="map"></div>
    </body>
    </html>

### 结果： ###

![这里写图片描述][70]

[70]: /images/20210726/9df1a2857bec4259b05c1a64570da291.png