欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

arcgis api for js 3.x 加载高德地图、谷歌地图、天地图

程序员文章站 2022-07-02 13:34:00
...

   本文主要介绍ArcGIS API for Javascript 3.x版本添加在线高德地图、谷歌地图、天地图的代码。

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

2、谷歌地图

define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo"],
    function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
        return declare("googleLayer", TiledMapServiceLayer, {
			layertype: "road",//图层类型
            // 构造函数
            constructor: function (args) {
                // 这里使用坐标系为投影坐标系WGS_1984_Web_Mercator(wkid: 102113)
                this.spatialReference = new SpatialReference({
                    wkid:102113
                });
				declare.safeMixin(this, args);
                // 图层提供的起始显示范围以及整个图层的地理范围
                this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
                this.initialExtent = new Extent(5916776.8, 1877209.3, 19242502.6, 7620381.8, this.spatialReference);
                // 图层提供的切片信息
                this.tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -20037508.342787,
                        "y": 20037508.342787
                    },
                    "spatialReference": {
                        "wkid": 102113
                    },
                    "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) {
                var zoom = level - 1;
                var offsetX = Math.pow(2, zoom);
                var offsetY = offsetX - 1;
                var numX = col - offsetX;
                var numY = (-row) + offsetY;
                zoom = level + 1;
                var num = (col + row) % 8 + 1;
                var url = "";
		switch (this.layertype) {
			case "road":
				url = "https://mt" + (col % 4) + ".google.cn/vt/[email protected]&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
				break;
			case "st":
				url = "https://mt" + (col % 4) + ".google.cn/vt/[email protected]&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
				break;
			case "label":
				url = "https://mt" + (col % 4) + ".google.cn/vt/[email protected]&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
				break;
			default:
				url = "https://mt" + (col % 4) + ".google.cn/vt/[email protected]&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
				break;
				}								
                return url;
            }
        });
    }
)

3、天地图

define(["dojo/_base/declare",
        "esri/layers/TiledMapServiceLayer",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/layers/TileInfo"],
    function (declare,TiledMapServiceLayer,Extent,SpatialReference,TileInfo) {
        return declare("tdtLayer", TiledMapServiceLayer, {
			layertype: "road",//图层类型
            constructor: function (args) {
                this.spatialReference = new SpatialReference({ wkid: 4326 });
				declare.safeMixin(this, args);
                this.initialExtent = (this.fullExtent = new Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
                this.tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "lods": [
                        { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
                        { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
                        { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
                        { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
                        { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
                        { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
                        { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
                        { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
                        { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
                        { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
                        { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
                        { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
                        { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
                        { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
                        { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
                        { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
                        { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
                    ]
                });
                this.loaded = true;
                this.onLoad(this);
            },
            getTileUrl: function (level, row, col) {
				
               // return "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
				var url = "";
				switch (this.layertype) {
					case "road":
						url = "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
						break;
					case "st":
						url = "http://t" + row % 8 + ".tianditu.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
						break;
					case "label":
						url = "http://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
						break;
					default:
						url = "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
						break;
				}
				return url;
			}
        });
    });

为了方便测试,我是分别将三个文件放在api 的layer文件夹下,方便调用,也可通过dojoConfig配置路径。调用方式都一样

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

githab(arcgis3x-react)