Demo1 basemaps-portal

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Use Portal Basemaps | Sample | ArcGIS API for JavaScript 4.22</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.22/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/portal/Portal",
      "esri/views/MapView",
      "esri/widgets/BasemapGallery",
      "esri/widgets/Search",
      "esri/widgets/Expand"
    ], (esriConfig, Map, Portal, MapView, BasemapGallery, Search, Expand) => {
      // If you define the Portal URL in esriConfig, the
      // basemapGallery widget can determine which basemaps
      // to use.
      esriConfig.portalUrl = "https://jsapi.maps.arcgis.com";
      // Intialize a portal instance and load it
      const portal = new Portal();
      portal
        .load()
        .then(() => {
          // A portal can be configured to use Vector Basemaps
          // by default or not.
          const basemap = portal.useVectorBasemaps
            ? portal.defaultVectorBasemap
            : portal.defaultBasemap;
          const map = new Map({
            basemap: basemap
          });
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.24, 34.073],
            scale: 10000
          });
          // The BasemapGallery will use the basemaps
          // configured by the Portal URL defined in esriConfig.portalUrl
          const basemapGallery = new BasemapGallery({
            view: view
          });
          const bgExpand = new Expand({
            view: view,
            content: basemapGallery
          });
          view.ui.add(bgExpand, "bottom-left");
          // The Search widget will also use the locators
          // configured by the Portal URL defined in esriConfig.portalUrl
          const search = new Search({ view: view });
          view.ui.add(search, "top-right");
        })
        .catch((error) => {
          console.error(error);
        });
    });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

效果预览图

分析

Expand widget

右上角为 Expand 组件，查阅官网如下

BasemapGallery

BasemapGallery 也是一个组件，添加该行代码

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

可以看到该组件的样子

Arcgis Api for JS Sample Code 学习记录（1）

Demo1 basemaps-portal

效果预览图

分析

Expand widget

BasemapGallery