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

最新推荐文章于 2024-08-10 23:17:41 发布
最新推荐文章于 2024-08-10 23:17:41 发布
阅读量3k 收藏 2
点赞数
分类专栏： ArcGIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengjie0722/article/details/81485306
版权

   本文主要介绍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/lyrs=m@226000000&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
				break;
			case "st":
				url = "https://mt" + (col % 4) + ".google.cn/vt/lyrs=s@157&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
				break;
			case "label":
				url = "https://mt" + (col % 4) + ".google.cn/vt/lyrs=h@177000000&hl=zh-CN&gl=cn&x=" + col + "&y=" + row + "&z=" + level + "&s=Gali";
				break;
			default:
				url = "https://mt" + (col % 4) + ".google.cn/vt/lyrs=m@226000000&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&tk=你的密钥";
						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&tk=你的密钥";
						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&tk=你的密钥";
						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&tk=你的密钥";
						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）

半个GIS半个前端
关注
专栏目录
ArcGIS API for JavaScript3加载高德地图
12-21
ArcGIS API for JavaScript3最新版本【3.23】加载高德地图和影像地图。
arcgis api 加载高德底图
07-21
实现arcgis api加载高德底图demo
高德结合three.js实现景区大屏
最新发布
wsl3465205046的博客
08-10 1061
通过上述步骤，你可以将高德地图与three.js结合，打造一个智慧景区大屏展示系统。这个系统可以显示 3D 场景、地图和动态数据，提供丰富的用户体验。在开发过程中，确保进行性能优化和用户测试，以实现最佳效果。
ArcGIS API for JavaScript4.10加载高德地图
01-16
使用ArcGIS API for JavaScript4.10加载高德地图和高德影像，通过扩展BaseTileLayer来自定义GaodeMapLayer模块。
ArcGIS API for JavaScript加载高德地图代码
09-13
利用ArcGIS JavaScript API加载高德在线地图的扩展利用ArcGIS JavaScript API加载高德在线地图的扩展利用ArcGIS JavaScript API加载高德在线地图的扩展
arcgis加载高德在线地图
06-12
学习arcgis的朋友可以看看，里面有写好的类 和说明文档，加载高德在线图的，js文件大家互相学习，有建议可以提哈
arcgis api（三）arcgis api for js 4.x 加载高德地图、谷歌地图、天地图
zhengjie0722的博客
08-17 9817
arcgis api for 4.x支持2D和3D地图的展示，3.x的版本我们通过自定义Layer实现了高德地图、谷歌地图和天地图的加载。本文介绍了，在线地图服务、高德地图、谷歌地图、天地图在4.x版本中的加载方法。 1、在线地图服务 import React, { Component } from "react"; import esriLoader from "esri-loader...
ArcGIS API for Javascript 3.x引入在线地图
09-14
3.x 版本是该API的一个重要阶段，提供了丰富的功能和接口，支持与各种在线地图服务的集成，包括高德地图、百度地图、天地图和谷歌地图。 **1. ArcGIS API for JavaScript 3.x基础** ArcGIS API for JavaScript 3.x ...
ArcGIS API 3.29之加载高德地图、百度地图、天地图和谷歌地图
xb670078511的博客
09-15 2666
很早之前就有想写博客的念头，今天终于有时间静下心来写我的第一篇博客，在此庆贺一下！ 好了，言归正传，作为一名刚接触WebGIS开发的小白，在构建应用的时候首先想到的是拿到一幅符合系统需求的底图，然后在上面叠加自己的矢量图层，这样只需要维护好我们自己的专题数据就好了，今天就以高德地图为例，讲讲怎么在ArcGIS API 3.29中引入高德地图。 原理：由于ArcGIS API没有直接引入其它地图的方...
ArcGIS API for Javascript3.23加载百度地图
佯佯DESIGNER
12-20 2983
由于之前项目需求用到了谷歌地图、海图这些在线地图，于是这两天突然有了一个想法：整理常用在线地图的引用方法和源码，包括百度地图、天地图、谷歌地图、高德地图、海图。首先来讲解百度地图的引用。
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
热门推荐
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
ArcGIS api for javascript 3.21版本加载高德地图
08-21
ArcGIS api for Javascript3.21版本加载高德地图
arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图源码
04-01
arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图源码 实现加载在线天地图、百度地图、高德地图功能 适合arcgis api初学者以及爱好者
ArcGIS API for Javascript3.23加载高德地图
佯佯DESIGNER
12-21 6498
本篇以高德矢量街道图为例，主要介绍利用ArcGIS API for Javascript添加显示高德在线地图的代码。包括：【1】矢量图 【2】影像图
arcgis api for js接入openstreetmap（2D版）（arcgis api for js篇.4）
GIS之家家长
03-04 277
GIS之家总目录（订阅之前请先查看该博客） GIS之家：openlayer+mapbox+arcgis api for js等相关内容的介绍 地图之家总目录 地图之家：cesium+leaflet+地图数据+地图工具等相关内容的介绍 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html> <head> <meta charset="utf-8" /> <m.
android 原生开发 3d地图 下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
weixin_39904612的博客
12-01 67
前言关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。0.内容概览本篇知识点涉及到 arcgis api 3.x 相关类讲解源代码项目结构目录说明功能点...
arcgis api for javascript 离线部署后，加载高德地图 本地加载测试已成功
wk2133的博客
10-10 8032
首先本地部署arcgis api for javascript，详情请参照我的另外一个文章，离线部署arcgis api for javascript而后，新建html文件，内容如下&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Create a Web Map&lt;/title&gt;&lt;meta http-equiv="...
基于ArcGIS API for JavaScript加载天地图
wml00000的博客
04-06 9772
文章目录前言效果图详细代码总结参考链接 前言 该篇主要介绍如何用ArcGIS JS API加载天地图，具体应用场景以及需求分析等，在上篇基于ArcGIS API for JavaScript加载百度各种类型切片地图已经说过了，不再做过多介绍。 效果图 详细代码 TDTLayer.js define([ "esri/layers/TileInfo", "esri/layers/Ti...
ArcGIS JS加载天地图（墨卡托投影详细版）
qq_45661948的博客
08-13 902
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>天地图底图加载（墨卡托版本）</title> <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css"> <script src="https://js.arcgis.com/3.21/"&g.
ArcGIS API 3.x for JS系列教程之地图服务展示与切换
资源摘要信息: "本系列文章旨在指导开发者如何使用ArcGIS API for JavaScript 3.x版本进行入门级别的Web GIS开发。系列第二部分特别讲解了如何在应用程序中展示不同种类的地图服务。文章详细介绍了如何通过ArcGIS ...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值