前言

    加载高德作为底图

切片线划图层

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: 
            });
            declare.safeMixin(this, args);
            this.fullExtent = new Extent(-, -, , , this.spatialReference);
            this.initialExtent = this.fullExtent;
            this.tileInfo = new TileInfo({
                "cols": ,
                "rows": ,
                "compressionQuality": ,
                "origin": new Point(-, , this.spatialReference),
                "spatialReference": this.spatialReference,
                "lods": [{
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }, {
                    "level": ,
                    "resolution": ,
                    "scale": 
                }]
            });

            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 %  + ) + '.is.autonavi.com/appmaptile? + col + '&y=' + row + '&z=' + level;
                    break;
                case "st":
                    url = 'http://webst0' + (col %  + ) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;
                    break;
                case "label":
                    url = 'http://webst0' + (col %  + ) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;
                    break;
                default:
                    url = 'http://webrd0' + (col %  + ) + '.is.autonavi.com/appmaptile? + 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: %;
        }
        #map{
            height: %;
        }
    </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: [, ],
                zoom: ,
                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 id="map"></div>
</body>
</html>

结果：