当前位置：首页 > news >正文

ArcGIS API for JavaScript 4.x 教程（二）切换基础地图图层

news 2025/8/17 9:41:02

了解如何更改地图中的基础地图图层。

基础地图图层：
基础地图层是用于访问和显示来自基础地图层服务的数据的层。它为地图或场景提供视觉和地理上下文，通常包含具有管理边界和地名的全局数据。

基本地图图层服务提供了许多基本地图图层样式，例如地形、街道和图像，您可以在地图中使用这些样式。
在本教程中，您将使用Basemap Toggle和BasemapGallery小部件来选择和显示不同的Basemap图层。

笔记
有关更多信息，请访问映射API和定位服务指南中的Basemap层。

步骤

创建新笔

若要开始，请完成“显示地图”教程或使用此笔。

设置API键

要访问ArcGIS服务，您需要一个API密钥。
转到您的仪表板以获取API密钥。
在CodePen中，将apiKey设置为您的密钥，这样它就可以用于访问basemap层和位置服务。

esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({basemap: "arcgis-topographic" // Basemap layer service
});

添加模块

在require语句中，添加Basemap Toggle和BasemapGallery模块。

    require(["esri/config","esri/Map","esri/views/MapView","esri/widgets/BasemapToggle","esri/widgets/BasemapGallery"], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {

在基础地图之间切换

在两个基本地图之间进行选择的一个简单方法是使用基本地图切换小部件。使用小部件在arcgis地形图和arcgis图像基础图之间切换。
创建“Basemap Toggle”并设置视图。将nextBasemap属性设置为arcgis图像。

      const basemapToggle = new BasemapToggle({view: view,nextBasemap: "arcgis-imagery"});

将小部件添加到视图的右下角。

view.ui.add(basemapToggle,"bottom-right");

在基础地图之间切换。

从图库中选择基础地图

您也可以使用BasemapGallery小部件来选择不同的基础地图。
创建一个BasemapGallery，并在源属性中设置查询以搜索“开发人员的世界Basemaps”basemap组。

      const basemapGallery = new BasemapGallery({view: view,source: {query: {title: '"World Basemaps for Developers" AND owner:esri'}}});

将小部件添加到视图的右上角。

      view.ui.add(basemapGallery, "top-right"); // Add to the view

完整代码

<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>ArcGIS Maps SDK for JavaScript Tutorials: Change the basemap layer</title><style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.27/"></script><script>require(["esri/config","esri/Map","esri/views/MapView","esri/widgets/BasemapToggle","esri/widgets/BasemapGallery"], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {esriConfig.apiKey = "YOUR_API_KEY";const map = new Map({basemap: "arcgis-topographic"});const view = new MapView({container: "viewDiv",map: map,center: [-118.80543,34.02700],zoom: 13});const basemapToggle = new BasemapToggle({view: view,nextBasemap: "arcgis-imagery"});view.ui.add(basemapToggle,"bottom-right");const basemapGallery = new BasemapGallery({view: view,source: {query: {title: '"World Basemaps for Developers" AND owner:esri'}}});view.ui.add(basemapGallery, "top-right"); // Add to the view});</script>
</head>
<body><div id="viewDiv"></div>
</body>
</html>