Features

Features 微件允许用户查看要素的 popupTemplate 内容，例如属性、操作、相关记录等，而无需绑定到视图。此微件的外观和行为与 Popup 微件类似，但与 Popup 不同的是，Features 微件可以放置在视图之外。例如，当在视图中选择要素时，Popup 微件将在视图中打开，无论它是停靠在选定要素处还是锚定到选定要素。使用 Features 微件，弹出窗口提供的相同信息显示在视图的一个单独容器中。

在上图中，Calcite shell 面板在单独的 div 中显示 Features 微件和 MapView。可以直接在 Features 微件上设置通用 title 和 content 属性，也可显示每个单独图层的 PopupTemplate (例如，奥林匹克国家公要素的 PopupTemplates，包含文本、媒体和关系元素)。操作栏显示在上图标题下方，用于显示可以在 open() 方法中的微件级别或图层的 PopupTemplate 中定义的操作。如果将多个要素传递到 Features 微件中，则该微件将提供浏览这些要素的按钮和允许显示要素列表的要素菜单，以便最终用户可以选择在微件中显示哪些要素内容。该微件还支持用于图格化和聚类的要素缩减 PopupTemplates。

如果需要在视图之外使用 Popup 功能，则应使用 Features 微件。如果想要在没有操作、相关记录、集群配置等的情况下显示单个要素的内容，请使用 Feature 微件。

另请参阅

示例

// Create a new instance of Features and set this on the View's
// popup. When features are selected in the map, the Features widget
// will automatically open in its respective container.
const view = new MapView({
  container: "viewDiv",
  map: map,
  popup: new Features({
    container: "features-widget"
  })
});

// Create a new instance of Features and set the view property
// to the View along with the container that holds the widget
// such as a Calcite Shell Panel.
const featuresWidget = new Features({
  view: view,
  container: "features-widget"
});

// Use reactiveUtils to watch for when the view has a click event
// then open the Features widget in its respective container.
reactiveUtils.on(()=> view, "click",
(event)=>{
  featuresWidget.open({
    location: event.mapPoint,
    fetchFeatures: true
  })
});

构造函数

new Features(properties)

参数

properties Object

optional

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

属性概述

所有属性都可以设置、获取和监听。请参阅使用属性主题。

显示继承属性

隐藏继承属性

类型	描述	类
String\|HTMLElement	包含微件的 DOM 元素的 ID 或节点。更多详情	Widget
String\|HTMLElement\|Widget	Features 微件的内容。更多详情	Features
String	类的名称。更多详情	Accessor
Graphic []	与 Features 微件相关联的要素数组。更多详情	Features
GoToOverride	此函数提供了覆盖 MapView goTo() 或 SceneView goTo() 方法的能力。更多详情	Features
Number	指示用于微件标题的标题级别。更多详情	Features
String	表示微件的图标。更多详情	Widget
String	创建微件时分配给微件的唯一 ID。更多详情	Widget
String	微件的默认的标注。更多详情	Features
Promise	尚未完成的一系列待定 Promises。更多详情	Features
Graphic	Features 微件访问的所选要素。更多详情	Features
Number	所选要素的索引。更多详情	Features
Feature	返回对当前 Feature 的引用。更多详情	Features
String	Features 微件的标题。更多详情	Features
MapView\|SceneView	对 MapView 或 SceneView 的引用。更多详情	Features
FeaturesViewModel	此类包含控制此微件行为的所有逻辑。更多详情	Features
Boolean	指示微件是否可见。更多详情	Features
VisibleElements	微件中显示的可见元素。更多详情	Features

属性详细信息

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"
});

content String|HTMLElement|Widget

Features 微件的内容。直接在弹出窗口中设置时，此内容是静态的，不能使用字段来设置内容模板。要基于字段或属性名称为内容设置模板，请参阅 PopupTemplate.content。

示例

// This sets generic instructions in the widget that will always be displayed
// unless it is overridden by a PopupTemplate
featuresWidget.content = "Click a feature on the map to view its attributes";

declaredClass Stringreadonly inherited

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

features Graphic []

与 Features 微件相关联的要素数组。此数组中的每个图形都必须具有有效的 PopupTemplate 集。它们可能共享相同的 PopupTemplate 或具有唯一的 PopupTemplates，具体取决于其属性。微件的内容和标题是根据每个图形各自的 PopupTemplate 的 content 和 title 属性设置的。

当此数组中存在多个图形时，将根据所选要素的值设置 Features 微件的当前内容。

如果没有与微件相关联的要素，则此值为 null。

示例

// When setting the features property, the graphics pushed to this property
// must have a PopupTemplate set.
let g1 = new Graphic();
g1.popupTemplate = new PopupTemplate({
  title: "Results title",
  content: "Results: {ATTRIBUTE_NAME}"
});
// Set the graphics as an array to the Features widget instance. The content and title of
// the widget will be set depending on the PopupTemplate of the graphics.
// Each graphic may share the same PopupTemplate or have a unique PopupTemplate
let graphics = [g1, g2, g3, g4, g5];
const featuresWidget = new Features({
  container: "features-widget",
  features: graphics
  visible: true
});

goToOverride GoToOverride

此函数提供了覆盖 MapView goTo() 或 SceneView goTo() 方法的能力。

另请参阅

示例

// The following snippet uses the Search widget but can be applied to any
// widgets that support the goToOverride property.
search.goToOverride = function(view, goToParams) {
  goToParams.options.duration = updatedDuration;
  return view.goTo(goToParams.target, goToParams.options);
};

headingLevel Number

指示用于微件标题的标题级别。默认情况下，标题呈现为 2 级标题 (例如，<h2>Popup title</h2>)。根据微件在应用程序中的位置，您可能需要调整此标题以获得正确的语义。这对于满足可访问性标准很重要。

icon String inherited

表示微件的图标。它通常在微件由另一微件控制时使用 (例如在 Expand 微件中)。

默认值：null

id String inherited

创建微件时分配给微件的唯一 ID。如果不是由开发人员设置的，它将默认为容器 Id，或者如果没有容器 ID，则将自动生成。

label String

微件的默认的标注。

promises Promise

尚未完成的一系列待定 Promises。如果没有待处理的 Promises，则值为 null。解析待处理的 Promises 后，它们将从此数组中移除，并且其返回的要素将推送到要素数组中。

selectedFeature Graphicreadonly

Features 微件访问的所选要素。微件中显示的内容是根据分配给此要素的 PopupTemplate 确定的。

selectedFeatureIndex Number

所选要素的索引。设置要素后，将自动选择第一个索引。

selectedFeatureWidget Featurereadonly

返回对当前 Feature 的引用。如果需要获取对 Feature 微件的引用以便对其进行任何更改，这将非常有用。

title String

Features 微件的标题。无论选择何种要素，都可将其设置为任何字符串值。如果所选要素具有 PopupTemplate，则在此处使用相应模板中设置的标题。

另请参阅

headingLevel

示例

// This title will display in the widget unless a selected feature's
// PopupTemplate overrides it.
featuresWidget.title = "Population by zip codes in Southern California";

view MapView|SceneView

对 MapView 或 SceneView 的引用。设置此选项可将微件链接到特定视图。

viewModel FeaturesViewModel

此类包含控制此微件行为的所有逻辑。请参阅 FeaturesViewModel 类来访问微件上的所有属性和方法。

visible Boolean

指示微件是否可见。

visibleElements VisibleElements

微件中显示的可见元素。这提供了打开/关闭微件显示的各个元素的能力。

方法概述

显示继承的方法

隐藏继承的方法

返回值类值	描述	类
	添加一个或多个与对象生命周期相关联的句柄更多详情	Accessor
	使用此方法从微件中移除焦点。更多详情	Features
String	用于为微件的 `class` 属性构建值的实用方法。更多详情	Widget
	从 Features 微件中移除 promises、要素、内容和标题。更多详情	Features
	这是一种关闭微件的方便方法。更多详情	Features
	销毁微件实例。更多详情	Widget
Boolean	在实例上触发事件。更多详情	Features
Promise<FetchPopupFeaturesResult>	使用此方法可在给定屏幕位置返回要素。更多详情	Features
	如果微件能够聚焦，则使用此方法将焦点分配给微件。更多详情	Features
Boolean	指示实例上是否存在与提供的事件名称相匹配的事件监听器。更多详情	Features
Boolean	如果存在指定的句柄组，则返回 true。更多详情	Accessor
Boolean	`isFulfilled()` 可用于验证创建类的实例是否已完成 (已解决或已拒绝)。更多详情	Widget
Boolean	`isRejected()` 可用于验证创建类的实例是否被拒绝。更多详情	Widget
Boolean	`isResolved()` 可用于验证创建类的实例是否已解决。更多详情	Widget
FeaturesViewModel	在下一个索引处选取与所选要素相关的要素。更多详情	Features
Object	在实例上注册事件处理程序。更多详情	Features
	在容器中打开 Features 微件，其中包含使用 `content` 显式定义的内容或由输入要素的 PopupTemplate 驱动的内容。更多详情	Features
	添加一个或多个与微件的生命周期相关联的句柄。更多详情	Widget
	此方法主要由开发人员在实现自定义微件时使用。更多详情	Widget
FeaturesViewModel	在上一个索引处选取与所选要素相关的要素。更多详情	Features
	移除对象拥有的句柄组。更多详情	Accessor
Object	此方法主要由开发人员在实现自定义微件时使用。更多详情	Widget
	立即将微件渲染到 DOM。更多详情	Widget
	此方法主要由开发人员在实现自定义微件时使用。更多详情	Widget
	触发 trigger-action 事件，并在操作数组中的指定索引处执行操作。更多详情	Features
Promise	`when()` 一旦创建了类的实例，就可以使用。更多详情	Widget

方法详细说明

addHandles(handleOrHandles, groupKey)inherited

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时，将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();

参数

handleOrHandles WatchHandle|WatchHandle []

对象销毁后，标记为要移除的句柄。

groupKey *

optional

标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键，则句柄将被添加到默认组。

blur()

使用此方法从微件中移除焦点。

classes(classNames){String}inherited

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

参数

classNames String|String []|Object

repeatable

类名称。

类型	描述
String	计算的类名。

另请参阅

指南 - 自定义微件基础知识 (渲染器)

示例

// .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)} />
  );
}

clear()

从 Features 微件中移除 promises、要素、内容和标题。

close()

这是一种关闭微件的方便方法。或者，用户也可通过将 visible 属性直接设置为 false 来关闭微件。

另请参阅

Features.visible

destroy()inherited

销毁微件实例。

emit(type, event){Boolean}

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

参数

type String

事件的名称。

event Object

optional

事件有效负载。

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

fetchFeatures(screenPoint, options){Promise<FetchPopupFeaturesResult>}

使用此方法可在给定屏幕位置返回要素。这些要素是从视图中的所有 layerviews 中获取的。要使用此函数，图层必须具有关联的 PopupTemplate。此方法允许开发人员控制如何处理输入位置。

参数

screenPoint Object

表示屏幕上一个点的对象。此点可位于 MapView 或 SceneView 中。

规范

x Number

x 坐标。

y Number

y 坐标。

options FetchFeaturesOptions

optional

要传递到 fetchFeatures 方法中的选项。

类型描述

Promise<FetchPopupFeaturesResult> 使用所选的 hitTest 位置进行解析。此外，如果直接在视图上执行 hitTest，它还返回图形数组、包含所有结果图形数组的单个 Promise 或包含此结果图形数组及其关联 layerview 的对象数组。最常见的情形是，如果访问所有要素，请使用结果的 allGraphicsPromise 中返回的单个 promise，并调用 .then()，如示例代码段中所示。

类型	描述
Promise<FetchPopupFeaturesResult>	使用所选的 `hitTest` 位置进行解析。此外，如果直接在视图上执行 `hitTest`，它还返回图形数组、包含所有结果图形数组的单个 Promise 或包含此结果图形数组及其关联 layerview 的对象数组。最常见的情形是，如果访问所有要素，请使用结果的 allGraphicsPromise 中返回的单个 promise，并调用 `.then()`，如示例代码段中所示。

示例

// Use reactiveUtils to watch the view's click event.
reactiveUtils.on(() => view, "click",
(event) => {
  // Call fetchFeatures and pass in the click event screenPoint
  featuresWidget.fetchFeatures(event.screenPoint).then((response) => {
    // Access the response from fetchFeatures
    response.allGraphicsPromise.then((graphics) => {
    // If there are no graphics in the click event, then make sure
    // the Features widget is not showing.
      if(graphics.length === 0){
        featuresWidget.visible = false;
      }
      // If graphics do exist, set the Features widget features property to the returned
      // graphics from fetchFeatures and set the visible property to true.
      else{
        featuresWidget.features = graphics;
        featuresWidget.visible = true;
      }
    });
  });

focus()

如果微件能够聚焦，则使用此方法将焦点分配给微件。

hasEventListener(type){Boolean}

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

参数

type String

事件的名称。

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

hasHandles(groupKey){Boolean}inherited

如果存在指定的句柄组，则返回 true。

参数

groupKey *

optional

组键。

类型	描述
Boolean	如果存在指定的句柄组，则返回 `true`。

示例

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

isFulfilled(){Boolean}inherited

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

类型	描述
Boolean	指示创建类的实例是否已完成 (已解决或已拒绝)。

isRejected(){Boolean}inherited

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

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

isResolved(){Boolean}inherited

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

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

next(){FeaturesViewModel}

在下一个索引处选取与所选要素相关的要素。

类型	描述
FeaturesViewModel	返回弹出窗口视图模型的实例。

另请参阅

selectedFeatureIndex

on(type, listener){Object}

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

参数

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);
});

open(options)

在容器中打开 Features 微件，其中包含使用 content 显式定义的内容或由输入要素的 PopupTemplate 驱动的内容。此方法可将 Feature 微件的 visible 属性设置为 true。或者，用户也可通过将 visible 属性直接设置为 true 来显示 Features 微件。

参数

规范

options Object

optional

定义打开时 Feature 微件的内容。

规范

actions Collection<ActionButton>

optional

此属性允许您在 Features 微件打开时为操作栏指定一组操作。

content String|HTMLElement|Widget

optional

设置微件的内容。

features Graphic []

optional

设置微件的要素，这些要素根据每个图形的 PopupTemplate 填充微件的标题和内容。

featureMenuOpen Boolean

optional

默认值： false

此属性可在微件中将多个要素显示在列表中，而不是显示第一个所选要素。将此选项设置为 true 以允许用户滚动浏览从查询返回的要素列表，然后选择要在微件中显示的选择。

fetchFeatures Boolean

optional

默认值： false

当为 true 时，表示微件应获取此要素的内容并显示它。如果不存在 PopupTemplate，则在 defaultPopupTemplateEnabled = true 的情况下，将为图层创建一个默认模板。为了使此选项可用，必须有一个有效的 view 和 location 设置。

location Geometry

optional

当 fetchFeatures=true 时，用于查询要素的几何。

promises Promise []

optional

在微件中设置待处理的 promises。promises 解决后，将显示微件。每个 promise 必须解析为图形数组。

title String

optional

设置微件的标题。

updateLocationEnabled String

optional

指示在 selectedFeatureIndex 更改时是否更新位置。

另请参阅

示例

// Use reactiveUtils to watch the view's click event.
reactiveUtils.on(() => view, "click",
(event) => {
  featuresWidget.open({
    // Title and content displayed in the widget
    title: `Click location: (${event.mapPoint.x},${event.mapPoint.y})`,
    content: "This is the default content displayed on click."
  });
});

// The Features widget must have a view set on the widget along with the
// location property to fetch features.
// Use reactiveUtils to watch the view's click event.
reactiveUtils.on(() => view, "click",
(event) => {
  featuresWidget.open({
    location: event.mapPoint,
    // Display the content for the selected feature(s) if a popupTemplate is defined.
    fetchFeatures: true
  });
});

// Open the Features widget with a specified array of graphics that already
// have a PopupTemplate set and display the feature menu when it opens.
featuresWidget.open({
  // array of graphics
  features: graphics,
  // selected features initially display in a list
  featureMenuOpen: true
});

own(handleOrHandles)inherited

添加一个或多个与微件的生命周期相关联的句柄。当微件被销毁时，将移除句柄。

const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true}
);

this.own(handle); // Handle gets removed when the widget is destroyed.

参数

handleOrHandles WatchHandle|WatchHandle []

微件销毁后，标记为要移除的句柄。

postInitialize()inherited

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

previous(){FeaturesViewModel}

在上一个索引处选取与所选要素相关的要素。

类型	描述
FeaturesViewModel	返回 Features 微件视图模型的实例。

另请参阅

selectedFeatureIndex

removeHandles(groupKey)inherited

移除对象拥有的句柄组。

参数

groupKey *

optional

要移除的组键或组键的数组或集合。

示例

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

render(){Object}inherited

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

类型	描述
Object	渲染的虚拟节点。

renderNow()inherited

立即将微件渲染到 DOM。

scheduleRender()inherited

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

triggerAction(actionIndex)

触发 trigger-action 事件，并在操作数组中的指定索引处执行操作。

参数

actionIndex Number

要执行的 action 的索引。

when(callback, errback){Promise}inherited

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
});

类型定义

FetchFeaturesOptions

要与 fetchFeatures 方法一起使用的可选属性。

属性

event Object

optional

MapView 或 SceneView 的 click 事件。可以提供该事件，以便根据指针类型调整查询半径。例如，触摸事件查询更大的半径。

signal AbortSignal

optional

可用于中止异步任务的信号对象。当发出中止信号时，返回的 Promise 将被拒绝，并具有一个名为 AbortError 的错误。另请参阅 AbortController 以获取有关如何构造可用于传递中止信号的控制器的更多信息。

VisibleElements

微件中显示的可见元素。这提供了打开/关闭微件显示的各个元素的能力。

属性

featureNavigation Boolean

optional

默认值：true

指示是否显示要素导航的分页。这允许用户使用分页箭头滚动浏览各种所选要素。

closeButton Boolean

optional

默认值：true

指示是否在微件对话框中显示关闭按钮。

actionBar Boolean

optional

默认值：true

指示是否显示包含将要显示的要素操作的操作栏。

heading Boolean

optional

默认值：true

指示是否显示微件标题。

spinner Boolean

optional

默认值：true

指示是否显示微件的加载微调器。

事件概述

名称	类型	描述	类
	{action: ActionButton}	在用户单击 Features 微件中的操作后触发。更多详情	Features

事件详细说明

trigger-action

在用户单击 Features 微件中的操作后触发。此事件可用于定义单击特定操作时要执行的自定义函数。有关其工作原理的详细信息，请参阅下面的示例。

属性

action ActionButton

用户单击的操作。有关此对象的说明及其属性的规范，请参阅视图模型类上的 actions 属性。

另请参阅

示例

featuresWidget.open({
  location: event.mapPoint,
  fetchFeatures: true,
  featureMenuOpen: true,
  actions: [{
    // This text is displayed as a tooltip
    title: "Zoom out",
    // The ID used to reference this action in the event handler
    id: "zoom-out",
    // Sets the icon font used to style the action button
    className: "geoscene-icon-zoom-out-magnifying-glass"
  },
  {
    title: "Delete Feature",
    id: "delete-feature-action",
    icon: "trash"
  }]
});

// Fires each time an action is clicked
reactiveUtils.on(()=> featuresWidget, "trigger-action", (event)=>{
  // If the zoom-out action is clicked, execute the following code
  if(event.action.id === "zoom-out"){
    // Zoom out two levels (LODs)
    view.goTo({
      center: view.center,
      zoom: view.zoom - 2
    });
  }
});

GeoScene Maps SDK for JavaScript参考手册

构造函数

属性概述

属性详细信息

方法概述

方法详细说明

类型定义

事件概述

事件详细说明