arcgis-widgets-advanced

用途

该技能用于在 ArcGIS Maps SDK for JavaScript 应用中添加专业化和高级控件，覆盖建筑探查、室内地图、设备 GPS 跟踪、导航辅助、直方图筛选和媒体查看等场景。基础控件（Legend、LayerList、Search 等）参见 arcgis-widgets-ui，测量、打印、路径规划、卷帘工具参见 arcgis-map-tools。

导入方式

支持三种方式：

直接 ESM 导入：

import Track from "@arcgis/core/widgets/Track.js";
import Locate from "@arcgis/core/widgets/Locate.js";
import ScaleBar from "@arcgis/core/widgets/ScaleBar.js";
import Compass from "@arcgis/core/widgets/Compass.js";
import NavigationToggle from "@arcgis/core/widgets/NavigationToggle.js";
import HistogramRangeSlider from "@arcgis/core/widgets/HistogramRangeSlider.js";
import BuildingExplorer from "@arcgis/core/widgets/BuildingExplorer.js";
import FloorFilter from "@arcgis/core/widgets/FloorFilter.js";

CDN 动态导入：

const Track = await $arcgis.import("@arcgis/core/widgets/Track.js");

Web Components 组件：直接在 arcgis-map 或 arcgis-scene 内通过 slot 挂载，如 <arcgis-track slot="top-left"></arcgis-track>。

控件一览

组件	控件类	用途
arcgis-building-explorer	BuildingExplorer	探查建筑场景图层
arcgis-floor-filter	FloorFilter	按楼层过滤室内地图
arcgis-oriented-imagery-viewer	OrientedImageryViewer	查看定向影像
arcgis-video-player	VideoPlayer	播放视频服务流
arcgis-track	Track	跟踪设备 GPS 位置
arcgis-locate	Locate	缩放到用户位置
arcgis-scale-bar	ScaleBar	显示地图比例尺
arcgis-compass	Compass	显示正北朝向
arcgis-navigation-toggle	NavigationToggle	切换平移与旋转
—	HistogramRangeSlider	带范围选择的直方图（仅 Core API）

主要控件说明

BuildingExplorer：按专业和类别探查与过滤 BuildingSceneLayer 数据，仅支持 3D SceneView。可通过 slot 挂载或 Core API 创建并指定 view、layers。放置在外部 Calcite 面板时需设置 reference-element 指向场景元素 ID。

FloorFilter：按设施和楼层过滤 floor-aware 的 web map。支持通过 reactiveUtils.watch 监听 level 和 facility 变化。

OrientedImageryViewer：查看和浏览野外采集的定向影像，需要 OrientedImageryLayer。

VideoPlayer：播放来自 VideoLayer 服务的视频流。

Track：实时跟踪用户设备 GPS 位置，需要 HTTPS 与用户授权。支持 useHeadingEnabled、goToOverride 与自定义 graphic 符号，可监听 track 和 track-error 事件。

Locate：单次操作缩放至用户当前位置，可监听 locate 和 locate-error 事件。

ScaleBar：显示比例尺，unit 支持 "metric"、"imperial"、"dual"、"non-metric"，style 支持 "line" 或 "ruler"。

Compass：显示当前朝向的指南针，点击可将旋转重置为正北（2D 设置 view.rotation = 0，3D 使用 view.goTo({ heading: 0 })）。

NavigationToggle：在平移与旋转导航模式间切换，主要用于 3D SceneView，layout 支持 "horizontal" 或 "vertical"。

HistogramRangeSlider：显示带可调范围滑块的直方图用于过滤数据，仅 Core API。需通过 smartMapping/statistics/histogram 生成 bins，rangeType 支持 "between"、"not-between"、"at-least"、"at-most"、"equal"、"not-equal"。可在滑块变化时更新 featureLayer.definitionExpression 实现图层过滤。

组合使用

可将多个控件组合到同一地图或场景中，例如完整 3D 建筑探查应用（BuildingExplorer + Zoom + Compass + NavigationToggle + ScaleBar）、室内地图（FloorFilter + Locate + Track + ScaleBar）以及 3D 导航控件组合。

常见问题

Track 控件需要 HTTPS：Track 与 Locate 使用 Geolocation API，仅在 HTTPS 源（或 localhost）下工作，在 HTTP 下会静默失败。
FloorFilter 需要 floor-aware web map：需要配置了设施与楼层信息的 web map，普通 web map 不会显示任何内容。
BuildingExplorer 仅适用于 SceneView 中的 BuildingSceneLayer：需要 3D SceneView（而非 MapView）和至少一个 BuildingSceneLayer，不支持其他图层类型或 2D。
HistogramRangeSlider 需要有效 bins：bins 必须是包含 minValue、maxValue 和 count 属性的对象数组，建议用 smartMapping/statistics/histogram 从图层数据生成。
外部组件缺少 reference-element：将控件组件放在地图/场景元素之外（如 Calcite 面板）时，需将 reference-element 属性设为地图/场景元素 ID。

参考示例

building-scene-layer-explorer、widgets-floorfilter、layers-orientedimagerylayer、widgets-track、widgets-locate、widgets-scalebar、histogram-range-slider。

技能介绍

用途