BasemapGallery

BasemapGallery 微件显示表示来自 GeoScene Online 的底图或用户定义的一组地图或图像服务的图像集合。从 BasemapGallery 中选择新底图时，地图的底图图层将被移除并替换为在图库中选择的关联底图的底图图层。默认情况下，BasemapGallery 微件如下图所示。

basemap-gallery

设置全局 API 密钥后，BasemapGallery 小部件中显示的默认底图将默认为与 API 密钥一起使用的底图（由 Portal.devBasemapGalleryGroupQuery 属性定义）。

从版本 4.23 开始，添加到图库的底图可以具有不同的空间参考。将 MapView.spatialReferenceLocked 属性设置为 true 以禁用不同空间参考中的底图并防止用户在运行时更改视图的空间参考。

另请参阅：

示例：

let basemapGallery = new BasemapGallery({
  view: view
});
// Add widget to the top right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

构造函数

new BasemapGallery(properties)

参数：

properties Object

可选

有关可能传递给构造函数的所有属性的列表，请参见属性。

示例：

// typical usage
let basemapGallery = new BasemapGallery({
  view: view
});

属性概览

可以设置、检索或收听任何属性。请参阅使用属性主题。

显示继承的属性

隐藏继承的属性

类型	描述	类
Basemap	更多信息地图的底图。	更多信息	BasemapGallery
String\|HTMLElement	更多信息表示包含微件的 DOM 元素的 ID 或节点。	更多信息	Widget
String	更多信息类的名称。	更多信息	Accessor
Boolean	更多信息如果为 `true`，则将微件设置为禁用状态，以便用户无法与其交互。	更多信息	BasemapGallery
Number	更多信息指示在 BasemapGallery 中没有可用底图时用于消息“没有可用底图”的标题级别。	更多信息	BasemapGallery
String	更多信息微件的默认 CSS 图标类。	更多信息	BasemapGallery
String	更多信息创建微件时分配给微件的唯一 ID。	更多信息	Widget
String	更多信息微件的默认标签。	更多信息	BasemapGallery
LocalBasemapsSource\|PortalBasemapsSource	更多信息微件将显示的底图源。	更多信息	BasemapGallery
MapView\|SceneView	更多信息微件将从中操作的视图。	更多信息	BasemapGallery
BasemapGalleryViewModel	更多信息此微件的视图模型。	更多信息	BasemapGallery
Boolean	更多信息指示微件是否可见。	更多信息	Widget

属性详情

activeBasemap Basemap

地图的底图。

container String|HTMLElement inherited

表示包含微件的 DOM 元素的 ID 或节点。该属性只能设置一次。以下示例都是使用微件时的有效用例。

示例：

// Create the HTML div element programmatically at runtime and set to the widget's container
const basemapGallery = new BasemapGallery({
  view: view,
  container: document.createElement("div")
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

// Specify an already-defined HTML div element in the widget's container

const basemapGallery = new BasemapGallery({
  view: view,
  container: basemapGalleryDiv
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

// HTML markup
<body>
  <div id="viewDiv"></div>
  <div id="basemapGalleryDiv"></div>
</body>

// Specify the widget while adding to the view's UI
const basemapGallery = new BasemapGallery({
  view: view
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

declaredClass Stringreadonly inherited 起始版本：GeoScene API for JavaScript 4.7

类的名称。声明的类名格式为 geoscene.folder.className。

disabled Boolean 起始版本：GeoScene API for JavaScript 4.15

如果为 true，则将微件设置为禁用状态，以便用户无法与其交互。

默认值:false

headingLevel Number 起始版本：GeoScene API for JavaScript 4.20

指示在 BasemapGallery 中没有可用底图时用于消息“没有可用底图”的标题级别。默认情况下，此消息呈现为 2 级标题（例如 <h2>No basemaps available</h2>）。根据微件在您的应用中的位置，您可能需要调整此标题以获得正确的语义。这对于满足可访问性标准很重要。

默认值:2

另请参阅：

标题元素

示例：

// "No basemaps available" will render as an <h3>
basemapGallery.headingLevel = 3;

iconClass String 起始版本：GeoScene API for JavaScript 4.7

微件的默认 CSS 图标类。

id String inherited

创建微件时分配给微件的唯一 ID。如果开发人员未设置，则默认为容器 ID，如果不存在，则会自动生成。

label String 起始版本：GeoScene API for JavaScript 4.7

微件的默认标签。

source LocalBasemapsSource|PortalBasemapsSourceautocast Autocasts from Collection<Basemap>|Basemap []|Portal|Object

微件将显示的底图源。此属性可以使用数组或 Basemap 集合或 Portal 实例自动转换。默认源是指向在 geosceneConfig.portalUrl 中设置的默认门户实例的 PortalBasemapsSource。

设置全局 API 密钥后，BasemapGallery 小部件中显示的默认底图将默认为与 API 密钥一起使用的底图（由 Portal.devBasemapGalleryGroupQuery 属性定义）。

示例：

const basemapGallery = new BasemapGallery({
   view: view,
   source: [Basemap.fromId("tianditu-vector"), Basemap.fromId("hybrid")] // autocasts to LocalBasemapsSource
});

const basemapGallery = new BasemapGallery({
   view: view,
   source: { // autocasts to PortalBasemapsSource
     portal: "https://www.yourportal.geoscene.cn"
   }
});

const basemapGallery = new BasemapGallery({
   view: view,
   source: new Portal({url: "https://www.yourportal.geoscene.cn"}) // autocasts to PortalBasemapsSource
});

view MapView|SceneView

微件将从中操作的视图。此视图通过视图的 map 属性提供对动态 basemap 的访问。

viewModel BasemapGalleryViewModelautocast

此微件的视图模型。这是一个包含控制此微件行为的所有逻辑（属性和方法）的类。请参阅 BasemapGalleryViewModel 类以访问微件上的所有属性和方法。

visible Boolean inherited

指示微件是否可见。

如果为 false，则该微件将不再呈现在 Web 文档中。这可能会影响文档中其他元素或微件的布局。例如，如果此微件是与视图 UI 右上角关联的三个微件中的第一个，则当此微件不可见时，其他微件将重新定位。有关详细信息，请参阅 "none" 的 CSS display 值。

默认值:true

示例：

// Hides the widget in the view
widget.visible = false;

方法概览

显示继承的方法

隐藏继承的方法

返回类型	描述	类
String	更多信息用于构建微件 `class` 属性值的实用方法。	更多信息	Widget
	更多信息注销微件实例。	更多信息	Widget
Boolean	更多信息在实例上发出事件。	更多信息	Widget
Boolean	更多信息指示实例上是否存在与提供的事件名称匹配的事件侦听器。	更多信息	Widget
Boolean	更多信息 `isFulfilled()` 可用于验证创建类的实例是否已完成（已解决或已拒绝）。	更多信息	Widget
Boolean	更多信息 `isRejected()` 可用于验证创建类的实例是否被拒绝。	更多信息	Widget
Boolean	更多信息 `isResolved()` 可用于验证创建类的实例是否已解决。	更多信息	Widget
Object	更多信息在实例上注册事件处理程序。	更多信息	Widget
	更多信息微件拆卸助手。	更多信息	Widget
	更多信息此方法主要由开发人员在实现自定义微件时使用。	更多信息	Widget
Object	更多信息此方法主要由开发人员在实现自定义微件时使用。	更多信息	Widget
	更多信息立即将微件呈现给 DOM。	更多信息	Widget
	更多信息此方法主要由开发人员在实现自定义微件时使用。	更多信息	Widget
Promise	更多信息 `when()` 一旦创建了类的实例，就可以利用它。	更多信息	Widget

方法详情

classes(classNames){String}inherited 起始版本：GeoScene API for JavaScript 4.7

用于构建微件 class 属性值的实用方法。这有助于简化 CSS 类设置。

参数：

classNames String|String []|Object

repeatable

类名称。

类型	说明
String	计算出来的类名。

另请参阅：

指南 - 微件开发（rendering）

示例：

// .tsx syntax showing how to set CSS classes while rendering the widget

render() {
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !this.showIcon
  };

  return (
    <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} />
  );
}

destroy()inherited

注销微件实例。

emit(type, event){Boolean}inherited 起始版本：GeoScene API for JavaScript 4.5

在实例上发出事件。此方法仅应在创建此类的子类时使用。

参数：

type String

事件的名称。

event Object

optional

事件有效负载。

类型	说明
Boolean	如果监听器收到通知，则为 `true`

hasEventListener(type){Boolean}inherited

指示实例上是否存在与提供的事件名称匹配的事件侦听器。

参数：

type String

事件的名称。

类型	说明
Boolean	如果类支持输入事件，则返回 true。

isFulfilled(){Boolean}inherited 起始版本：GeoScene API for JavaScript 4.19

isFulfilled() 可用于验证创建类的实例是否已完成（已解决或已拒绝）。如果满足，则返回 true。

类型	说明
Boolean	指示创建类的实例是否已完成（已解决或已拒绝）。

isRejected(){Boolean}inherited 起始版本：GeoScene API for JavaScript 4.19

isRejected() 可用于验证创建类的实例是否被拒绝。如果被拒绝，则返回 true。

类型	说明
Boolean	指示创建类的实例是否已被拒绝。

isResolved(){Boolean}inherited 起始版本：GeoScene API for JavaScript 4.19

isResolved() 可用于验证创建类的实例是否已解决。如果已解决，将返回 true。

类型	说明
Boolean	指示创建类的实例是否已解决。

on(type, listener){Object}inherited

在实例上注册事件处理程序。调用此方法以将事件与侦听器挂钩。

参数：

type String|String []

要侦听的事件或事件数组。

listener Function

事件触发时调用的函数。

类型说明

Object

返回带有 remove() 方法的事件处理程序，应调用该方法以停止侦听事件。

属性	类型	说明
remove	Function	调用时，从事件中删除侦听器。

示例：

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

own(handles)inherited

微件拆卸助手。当微件被销毁时，添加到它的任何句柄都将被自动删除。

参数：

handles WatchHandle|WatchHandle []

微件销毁后标记为删除的句柄。

postInitialize()inherited

此方法主要由开发人员在实现自定义微件时使用。在微件准备好渲染后执行。

render(){Object}inherited

此方法主要由开发人员在实现自定义微件时使用。它必须由子类实现以进行渲染。

类型	说明
Object	渲染的虚拟节点。

renderNow()inherited

立即将微件呈现给 DOM。

scheduleRender()inherited

此方法主要由开发人员在实现自定义微件时使用。安排微件渲染。此方法对于影响 UI 的更改很有用。

when(callback, errback){Promise}inherited 起始版本：GeoScene API for JavaScript 4.19

when() 一旦创建了类的实例，就可以利用它。这个方法有两个输入参数：一个 callback 函数和一个 errback 函数。callback 在类的实例加载时执行。如果类的实例无法加载，则执行 errback。

参数：

callback Function

optional

当 promise 解决时调用的函数。

errback Function

optional

当 promise 失败时执行的函数。

类型	说明
Promise	返回 `callback` 结果的新promise，可用于链接其他函数。

示例：

// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way
let bmGallery = new BasemapGallery();
bmGallery.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});

GeoScene API for JavaScript参考手册

构造函数

属性概览

属性详情

方法概览

方法详情