ArcGIS API 3.29之加载高德地图、百度地图、天地图和谷歌地图

很早之前就有想写博客的念头,今天终于有时间静下心来写我的第一篇博客,在此庆贺一下!
好了,言归正传,作为一名刚接触WebGIS开发的小白,在构建应用的时候首先想到的是拿到一幅符合系统需求的底图,然后在上面叠加自己的矢量图层,这样只需要维护好我们自己的专题数据就好了,今天就以高德地图为例,讲讲怎么在ArcGIS API 3.29中引入高德地图。

原理:由于ArcGIS API没有直接引入其它地图的方法,所以我们需要先写一个扩展类,然后将扩展类引入API中,最后编写代码引入高德地图。

1.创建扩展类

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, {
			// 构造函数 
			constructor: function (args) {
				// 这里使用坐标系为投影坐标系WGS_1984_Web_Mercator_Auxiliary_Sphere(wkid: 3857)
				this.spatialReference = new SpatialReference({
					wkid: 3857
				});
				// 图层提供的起始显示范围和整个图层的地理范围
				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}
					]
				});
				// 设置图层的loaded属性,并触发onLoad事件 
				this.loaded = true;
				this.onLoad(this);
			},
			getTileUrl: function (level, row, col) {
				return 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;
			}
		});
	});

2.在html页面中引入扩展类

<script type="text/javascript">
        var dojoConfig = {
        	async: true
        };
        var apiUrl = "http://localhost/arcgis_js_api/library/3.28/";
        dojoConfig.baseUrl = apiUrl + 'dojo';
        dojoConfig.packages = [{
             name: 'extend',
             location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/extend"
        }];
 </script>

3.实例化高德地图对象

<script>
        var map;
        require([
            "esri/map",
            "extend/GDVecLayer",
            "dojo/parser",
            "dojo/domReady!"], 
        function(Map, GDVecLayer,parser) {
            parser.parse();
            map = new Map("mapDiv", {
                logo: false,
                center: [105.9, 36.7],
                zoom: 5
            });
            var gdlayer = new GDVecLayer();
            map.addLayer(gdlayer );
        });
 </script> 

HTML页面的源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图</title>
    <link href="http://localhost/arcgis_js_api/library/3.29/3.29/dijit/themes/tundra/tundra.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.29/3.29/esri/css/esri.css">
    <style>
        html, body ,#mapDiv{ height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">

        var dojoConfig = {
        async: true
        };
            var apiUrl =  "http://localhost/arcgis_js_api/library/3.29/3.29/";
            dojoConfig.baseUrl = apiUrl + 'dojo';
            dojoConfig.packages = [{
                    name: 'extend',
                    location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/extend"
                }];
            
    </script>

    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.29/3.29/init.js"></script>
    <script>
        var map;
        require([
            "esri/map",
            "extend/GDVecLayer",
            "dojo/parser",
            "dojo/domReady!"], 
        function(Map, GDVecLayer,GDRoad, parser) {
            parser.parse();
            map = new Map("mapDiv", {
                logo: false,
                center: [105.9, 36.7],
                zoom: 5
            });
            var gdlayer = new GDVecLayer();
            map.addLayer(gdlayer );
        });
    </script>  

</head>
<body class="tundra">
<!--地图容器-->
    <div id="mapDiv"></div>
</body>
</html>

注意:1.先创建扩展类,然后引入进html页面,最后引入本地的api,顺序不能错。
2.扩展类的引入路径要正确,
如:location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/extend"代表扩展类的js文件是放在js文件夹下面的extend文件夹里面。
3.记得修改自己部署的本地api地址。

同理,其它地图的引入方式也是一样,只不过天地图需要先去官网申请一个key才能引入,下面提供引入地图和实时路况的源码下载。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页