PopupViewModel

属性概述

属性详细信息

actions Collection<(ActionButton|ActionToggle)>autocast

Autocasts from Object[]

操作或操作切换对象的集合。可以通过单击弹出窗口中符号化的图标或图像来执行每个操作。默认情况下，每个弹出窗口都有一个 zoom-to 操作，并带有一个放大镜图标 。单击此图标时，视图将放大四个 LOD，并以所选要素为中心。

通过将 includeDefaultActions 设置为 false，或在 PopupTemplate 中将 overwriteActions 属性设置为 true，可以从默认弹出式操作中删除此操作。弹出窗口中每个操作的顺序是它们在操作集合中的显示顺序。

每次单击弹出窗口中的操作时，都会触发 trigger-action 事件。应使用此事件为单击的每个操作执行自定义代码。例如，如果要向弹出窗口添加一个 zoom-out 操作以缩小视图多个 LOD，则可以在单独的函数中定义缩小代码。然后，您将在 trigger-action 事件处理程序中调用自定义 zoom-out 函数。有关其工作原理的更多详细信息，请参阅下面的示例代码段。

操作是使用 ActionButton 或 ActionToggle 类中列出的属性定义的。

另请参阅：

• 示例 - 弹出窗口操作

示例：

// Defines an action to zoom out from the selected feature
let zoomOutAction = {
  // This text is displayed as a tooltip
  title: "Zoom out",
  // The ID by which to reference the action in the event handler
  id: "zoom-out",
  // Sets the icon font used to style the action button
  className: "esri-icon-zoom-out-magnifying-glass"
};
// Adds the custom action to the popup.
view.popup.viewModel.actions.push(zoomOutAction);

// The function to execute when the zoom-out action is clicked
function zoomOut() {
  // Zoom out two levels (LODs)
  view.goTo({
    center: view.center,
    zoom: view.zoom - 2
  });
}

// This event fires for each click on any action
view.popup.viewModel.on("trigger-action", function(event){
  // If the zoom-out action is clicked, fire the zoomOut() function
  if(event.action.id === "zoom-out"){
    zoomOut();
  }
});

active Booleanreadonly

起始版本：GeoScene API for JavaScript 4.17

指示弹出窗口在可见且未等待结果时是否处于活动状态。

另请参阅：

• waitingForResult

• visible

allActions Collection<(ActionButton|ActionToggle)>readonly

起始版本：GeoScene API for JavaScript 4.8

弹出窗口中使用的操作或操作切换的集合。

autoCloseEnabled Boolean

起始版本：GeoScene API for JavaScript 4.5

这将在视图照相机或视点更改时关闭弹出窗口。

默认值：false

autoOpenEnabled Boolean

起始版本：GeoScene API for JavaScript 4.10

此属性向 Popup 指示它需要允许或不允许单击事件传播。

在需要停止单击事件传播时使用 view.popup.autoOpenEnabled = false;。

默认值：true

示例：

view.popup.viewModel.autoOpenEnabled = false;
view.on("click", function(event) {
  view.popup.open({
    // Set the popup
  });
});

content String|HTMLElement|Widget

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

另请参阅：

• 示例 - 弹出窗口停靠

示例：

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

declaredClass Stringreadonly inherited

起始版本：GeoScene API for JavaScript 4.7

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

defaultActions Collection<(ActionButton|ActionToggle)>readonly

起始版本：GeoScene API for JavaScript 4.19

一个只读属性，它指定弹出窗口中操作按钮和/或切换 的集合。默认情况下，每个弹出窗口都有一个“缩放至”操作，允许用户缩放到所选要素。

要禁用任何默认操作，必须将 includeDefaultActions 设置为 false。

defaultPopupTemplateEnabled Boolean

起始版本：GeoScene API for JavaScript 4.11

允许为已启用弹出窗口但未定义弹出窗口模板的图层自动创建弹出窗口模板。支持 createPopupTemplate 方法的图层支持自动弹出模板。（支持 FeatureLayer、GeoJSONLayer、OGCFeatureLayer、SceneLayer、CSVLayer、PointCloudLayer、StreamLayer 和 ImageryLayer）。

默认值：false

featureCount Numberreadonly

弹出窗口可用的所选要素的数量。

默认值：0

features Graphic[]

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

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

如果没有与弹出窗口关联的要素此值是 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 popup instance. The content and title of
// the popup 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];
view.popup.viewModel.features = graphics;

featuresPerPage Number

一次要获取的要素数。

默认值：20

featureViewModelAbilities Abilitiesautocast

起始版本：GeoScene API for JavaScript 4.21

定义弹出窗口微件在查询和显示其内容时应使用的特定功能。

featureViewModels FeatureViewModel[]readonly

起始版本：GeoScene API for JavaScript 4.21

弹出窗口微件使用的要素视图模型数组。

goToOverride GoToOverride

起始版本：GeoScene API for JavaScript 4.8

此函数提供了重写 MapView goTo() 或 SceneView goTo() 方法的功能。

另请参阅：

• MapView
• SceneView

示例：

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

highlightEnabled Boolean

起始版本：GeoScene API for JavaScript 4.4

使用 MapView 上设置的 highlightOptions 或 SceneView 上设置的 highlightOptions 来高亮显示选定的弹出窗口要素。

默认值：true

includeDefaultActions Boolean

起始版本：GeoScene API for JavaScript 4.19

指示是否在弹出窗口的 UI 中包含 defaultActions。

要禁用任何默认操作，必须将 includeDefaultActions 设置为 false。

默认值：true

location Point

用于定位弹出窗口的几何。这是在通过选择要素查看弹出窗口时自动设置的。如果使用弹出窗口显示地图中要素不相关的内容（例如任务的结果），则必须先设置此属性，然后才能使弹出窗口对用户可见。

另请参阅：

• 弹出窗口入门

示例：

// Sets the location of the popup to the center of the view
view.popup.location = view.center;
// Displays the popup
view.popup.set("visible", true);

// Sets the location of the popup to the location of a click on the view
view.on("click", function(event){
  view.popup.viewModel.location = event.mapPoint;
  // Displays the popup
  view.popup.viewModel.set("visible", true);
});

pendingPromisesCount Numberreadonly

尚待解析的 promises 数。

默认值：0

另请参阅：

• Popup.promises

promiseCount Numberreadonly

弹出窗口可用的选定 promises 数。

默认值：0

promises Promise[]

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

selectedClusterBoundaryFeature Graphicreadonly

起始版本：GeoScene API for JavaScript 4.19

用于表示 Browse features 操作在集群弹出窗口中处于活动状态时的集群范围。仅当在 FeatureReductionCluster 实例上设置了 PopupTemplate 时，才适用。使用此属性可覆盖所显示聚类范围的默认符号。

另请参阅：

• 示例 - 点聚类 - 生成建议的配置

示例：

view.popup.viewModel.selectedClusterBoundaryFeature.symbol.outline.color = "yellow"

view.popup.viewModel.selectedClusterBoundaryFeature.symbol = {
  type: "simple-fill",
  style: "diagonal-cross",
  color: "green",
  outline: {
    width: 3,
    color: "green"
  }
}

selectedFeature Graphicreadonly

弹出窗口访问的所选要素。弹出窗口的内容是根据分配给此要素的 PopupTemplate 确定的。

selectedFeatureIndex Number

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

state Stringreadonly

视图模型的状态。

可能的值："ready"|"disabled"

默认值：disabled

title String

弹出窗口的标题。无论选择何种要素，都可以在弹出窗口中对其进行一般设置。如果所选要素具有 PopupTemplate，则在此处使用相应模板中设置的标题。

示例：

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

view MapView|SceneView

与弹出窗口实例关联的视图。

visible Boolean

指示弹出窗口是否可见。

默认值：false

waitingForResult Booleanreadonly

起始版本：GeoScene API for JavaScript 4.17

指示弹出窗口在解析 promises 时是否找到要素。

默认值：false

另请参阅：

• active

方法概述

方法详细信息

clear()

从弹出窗口移除 promises、要素内容、标题 和 位置。

emit(type, event){Boolean}

起始版本：GeoScene API for JavaScript 4.5

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

参数：

type String 事件的名称。

event Object optional 事件负载。

返回：

类型	说明
Boolean	true 如果听取了侦听者的通知

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

起始版本：GeoScene API for JavaScript 4.15

使用此方法可在给定屏幕位置返回要素。这些要素是 视图中的所有 LayerViews 中获取的。要使用此功能，图层必须已具有关联的 PopupTemplate，并且其 popupEnabled。然后，可以在自定义弹出窗口或要素微件体验中使用这些要素。一个示例可能是自定义侧面板，该侧面板根据最终用户的单击位置显示特定于要素的信息。此方法允许开发人员控制如何处理输入位置，然后控制如何处理结果。

参数：

screenPoint Object 表示屏幕上的点的对象。此点可以位于 MapView 或 SceneView 中。 规范： x Number x 坐标。 y Number y 坐标。

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

返回：

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

另请参阅：

• 示例 - 要素微件 - 从多个 layerViews 查询图形

示例：

// Add Feature widget to UI
view.ui.add(featureWidget, "top-right");

// Get view's click event
view.on("click", function(event) {
  // Call fetchFeatures and pass in the click event screenPoint
  view.popup.fetchFeatures(event.screenPoint).then(function(response) {
    // Access the response from fetchFeatures
    response.allGraphicsPromise.then(function(graphics) {
      // Set the feature widget's graphic to the returned graphic from fetchFeatures
      featureWidget.graphic = graphics[0];
    });
  });
});

hasEventListener(type){Boolean}

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

参数：

type String 事件的名称。

返回：

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

next(){PopupViewModel}

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

返回：

类型	说明
PopupViewModel	返回弹出窗口视图模型的实例。

另请参阅：

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

在给定位置打开弹出窗口，其中包含使用 content 明确定义的内容或由输入要素的 PopupTemplate 驱动的内容。此方法将弹出窗口的可见属性设置为 true。或者，用户也可以通过将可见属性直接设置为 true 打开弹出窗口。仅当满足 dockOptions 中的视图大小约束或位置属性设置为几何时，才会显示弹出窗口。

参数：

规范：

options Object optional 定义弹出窗口打开时的位置和内容。 规范： title String optional 设置弹出窗口的标题。 content String optional 设置弹出窗口的内容。 fetchFeatures Boolean optional 默认值： false 起始版本：4.12 当 true 时，表示弹出窗口应获取此要素的内容并显示它。如果不存在 PopupTemplate，则在 defaultPopupTemplateEnabled = true 的情况下，将为图层创建一个默认模板。为了使此选项起作用，必须有一个有效的 view 和 location 设置。 location Geometry optional 设置弹出窗口的位置，即用于定位弹出窗口的几何。 features Graphic[] optional 设置弹出窗口的要素，这些要素根据每个图形的 PopupTemplate 填充弹出窗口的标题和内容。 promises Promise[] optional 在弹出窗口中设置待处理的 promises。promises 解决后，将显示弹出窗口。每个 promise 必须解析为一组图形。允许用户滚动查询返回的要素列表，并选择要在弹出窗口中显示的选择。 updateLocationEnabled Boolean optional 默认值： false 当 true 时，指示弹出窗口应根据所选要素的几何更新每个分页要素的位置。 当 true，指示只显示弹出窗口标题。

另请参阅：

• 弹出窗口简介

• Popup.visible

• 示例 - 查询 rest/query

示例：

view.on("click", function(event){
  view.popup.open({
   location: event.mapPoint,  // location of the click on the view
   title: "You clicked here",  // title displayed in the popup
   content: "This is a point of interest"  // content displayed in the popup
  });
});

view.on("click", function(event){
   view.popup.open({
     location: event.mapPoint,  // location of the click on the view
     fetchFeatures: true // display the content for the selected feature if a popupTemplate is defined.
   });
 });

view.popup.open({
  title: "You clicked here",  // title displayed in the popup
  content: "This is a point of interest",  // content displayed in the popup
  updateLocationEnabled: true  // updates the location of popup based on
  // selected feature's geometry
});

view.popup.open({
  features: graphics,  // array of graphics
});

previous(){PopupViewModel}

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

返回：

类型	说明
PopupViewModel	返回弹出窗口视图模型的实例。

另请参阅：

• selectedFeatureIndex

triggerAction(actionIndex)

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

参数：

actionIndex Number 要执行的操作的索引。

事件概述

{action: ActionButtonActionToggle}

事件详细信息

trigger-action

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

属性：

action ActionButton|ActionToggle 用户单击的操作。有关此对象的说明及其属性的规范，请参阅此类的操作属性。

另请参阅：

• actions

示例：

// Defines an action to zoom out from the selected feature
let zoomOutAction = {
  // 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: "esri-icon-zoom-out-magnifying-glass"
};
// Adds the custom action to the popup.
view.popup.viewModel.actions.push(zoomOutAction);

// Fires each time an action is clicked
view.popup.viewModel.on("trigger-action", function(event){
  // If the zoom-out action is clicked, then execute the following code
  if(event.action.id === "zoom-out"){
    // The view zooms out two LODs on each click
    view.goTo({
      center: view.center,
      zoom: view.zoom - 2
    });
  }
});