ArcGIS API for JavaScript 加载高德地图代码教程

前言

加载高德作为底图

切片线划图层

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 = 'https://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 = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;
                    break;
                case "label":
                    url = 'https://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;
                    break;
                default:
                    url = 'https://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="https://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="https://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="https://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>
<!-- 地图p的id设为map -->
<p id="map"></p>
</body>
</html>

结果：