由于小编也是刚接触GIS，也常被网上的各种资源所混淆，关于地图的基本创建就有很多方法。其实无关就是3x和4x版本的不同。3x版本大多是3.33，4x版本为4.16最新版本。以后小编也将采用最新版本。
紧接上一篇的创建几何图形，本文主要讲述BasemapToggle和BasemapGallery这两个API来实现地图底图之间的切换。
简单描述下两个api
BasemapToggle
- 使用：
require(["esri/widgets/BasemapToggle"], function(BasemapToggle) { /* code goes here */ }); - 描述：
BasemapToggle提供了一个小部件，允许最终用户在两个底图之间切换。切换后的底图设置在视图的 地图对象内。 - 实现及主要参数说明：
var basemapToggle = new BasemapToggle({
view: view, // view: 对MapView或SceneView的引用。
nextBasemap: "hybrid" // nextBasemap：底图，下一个切换的底图。
});
BasemapGallery
- 使用：
require(["esri/widgets/BasemapGallery"], function(BasemapGallery) { /* code goes here */ }); - 描述：
BasemapGallery窗口小部件显示表示来自ArcGIS.com的底图或用户定义的一组地图或图像服务的集合图像。从BasemapGallery中选择新的底图时，地图的底图图层将被删除，并替换为在图库中选择的关联底图的底图图层。 - 实现及主要参数说明：
var basemapGallery = new BasemapGallery({
view: view
});
通过BasemapToggle实现切换
底图的切换还是需要以地图为前提，map及view都需要保留，通过实例BasemapToggle和在view添加该控件来达到目的。
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
], function(Map, MapView, BasemapToggle) {
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
view.ui.add(basemapToggle, "bottom-right");
});
</script>
- 这里截取部分代码片段，结尾会附上完整代码。先来看看效果：
格式工厂 屏幕录像20200723_141948 00_00_00-00_00_30.gif
通过BasemapGallery实现切换
- 使用BasemapGallery允许你从ArcGIS Online组中加载底图，以便可以选择和显示底图。
- 创建一个BasemapGallery小部件并将其配置为从中加载底图ArcGIS Online。将设置view为活动视图，并将设置source为ArcGIS Online门户。将设置url为https://wwww.arcgis.com并将其设置useVectorBasemaps为，true以便从矢量图块组中加载底图。如果将此值设置为该值，false将加载栅格图块底图组
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
], function(Map, MapView, BasemapGallery) {
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true // Load vector tile basemaps
}
}
});
view.ui.add(basemapGallery, "top-right");
});
</script>
-
效果图：
格式工厂 屏幕录像20200723_141105 00_00_00-00_00_30.gif
完整代码
注意，basemapGallery和BasemapToggle是两个独立的方法，不能同时使用！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择地图</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.16/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, BasemapToggle, BasemapGallery) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [104, 30],
zoom: 13
});
// basemapToggle
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
view.ui.add(basemapToggle, "bottom-right");
// basemapGallery
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true // Load vector tile basemaps
}
}
});
view.ui.add(basemapGallery, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
