[WebGIS] ArcGIS api for Javascript3.21版本加载高德地图

介绍

ArcGIS api for Javascript3.21版本加载高德地图
已封装好，有引用示例
目录介绍：

js
    gaodeLayer.js //高德地图图层
    index.js //页面对应的JS文件
index.html //视图文件
下载链接

文件

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;
        }
    });
});

index.html(或.jsp,.flt前端文件)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ArcGIS JS加载高德地图</title>
		
		<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/esri/css/esri.css" />
	    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/dijit/themes/tundra/tundra.css"/>
	    <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://js.arcgis.com/3.21/init.js"></script>
	    
	    <!-- jquery与bootstrap的cdn -->
	    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	    
	    <!--引用该视图的JS文件 -->
	    <script src="js/index.js"></script>
	</head>
	<body>
		<!-- 地图div的id设为map -->
		<div id="map"></div>
	</body>
</html>

index.jsp.js(前端文件对应的js文件)

//地图控件
var map;
//初始化函数
function initMap() {
    require(["esri/map", "js/gaodeLayer", "dojo/domReady!"], function (Map, gaodeLayer) {
        map = new Map("map", {
            center: [118.15, 24.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容器
    });
}
//调用方法
window.onload = function(){ //async设为false时安全
	initMap(); //获取map
}
//window.onload = function(){ //异步时
//	do {
//		initMap();
//	} while (map==null);
//	//...
//}
//$(document).ready(function() {//jQuery代码，相当于window.load函数
//  initMap();
//});

同步异步问题

若设置为异步(dojoConfig里设置)，initMap()里的require为异步进程
这时可能会导致后面出错：map中没有该方法 或 map对象没有定义这类问题
解决方案

1. dojoConfig设置为同步
   async : false
   浏览器提示：

    init.js:14 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
   

   可以解决异常问题

2. 初始化时换上以下代码（错误方法）
   该办法也不安全，舍去
   会创建好几个initMap()异步进程，而每一次进入while条件时，map都未被初始化，所以会进入死循环

    window.onload = function(){
    	do {
    		initMap();
    	} while (map==null);
    	//...
    }
   

结果