使用 BasemapToggle 的微件简介

使用微件是 GeoScene API for JavaScript 的重要组成部分。通常，微件被认为是封装一组特定功能的 API 的一部分。 API 提供具有预定义功能的即用型微件，其中包括：

通过 Locate 微件在地图上定位您的当前位置，
使用 Legend 微件添加图例以帮助可视化您的地图，
显示图层列表，以便用户使用 LayerList 微件轻松打开/关闭图层 ,
或使用 Search 微件搜索地图中的要素和位置。

有关所有可用小部件的完整列表，请参阅参考手册中的 geoscene/widgets 文件夹。

默认情况下，某些微件会自动提供给 MapView 和 SceneView，而其他微件则需要手动添加到应用程序中。Zoom 微件是作为视图的一部分自动添加的一个示例。尽管默认添加了缩放微件，但自动打开所有小部件可能没有意义。例如，Zoom 微件提供了非常标准的功能，并且可以在整个应用程序中使用，无论应用程序的主要用途是什么。然而，让 View 自动添加像 Locate 这样的微件是没有意义的，除非在应用程序中特别需要具有地理定位功能。

综上所述，使用微件的基本概念是一致的，无论使用的是什么微件。这些概念是：

创建和实例化微件
设置微件的属性

本教程将向您展示如何将 BasemapToggle 微件添加到 MapView。此微件允许您在单个视图中的两个底图之间切换。切换的底图设置在视图的 map 对象内。本教程将涉及上述三个要点。

在完成以下步骤之前，您应该熟悉视图和地图。如有必要，请先完成以下教程：

尽管本教程描述了如何在 2D MapView 中使用 BasemapToggle 微件，但同样的前提也适用于 SceneViews。

有关获得对小部件样式的完全控制的信息，请参阅样式主题。

1. 创建一个简单地图并在 MapView 中进行设置

首先创建一个简单的 Map 并在 View 中引用它。您的 JavaScript 可能类似于以下代码：

require([
  "geoscene/Map",
  "geoscene/views/MapView",
  "geoscene/widgets/BasemapToggle"
  ], (Map, MapView, BasemapToggle) => {
  // 使用初始底图创建地图
  const map = new Map({
    basemap: "topo-vector"
  });

  // 创建 MapView 并在实例中引用 Map
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-86.049, 38.485],
    zoom: 3
  });
});

接下来，创建 BasemapToggle 微件的实例并设置其 view 和 nextBasemap 属性。

view 属性可以是 MapView 或 SceneView。它为 BasemapToggle 微件提供了对初始底图的访问权限，您可以在其中通过 View 的 map 属性进行切换。

nextBasemap 属性设置切换的底图。此属性接受：

任何底图的字符串 ID。例如，一些可能的值是：'streets-vector'、'hybrid'、'topo-vector'等。
自定义底图对象。例如，假设您在自己的服务器（或第三方的服务器）上发布了您希望使用的自定义平铺服务。您也可以在此处指定。

出于本教程的目的，我们将指定一个字符串 ID , hybrid.。设置属性完成微件的创建。

您的 JavaScript 代码应类似于以下内容：

const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-86.049, 38.485],
  zoom: 3
});

// 1 - 创建微件
const toggle = new BasemapToggle({
  // 2 - 设置属性
  view: view, // 提供对地图的“地形矢量”底图的访问的视图
  nextBasemap: "hybrid" // 允许切换到“混合”底图
});

最后，我们需要指定这个微件在 View 的 UI 属性中的位置。此属性公开视图中可用的默认微件，并允许您打开和关闭它们。除此之外，您还可以指定要放置这些微件的位置。UI 属性继承自 DefaultUI。此类提供了可以添加、移动或删除微件的方法。在这种特定情况下，我们会将 BasemapToggle 微件添加到视图的右上角。

您的 JavaScript 代码应类似于以下内容：

// 将微件添加到视图的右上角
view.ui.add(toggle, "top-right");

现在您有了一张简单的地图，显示了如何使用 BasemapToggle 小部件。我们演示了小部件创建的两个基本部分：实例化和设置属性。除了在视图中停靠和放置。

您的最终 JavaScript 代码应如下所示：

require([
  "geoscene/Map",
  "geoscene/views/MapView",
  "geoscene/widgets/BasemapToggle"
  ], (Map, MapView, BasemapToggle) => {
  // 使用初始底图创建地图
  const map = new Map({
    basemap: "topo-vector"
  });

  // 创建 MapView 并在实例中引用 Map
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-86.049, 38.485],
    zoom: 3
  });

  // 1 - 创建微件
  const toggle = new BasemapToggle({
    // 2 - 设置属性
    view: view, // 提供对地图的“地形矢量”底图的访问的视图
    nextBasemap: "hybrid" // 允许切换到“混合”底图
  });

  // 将微件添加到视图的右上角
  view.ui.add(toggle, "top-right");
});

MapView

intro

get started

Map

Home

Widget

GeoScene API for JavaScript示例中心

使用 BasemapToggle 的微件简介

1. 创建一个简单地图并在 MapView 中进行设置

2. 创建 BasemapToggle 微件并设置其属性

3. 将微件放置在视图中