![bc3b89824eef0bed80423b06b922b7ff.png](https://i-blog.csdnimg.cn/blog_migrate/361d12929eae608bf4526e363aa9ab68.jpeg)
概述
本节您将学到: 怎么创建一个可以交互选择和显示 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");
- 运行,试着切换底图。
从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/
文章翻译自 ArcGIS for JavaScript 帮助文档官网 Select a basemap