PopupViewModel

属性概述

属性详细信息

actions Collection<(ActionButton|ActionToggle)>autocast

自动转换自 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: "geoscene-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 Maps SDK for JavaScript 4.17

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

另请参阅

• waitingForResult

• visible

allActions Collection<(ActionButton|ActionToggle)>readonly

起始版本：GeoScene Maps SDK for JavaScript 4.8

Popup 中使用的操作或操作切换的集合。

autoCloseEnabled Boolean

起始版本：GeoScene Maps SDK for JavaScript 4.5

这将在 View 照相机或 Viewpoint 发生更改时关闭弹出窗口。

默认值：false

autoOpenEnabled Boolean

起始版本：GeoScene Maps SDK 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
  });
});

browseClusterEnabled Boolean

起始版本：GeoScene Maps SDK for JavaScript 4.24

指示“浏览要素”体验是否在聚类弹出窗口中处于活动状态。当用户使用“浏览要素”聚类弹出操作启用要素浏览时，此值将变为 true。当视图比例更改、弹出窗口关闭或用户禁用“浏览要素”操作时，该值将变为 false。仅当 selectedFeature 是聚合图形并表示聚类时，才应以编程方式设置此选项。

默认值：false

示例

// open the browse features experience for a cluster graphic
view.popup.viewModel.browseClusterEnabled = view.popup.viewModel.selectedFeature?.isAggregate;

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 Maps SDK for JavaScript 4.7

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

defaultActions Collection<(ActionButton|ActionToggle)>readonly

起始版本：GeoScene Maps SDK for JavaScript 4.19

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

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

defaultPopupTemplateEnabled Boolean

起始版本：GeoScene Maps SDK for JavaScript 4.11

允许为已启用弹出窗口但未定义 popupTemplate 的图层自动创建弹出窗口模板。支持 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 Maps SDK for JavaScript 4.21

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

featureViewModels FeatureViewModel[]readonly

起始版本：GeoScene Maps SDK for JavaScript 4.21

Popup 微件使用的要素视图模型数组。

goToOverride GoToOverride

起始版本：GeoScene Maps SDK 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 Maps SDK for JavaScript 4.4

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

默认值：true

includeDefaultActions Boolean

起始版本：GeoScene Maps SDK for JavaScript 4.19

指示是否在 Popup 的 UI 中包含 defaultActions。

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

默认值：true

示例

// Removes the default actions from the popup
view.popup.viewModel.includeDefaultActions = false;

location Point

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

示例

// 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 Maps SDK 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

弹出窗口访问的所选要素。Popup 的内容是根据分配给此要素的 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

与 Popup 实例关联的视图。

visible Boolean

指示弹出窗口是否可见。

默认值：false

waitingForResult Booleanreadonly

起始版本：GeoScene Maps SDK for JavaScript 4.17

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

默认值：false

另请参阅

• active

方法概述

方法详细说明

addHandles(handleOrHandles, groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

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

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

// Handle gets removed when the object is destroyed.
this.addHandles(handle);

参数

handleOrHandles WatchHandle|WatchHandle[] 对象销毁后，标记为要移除的句柄。

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

clear()

从 Popup 中移除 promises、features、content、title 和 location。

emit(type, event){Boolean}

起始版本：GeoScene Maps SDK for JavaScript 4.5

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

参数

type String 事件的名称。

event Object optional 事件有效负载。

返回

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

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

起始版本：GeoScene Maps SDK for JavaScript 4.15

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

参数

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

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

返回

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

示例

// 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。

hasHandles(groupKey){Boolean}inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组，则返回 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");
}

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 驱动的内容。此方法可将弹出窗口的 visible 属性设置为 true。或者，用户也可通过将 visible 属性直接设置为 true 来打开弹出窗口。仅当满足 dockOptions 中的视图大小约束或 location 属性设置为几何时，才会显示弹出窗口。

参数

规范

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

removeHandles(groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数

groupKey * optional 要移除的组键或组键的数组或集合。

示例

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

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

triggerAction(actionIndex)

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

参数

actionIndex Number 要执行的 action 的索引。

事件概述

事件详细说明

trigger-action

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

属性

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

另请参阅

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