ArcGIS API for JS 加载高德、天地图、百度地图

于 2020-09-16 17:03:29 发布
阅读量1.5k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45024732/article/details/108624633
版权

封装三种地图的js文件，用的时候直接引用，new一下即可

 高德地图------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: 102100//web墨卡托
            });
            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);
        },
       
        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;
        }
    });
});

 下面是天地图-----TdtLayer.js

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" + 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";
				/*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;*/
					//e378319b5250eff0fdd562f3aa190e62  是自己申请的key，现在代码是的是博主申请的，也可以使用
					return "http://t0.tianditu.gov.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=e378319b5250eff0fdd562f3aa190e62";

			}

        });

    });

下面是百度地图------baiduLayer.js

define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo"],
    function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
        return declare(TiledMapServiceLayer, {
            // 构造函数
            constructor: function (properties) {
                this.spatialReference = new SpatialReference({
                    wkid: 102113
                });

                // 图层提供的起始显示范围以及整个图层的地理范围
                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 = "http://online1.map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + zoom + "&styles=pl";
                return url;
            }
        });
    }
)

 用的时候，在<script></script>中直接引用

       require(["esri/map",
                'map/layers/gaodeLayer',//地图js存放位置
                'map/layers/TdtLayer',
                'map/layers/baiduLayer',
                "esri/layers/FeatureLayer",
                "esri/geometry/Point",
                "esri/SpatialReference",
                "dojo/domReady!"],
            function (Map,
                      gaodeLayer,
                      TdtLayer,
                      baiduLayer,
                      FeatureLayer,
                      Point,
                      SpatialReference
            ){         
                let map;
        	map = new Map(‘容器div’,{
                //center:[116.403119,39.914935],//北京
		center:[117.216558,39.160941],//天津
                zoom:11,
                maxZoom:19,
                minZoom:0,
                logo: false,
                isZoomSlider: false,
                isDoubleClickZoom:true,
                slider: true,
                autoResize: true,
                sliderPosition: "top-left"
            });	
		if(map.loaded){
		    callBack();
              	    initscaleBar();
	    };
                var baselayer = new gaodeLayer();//高德地图
                //var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                //var baselayer = new gaodeLayer({layertype: "st"});//加载高德卫星图
                //var baselayer = new gaodeLayer({layertype: "label"});//加载高德标注图
                //var baselayer = new TdtLayer();//加载天地图
                map.addLayer(baselayer);//添加底图到map容器
})

 

weixin_45024732
关注
ArcGIS API for Javascript4.10加载百度地图
佯佯DESIGNER
01-18 3348
本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载百度地图和影像地图，以加载百度地图为例，我们通过扩展BaseTileLayer来自定义百度地图图层BaiduMapLayer模块。
arcgis api（三）arcgis api for js 4.x 加载高德地图、谷歌地图、天地图
zhengjie0722的博客
08-17 9732
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加载百度地图代码
09-13
ArcGIS API for JavaScript加载百度地图代码ArcGIS API for JavaScript加载百度地图代码ArcGIS API for JavaScript加载百度地图代码
【总结整理】关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索（转）...
weixin_34409357的博客
03-31 552
关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索 转载于:https://www.cnblogs.com/lianghong/p/8683104.html
基于ArcGIS API for JavaScript加载天地图
04-06
基于ArcGIS API for JavaScript加载天地图，加载在线天地图，通过继承TiledMapServiceLayer类实现。
ArcGIS API for JavaScript 加载百度地图
idomyway的博客
03-27 8145
前言 &nbsp;&nbsp;&nbsp;&nbsp;有时我们在面对需要使用百度地图作为地图的场景，我们可以通过对百度地图，百度卫星图，百度标注图层进行加载通过在网上查阅，得到了比较合适的坐标转换 加载百度地图 &nbsp;&nbsp;BDVecLayer.js define(["dojo/_base/declare", "esri/layers/TiledMapS...
arcgis js 加载高德 谷歌 百度地图
11-13
arcgis js加载高德、谷歌、百度地图、现成的代码。前台js代码需要的可以下载看看，大家相互学习
ArcGIS API for Javascript4.10加载高德地图
佯佯DESIGNER
01-17 3032
本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载高德矢量地图和影像地图，以加载矢量地图为例，我们通过扩展BaseTileLayer来自定义高德地图图层GaodeLayer模块。
arcgis for js加载百度地图高德地图天地图
05-09
本教程将详细阐述如何利用ArcGIS for JavaScript API来加载百度地图、高德地图和天地图，实现跨平台的地图服务整合。 首先，我们需要了解ArcGIS for JavaScript API的基本概念。API提供了丰富的地图操作和空间分析...
arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图源码
04-01
本篇将深入探讨使用ArcGIS API 3.x版本集成在线地图服务，包括天地图、百度地图和高德地图的源码实现，这对于初学者和地图爱好者来说是极好的学习资源。 首先，让我们了解ArcGIS API 3.x的基本概念。这个版本的API...
arcgis api for javascript 调用天地图
06-12
arcgis api for javascript 调用天地图 2015年6月 测试可用
arcgis api for JavaScript加载在线天地图
01-29
arcgis api for JavaScript加载在线天地图（包含矢量，影像，注记）
ArcGIS API 4.10之加载百度地图
01-18
基于ArcGIS API 4.10，通过自定义BaseTileLayer类来实现在三维球体加载显示百度地图和影像地图
ArcGIS API for JavaScript4.10加载天地图
01-18
使用ArcGIS API for Javascript 4.10加载天地图的矢量底图、影像地图和地形图，通过扩展BaseTileLayer来自定义图层模块。
arcgis javascript api 加载天地图
09-23
arcgis js api加载天地图矢量图、注记图、影像图例子，解压打开网页，就有效果，代码都在页面中，简单易读，希望帮助到你，给个好评
arcgis for javascript 加载天地图和高德地图
10-12
在GIS领域，ArcGIS for JavaScript API 是Esri公司推出的一款强大的Web地图开发工具，它允许开发者使用JavaScript语言创建交互式的地图应用。本教程将重点讲解如何利用ArcGIS API加载天地图和高德地图，以便在网页中...
arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图.zip
最新发布
06-19
本指南将深入探讨如何利用ArcGIS API 3.x版本集成在线天地图、百度地图和高德地图，为用户提供丰富的地图选择和多样化的地理信息服务。 一、ArcGIS API 3.x基础 ArcGIS API 3.x是Esri提供的JavaScript库，用于在...
ArcGIS API for Javascript3.23加载天地图
佯佯DESIGNER
12-21 3059
与上一篇提到的方法一样，加载天地图也是通过TiledMapServiceLayer来自定义天地图图层模块。本篇以加载矢量地图为例，讲解如何自定义图层模块以及加载显示图层。加载各类天地图的效果图：【1】矢量图 【2】影像图 【3】地形图 。
Arcgis for js加载百度地图
热门推荐
LZUGIS
04-03 1万+
在前面的文章里提到了Arcgis for js加载天地图，在本节，继续讲解如何在Arcgis for js中加载百度地图。
用arcgis api for javascript写加载天地图的完整页面代码
02-22
可以参考以下示例代码实现加载天地图的完整页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>ArcGIS API for JavaScript 示例</title> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.16/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer" ], function (Map, MapView, WebTileLayer) { // 创建天地图WebTileLayer let tdLayer = new WebTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", subDomains: ["t0"] }); // 将图层添加到地图 let map = new Map({ basemap: { baseLayers: [tdLayer] } }); // 创建地图视图 let view = new MapView({ container: "viewDiv", map: map, center: [116.46, 39.92], zoom: 6 }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_45024732

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值