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>
效果: