"楼层过滤器"微件简化了应用程序中建筑物特定楼层的 GIS 数据的可视化。它允许您将 MapView 或者 SceneView 中显示的平面布置图数据筛选到 site, 站点中的 facility点或者设施中的level
要根据 site, facility或者 level, 地图必须包含相关平面图图层，并在楼层平面图层次结构中链接在一起的要素。在地图属性中将地图定义为楼层感知型地图后，屏幕上的交互式 FloorFilter 微件随即出现，可用于根据配置的地点、设施和标高图层浏览楼层感知数据。 FloorFilter 微件目前支持 FeatureLayers, SceneLayers 和 MapImageLayers (地图服务)。
该小组件还可以与其他过滤功能（如定义查询、选择、范围和时间）一起使用，以进一步控制可视化。例如，您可能希望可视化设施中特定级别上的所有要素，或设施中级别范围内的所有办公室单位。
有关获得对widget样式的完全控制的信息，请参阅样式主题。
// 初始化 FloorFilter
const floorFilter = new FloorFilter({
view: view
});构造函数
属性列表
| 属性 | 类型 | 描述 | 类 | |
|---|---|---|---|---|
| String|HTMLElement | 更多信息 包含widget的DOM元素的ID或者节点 | 更多信息 | Widget | |
| String | 更多信息 类名。 | 更多信息 | Accessor | |
| String | 更多信息 The currently selected facility. | 更多信息 | FloorFilter | |
| Number | 更多信息 指示用于分隔建筑物中楼层的标题的标题级别。 | 更多信息 | FloorFilter | |
| String | 更多信息 创建部件时分配给部件的唯一ID。 | 更多信息 | Widget | |
| String | 更多信息 微件的标签。 | 更多信息 | Widget | |
| String | 更多信息 当前选定的楼层 | 更多信息 | FloorFilter | |
| Boolean | 更多信息 确定微件是展开还是折叠 | 更多信息 | FloorFilter | |
| String | 更多信息 当前选定的站点 | 更多信息 | FloorFilter | |
| MapView|SceneView | 更多信息 | 更多信息 | FloorFilter | |
| FloorFilterViewModel | 更多信息 widget的视图模型。 | 更多信息 | FloorFilter | |
| Boolean | 更多信息 是否显示widget | 更多信息 | Widget |
属性详细说明
-
-
包含widget的DOM元素的ID或者节点，此属性只能设置一次。以下示例都是使用小部件时的有效用例。
示例代码:// 在运行时创建HTML div元素，并将其设置为小部件的容器 const basemapGallery = new BasemapGallery({ view: view, container: document.createElement("div") }); // 添加widget 在 view的右上角 view.ui.add(basemapGallery, { position: "top-right" });// 创建 HTML div 元素 并且设置为widget的容器 const basemapGallery = new BasemapGallery({ view: view, container: basemapGalleryDiv }); // 添加widget 在 view的右上角 view.ui.add(basemapGallery, { position: "top-right" }); // HTML 标签 <body> <div id="viewDiv"></div> <div id="basemapGalleryDiv"></div> </body>// 在添加到视图的UI时指定widget const basemapGallery = new BasemapGallery({ view: view }); // 添加widget 在 view的右上角 view.ui.add(basemapGallery, { position: "top-right" });
-
类名。类的名称声明格式为
geoscene.folder.className。
-
facility String
-
The currently selected facility.
-
headingLevel Number起始版本: GeoScene API for JavaScript 4.22
-
指示用于分隔建筑物中楼层的标题的标题级别。默认情况下，建筑物名称呈现为级别 2 标题 (例如
<h2>Building name</h2>)。根据小部件在应用程序中的位置，您可能需要调整此标题以获得正确的语义。这对于满足辅助功能标准非常重要。- 默认值:2
- 示例:
示例代码:// building headings will render as an <h3> floorFilter.headingLevel = 3;
-
创建部件时分配给部件的唯一ID。 如果不是由开发人员设置的，它将默认为容器ID 或者如果没有容器ID，那么它将自动生成
-
The widget's label.
每当小部件由另一个小部件控制时 (例如 Expand)，此属性都很有用)
-
level String
-
当前选定的楼层。
-
longNames Boolean
-
确定微件是展开还是折叠。如果值为
true, 则展开微件并显示长名称。否则，将使用短名称，并且图标单独显示在按钮上。
-
site String
-
当前选定的站点。
-
对 MapView 或者 SceneView 的引用。如果设置了此属性，则每当以编程方式操作或更新 floors过滤器时。 FloorFilter 微件都会更新视图的楼层属性。此属性将影响视图中的任何楼层感知图层。
-
viewModel FloorFilterViewModelautocast
-
widget的视图模型。 这是一个包含控制此小部件行为的所有逻辑（属性和方法）的类。请参阅 FloorFilterViewModel 类以访问小组件上的所有属性和方法。
-
是否显示widget
如果为
false, 小部件将不再呈现在web文档中。这可能会影响文档中其他元素或小部件的布局。例如，如果此小部件是与 view UI, 右上角关联的三个小部件中的第一个，那么当此小部件不可见时，其他小部件将重新定位。 有关更多信息，请参阅CSS display 值"none".- 默认值:true
示例代码:// 在view中隐藏widget widget.visible = false;
方法列表
| 属性 | 返回值类型 | 描述 | 类 | |
|---|---|---|---|---|
| String | 更多信息 用于为widgets的 | 更多信息 | Widget | |
| 更多信息 销毁widget实例。 | 更多信息 | Widget | ||
| Boolean | 更多信息 在实例上触发事件。 | 更多信息 | Widget | |
| Boolean | 更多信息 指示实例上是否存在与提供的事件名称匹配的事件侦听器。 | 更多信息 | Widget | |
| Boolean | 更多信息
| 更多信息 | Widget | |
| Boolean | 更多信息
| 更多信息 | Widget | |
| Boolean | 更多信息
| 更多信息 | Widget | |
| Object | 更多信息 在实例上注册事件处理程序。 | 更多信息 | Widget | |
| 更多信息 Widget teardown helper. | 更多信息 | Widget | ||
| 更多信息 这种方法主要由开发人员在实现自定义widget时使用。 | 更多信息 | Widget | ||
| Object | 更多信息 这种方法主要由开发人员在实现自定义widget时使用。 | 更多信息 | Widget | |
| 更多信息 立即将widget渲染到DOM。 | 更多信息 | Widget | ||
| 更多信息 这种方法主要由开发人员在实现自定义widget时使用。 | 更多信息 | Widget | ||
| 更多信息 更新提供的WebMap中的 floorFilter 微件定义 | 更多信息 | FloorFilter | ||
| Promise | 更多信息
| 更多信息 | Widget |
方法详细说明
-
用于为widget的类属性构建值的实用方法
class 属性. 这有助于简化CSS类设置.参数:repeatable class 类名称
返回值:类型 描述 String The computed class name. 示例代码:// .tsx语法显示在渲染widget时如何设置CSS classs . render() { const dynamicIconClasses = { [CSS.myIcon]: this.showIcon, [CSS.greyIcon]: !this.showIcon }; return ( <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} /> ); }
-
destroy()inherited
-
销毁widget实例。
-
在实例上触发事件。仅当创建此类的子类时才应使用此方法。
参数:type String事件名称
event Objectoptional事件负载。
返回值:类型 描述 Boolean 如果侦听器收到通知,则为 true
-
isFulfilled()可用于验证创建类的实例是否已完成(无论成功或失败)。 如果已完成，将会返回true。返回值:类型 描述 Boolean 指示创建类的实例是否已完成（无论成功或失败）。
-
isRejected()可用于验证创建类的实例是否失败。 如果失败, 将会返回true。返回值:类型 描述 Boolean 指示是否已拒绝创建类的实例。
-
isResolved()可用于验证创建类的实例是否成功。 如果成功, 将会返回true。返回值:类型 描述 Boolean 指示是否已解析创建类的实例。
-
在实例上注册事件处理程序。调用此方法将事件与侦听器挂钩
参数:要监听的event 或者事件数组
listener Function事件触发时要调用的函数
返回值:类型 描述 Object 返回一个 remove()方法的事件处理程序，该方法用以停止侦听事件。属性 类型 描述 remove Function 当被调用时，从事件中移除监听器。 示例代码:view.on("click", function(event){ // event是事件触发后返回的事件句柄。 console.log(event.mapPoint); });
-
own(handles)inherited
-
Widget teardown helper. 当widget被销毁时，添加到它的任何句柄都将被自动删除。
参数:handles WatchHandle|WatchHandle[]widget销毁后标记为删除的句柄。
-
postInitialize()inherited
-
这种方法主要由开发人员在实现自定义widget时使用。 在widget准备好后执行。
-
这种方法主要由开发人员在实现自定义widget时使用。 它必须由子类实现以进行渲染。
返回值:类型 描述 Object 渲染虚拟节点。
-
renderNow()inherited
-
立即将widget渲染到DOM。
-
scheduleRender()inherited
-
这种方法主要由开发人员在实现自定义widget时使用。 计划小部件渲染。此方法对于影响UI的更改非常有用。
-
updateWebDocument(webmap)
-
更新提供的 WebMap 中的 floorFilter 微件定义。
参数:webmap WebMap要更新的 web 地图。
-
when()创建类的实例后，会被执行一次。该方法接受两个参数：callback函数和errback函数。callback在类的实例加载时执行。 如果类的实例无法加载，则执行errback。参数:callback Functionoptional当 Promise 成功时，该函数将被调用。
errback Functionoptional当 Promise 失败时，该函数将被调用。
返回值:类型 描述 Promise 返回回调结果的新promise，可用于 chain additional functions. 示例代码:// 尽管此示例使用 BasemapGallery widget，但任何作为 Promise 的类实例都可以以相同的方式使用 when() let bmGallery = new BasemapGallery(); bmGallery.when(function(){ // 当 Promise resolved 时，函数将被执行 }, function(error){ // 当 Promise 通过 rejected 抛错时，这个函数将被执行 });