步骤

创建新笔

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

设置API键

要访问ArcGIS服务，您需要一个API密钥。

转到您的仪表板以获取API密钥。

在CodePen中，将apiKey设置为您的密钥，这样它就可以用于访问basemap层和位置服务。

js 复制代码

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

添加模块

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

js 复制代码

    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图像。

js 复制代码

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

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

js 复制代码

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

在基础地图之间切换。

从图库中选择基础地图

您也可以使用BasemapGallery小部件来选择不同的基础地图。

创建一个BasemapGallery，并在源属性中设置查询以搜索"开发人员的世界Basemaps"basemap组。

js 复制代码

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

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

javascript 复制代码

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

完整代码

html 复制代码

<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>

运行应用程序

在CodePen中，运行代码以显示地图。

您的应用程序中应该有两个小部件，它们提供了不同的方式来选择基本地图。

注明：翻译自esri，仅供个人查阅使用，侵删

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

步骤

创建新笔

设置API键

添加模块

在基础地图之间切换

从图库中选择基础地图

完整代码

运行应用程序