概述
本节您将学到： 怎么创建一个可以交互选择和显示 ArcGIS Online上底图的应用。
应用可以使用和展示托管在ArcGIS Online和ArcGIS Enterprise栅格切片底图和矢量切片底图，同样可使用您通过ArcGIS Vector Tile Style Editor设计的自定义底图（注：当然也可以是自己发布的栅格底图和矢量底图）。使用BasemapToggle和BasemapGallery微件可以创建一个切换底图的应用。BasemapToggle允许您在两个底图之间切换，而BasemapGallery可让您在一个ArcGIS Online群组( ArcGIS Online group)中的多个底图进行切换。您的应用可以使用一组有Esri维护的底图，也可以使用由您自己定义的底图。关于如何设计自定义底图可以参考Style a vector basemap教程。
在本教程中，您将使用ArcGIS API for JavaScript提供的BasemapToggle和BasemapGallery微件为用户提供选择和展示托管在ArcGIS Online上底图的功能。
展示效果请点击：https://s.codepen.io/esri_devlabs/debug/WabNBv
撸代码步骤
创建一个简单HTML页面
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543,34.02700],
zoom: 13
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
切换底图
使用BasemapToggle微件可以很简单的实现两个底图之间的切换。本小节您将配置这个微件用来切换地形图底图（Topographic）和影像（Satellite）底图。
- 在
require中加入和的模块引用并且更新function的参数。这两个模块在后续的步骤中用到。
require([
"esri/Map",
"esri/views/MapView",
//*** ADD ***//
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, BasemapToggle, BasemapGallery) {
- 在
function的代码末尾，创建一个BasemapToggle微件，设置其view属性和nextBasemap为satellite。
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
- 将创建的微件添加到view默认UI(DefaultUI)的右下角。
view.ui.add(basemapToggle, "bottom-right");
-
运行，试着切换底图。
BasemapToggle效果
从ArcGIS Online中选择底图
另外一种选择底图的方式是通过BasemapGallery微件。在本小节，您将使用BasemapGallery微件加载、选择和显示 ArcGIS Online上的底图。
- 在
function中，将以上写的BasemapToggle代码注释掉。 - 在主function中创建
BasemapGallery并配置其从ArcGIS Online中选择底图。设置view为当前view。设置source为 ArcGIS Online portal，设置其url为https://wwww.arcgis.com、设置useVectorBasemaps为true使其从矢量切片组中选择底图加载，如果您设置为false将从栅格切片组中选择底图加载。
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true // Load vector tile basemaps
}
}
});
- 将创建的微件添加到view默认UI(DefaultUI)的右上角。
- 运行，试着切换不同底图。
到此您已经配置完这两个微件啦。
您的页面应该是这样:https://codepen.io/esri_devlabs/pen/WabNBv?editors=1000
再撸点
加载矢量切片底图
试着将BasemapToggle代码中的useVectorBasemaps属性设置为false使其从栅格切片组中选择底图加载。
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
//*** ADD ***//
useVectorBasemaps: false //加载栅格切片底图
}
}
});
完整代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Select a basemap</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, BasemapToggle, BasemapGallery) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543,34.02700],
zoom: 13
});
//-------使用BasemapToggle-----------
// var basemapToggle = new BasemapToggle({
// view: view,
// secondMap: "satellite"
//});
// view.ui.add(basemapToggle,"bottom-right");
//-------使用BasemapToggle-----------
//-------使用BasemapGallery-----------
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "http://www.arcgis.com",
useVectorBasemaps: true, // Load vector tile basemap group
},
}
});
view.ui.add(basemapGallery, "top-right"); // Add to the view
//-------使用BasemapGallery-----------
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
关键文档
BasemapToggle:https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html
BasemapGallery:https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery.html
ArcGIS Vector Tile Style Editor:https://developers.arcgis.com/labs/arcgisonline/style-a-vector-basemap/
useVectorBasemaps:https://developers.arcgis.com/javascript/latest/api-reference/esri-portal-Portal.html#useVectorBasemaps
ArcGIS Online group:https://doc.arcgis.com/zh-cn/arcgis-online/share-maps/groups.htm
Style a vector basemaphttps://developers.arcgis.com/labs/arcgisonline/style-a-vector-basemap/
欢迎关注我的微信公众号，第一时间为您推送相关教程。
