arcgis js（五）切换底图

1、经过四节的学习终于能够显示天地图了arcgis js（四）加载天地图_郝大大的博客-CSDN博客，以后的开发也就能基于天地图的底图了，这节学习天地图矢量底图和影像底图的自由切换，主要介绍两种方法。

2、切换底图比较常用的一个widget是"esri/widgets/BasemapToggle"，toggle本身就是切换的意思，通过实例化BasemapToggle对象，设置nextBasemap即可：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>测试</title><link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.20/"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script>require(["esri/Map","esri/layers/WebTileLayer",'esri/layers/support/TileInfo','esri/views/MapView',"esri/layers/FeatureLayer","esri/geometry/SpatialReference","esri/geometry/Point","esri/widgets/BasemapToggle",], function (Map, WebTileLayer, TileInfo, MapView, FeatureLayer, SpatialReference, Point, BasemapToggle) {var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址var token = ""; //天地图token，在官网申请var tileInfo = new TileInfo({"rows": 256,"cols": 256,"compressionQuality": 0,"origin": {"x": -180,"y": 90},"spatialReference": {"wkid": 4490},"lods": [{ "level": "1", "scale": 295829355.45, "resolution": 0.703125 },{ "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },{ "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },{ "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },{ "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },{ "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },{ "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },{ "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },{ "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },{ "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },{ "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },{ "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },{ "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },{ "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },{ "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },{ "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },{ "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },{ "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },{ "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }]})//影像地图var tiledLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },});//影像注记var tiledLayerAnno = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },});//矢量地图var vecLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },});//矢量注记var vecLayerAnno = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },});//定位到济南市中心var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));// 创建地图var map = new Map({basemap: {baseLayers: [tiledLayer, tiledLayerAnno]},});var view = new MapView({container: "viewDiv",map: map,center: cityCenter,zoom: 12,ui: {components: ["zoom", "compass"]}});const toggle = new BasemapToggle({view: view,nextBasemap: { baseLayers: [vecLayer, vecLayerAnno] }});view.ui.add(toggle, "top-right");});</script>
</head><body><div id="viewDiv"></div>
</body></html>

效果如下：

3、下面介绍使用Expand控件切换底图，这种方法可以设置底图的title：

<!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.20/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.20/"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script>require(["esri/config","esri/Map","esri/views/MapView","esri/layers/FeatureLayer","esri/layers/WebTileLayer","esri/layers/MapImageLayer","esri/widgets/LayerList","esri/widgets/BasemapLayerList","esri/widgets/Expand","esri/geometry/SpatialReference","esri/geometry/Point","esri/layers/support/TileInfo",],function (esriConfig, Map, MapView, FeatureLayer, WebTileLayer, MapImageLayer,LayerList, BasemapLayerList, Expand,SpatialReference, Point, TileInfo) {var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址var token = ""; //天地图token，在官网申请var tileInfo = new TileInfo({"rows": 256,"cols": 256,"origin": {"x": -180,"y": 90},"spatialReference": {"wkid": 4490},"lods": [{ "level": "1", "scale": 295829355.45, "resolution": 0.703125 },{ "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },{ "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },{ "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },{ "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },{ "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },{ "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },{ "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },{ "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },{ "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },{ "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },{ "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },{ "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },{ "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },{ "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },{ "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },{ "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },{ "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },{ "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }]});//影像地图var tdtImageLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图影像地图",visible: true});//影像注记var tdtAnnoImageLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图影像注记",visible: true});//矢量地图var tdtVecLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图矢量地图",visible: false});//矢量注记var tdtAnnoVecLayer = new WebTileLayer({urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tileInfo: tileInfo,spatialReference: { wkid: 4490 },title: "天地图矢量注记",visible: false});const map = new Map({basemap: {baseLayers: [tdtImageLayer, tdtAnnoImageLayer, tdtVecLayer, tdtAnnoVecLayer]}});//定位到济南市中心var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));const view = new MapView({map: map,center: cityCenter,zoom: 13,container: "viewDiv",ui: {components: ["zoom", "compass"]},});let basemapLayerList = new BasemapLayerList({view: view,});var layerListExpand = new Expand({expandIconClass: "esri-icon-layer-list",view: view,content: basemapLayerList});view.ui.add(layerListExpand, "top-right");});</script></head><body><div id="viewDiv"></div></body></html>

效果：

arcgis js（五）切换底图相关推荐

arcgis js 底图切换_ArcGIS API for JavaScript切换底图
由于小编也是刚接触GIS,也常被网上的各种资源所混淆,关于地图的基本创建就有很多方法.其实无关就是3x和4x版本的不同.3x版本大多是3.33,4x版本为4.16最新版本.以后小编也将采用最新版本. ...
添加底图＆切换底图——参考ArcGIS API
添加底图&切换底图参考教程:ArcGIS API for Javascript 本示例参考:①Add 2D Map ②Select BaseMap 编辑软件:Hbuilder [? Code ...
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制,因为这些图表绘制其实是跟地理坐标无关的,只需要设置图表的位置即可,所以仅仅用了纯前端的方式去实现.这 ...
Arcgis js for javascript调用百度，高德实时路况服务
一.离线部署Arcgis js for javascript 按照如下路径存放. 二.在VScode里按照如下目录结构创建demo ,放入框框里的文件就可以了三.安装Live Server插件到VS ...
arcgis js（六）设置不透明度
1.在上一章节我们已经能够自由切换天地图底图了,这一节继续接着上节的代码往里面添加新功能,我们知道,在地图学中地图是可以不断叠加的,即使像天地图这么庞大的地图显示也是由不同的图层叠加现实的,当然它用的 ...
arcgis js 4.x 地图中加入图片
arcgis js 4.x版本,如何加入图片问题:如何将自定义图片放入到arcgis的图层当中? 本人在网上查找的方法中,发现大部分方法只适用于3.x版本,只有一种引入自定义BaseDynamicL ...
ArcGIS JS之 4.23之IIS本地部署与问题解决
1.官方给的说明文档,以及网上的资料,都是将官方类库放到目录:C:\inetpub\wwwroot中,项目中,个人习惯是在其他判断新建了一个Web目录存放所有发布的内容,经过测试,也是可以通过指定目录 ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
ArcGIS JS 天地图之深色地图地图夜间模式
项目中需要使用酷炫模式的底图,高德地图提供了多种样式的底图,但不是通过wmts瓦片服务的方式提供,无法通过ArcGIS JS调用,且存在较大的偏移量.通过测试,尝试调用了MapBox地图,GEQ地图服 ...

arcgis js（五）切换底图

arcgis js（五）切换底图相关推荐

最新文章

热门文章