mcpField
A
arcgis-widgets-advanced

arcgis-widgets-advanced

github.com/saschabrunnerch开发2348 次安装29 周前更新
代码仓库

关于 arcgis-widgets-advanced

面向 ArcGIS 应用开发者的技能，介绍建筑、室内地图、定位、导航、影像、视频和直方图筛选等专用组件，并说明组件及 Core API 用法和各自要求。

主要功能

  1. 01介绍建筑与室内楼层浏览组件
  2. 02涵盖 GPS 追踪和设备定位
  3. 03显示地图比例尺与罗盘方向
  4. 04提供影像和视频查看组件
  5. 05用直方图范围滑块筛选图层数据

适用场景

  1. 01在 3D 场景中浏览建筑图层
  2. 02按楼层筛选具备楼层信息的室内地图
  3. 03在地图上追踪或定位设备
  4. 04通过直方图范围缩小图层数据

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/saschabrunnerch/arcgis-maps-sdk-js-ai-context --skill arcgis-widgets-advanced

安装后在 Claude Code 中输入/arcgis-widgets-advanced确认已加载。

详细介绍

ArcGIS 高级微件

在需要探索建筑、室内制图、设备 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");
const Locate = await $arcgis.import("@arcgis/core/widgets/Locate.js");
const ScaleBar = await $arcgis.import("@arcgis/core/widgets/ScaleBar.js");

组件概览

组件微件类用途
arcgis-building-explorerBuildingExplorer探索建筑场景图层
arcgis-floor-filterFloorFilter按楼层筛选室内地图
arcgis-oriented-imagery-viewerOrientedImageryViewer查看定向影像
arcgis-video-playerVideoPlayer播放视频服务馈送
arcgis-trackTrack追踪设备 GPS 位置
arcgis-locateLocate缩放至用户位置
arcgis-scale-barScaleBar显示地图比例尺
arcgis-compassCompass显示北向
arcgis-navigation-toggleNavigationToggle在平移和旋转之间切换
—HistogramRangeSlider带范围选择的直方图（仅限 Core API）

BuildingExplorer

按专业和类别探索并筛选 BuildingSceneLayer 数据。仅适用于 3D SceneView。

BuildingExplorer 组件
<arcgis-scene>
  <arcgis-building-explorer slot="top-right"></arcgis-building-explorer>
</arcgis-scene>

<script type="module">
  import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer.js";

  const sceneElement = document.querySelector("arcgis-scene");
  await sceneElement.viewOnReady();

  const buildingLayer = new BuildingSceneLayer({
    url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__United_States__NewYork__702702_702_Main/SceneServer",
  });

  sceneElement.map.add(buildingLayer);
</script>
BuildingExplorer 微件（Core API）
import BuildingExplorer from "@arcgis/core/widgets/BuildingExplorer.js";
import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer.js";

const buildingLayer = new BuildingSceneLayer({
  url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__United_States__NewYork__702702_702_Main/SceneServer",
});

map.add(buildingLayer);

const buildingExplorer = new BuildingExplorer({
  view: view,
  layers: [buildingLayer],
});

view.ui.add(buildingExplorer, "top-right");
带外部参考的 BuildingExplorer
<calcite-shell>
  <calcite-shell-panel slot="panel-start">
    <calcite-panel heading="Building Explorer">
      <arcgis-building-explorer
        reference-element="sceneView"
      ></arcgis-building-explorer>
    </calcite-panel>
  </calcite-shell-panel>

  <arcgis-scene id="sceneView"></arcgis-scene>
</calcite-shell>

FloorFilter

按设施和楼层筛选支持楼层信息的 Web 地图。需要支持楼层信息的 Web 地图。

FloorFilter 组件
<arcgis-map item-id="YOUR_FLOOR_AWARE_WEBMAP_ID">
  <arcgis-floor-filter slot="top-left"></arcgis-floor-filter>
</arcgis-map>
FloorFilter 微件（Core API）
import FloorFilter from "@arcgis/core/widgets/FloorFilter.js";
import WebMap from "@arcgis/core/WebMap.js";

const webMap = new WebMap({
  portalItem: { id: "YOUR_FLOOR_AWARE_WEBMAP_ID" },
});

const view = new MapView({
  container: "viewDiv",
  map: webMap,
});

await view.when();

const floorFilter = new FloorFilter({ view: view });
view.ui.add(floorFilter, "top-left");
FloorFilter 事件
import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";

reactiveUtils.watch(
  () => floorFilter.level,
  (level) => console.log("Selected level:", level),
);

reactiveUtils.watch(
  () => floorFilter.facility,
  (facility) => console.log("Selected facility:", facility),
);

OrientedImageryViewer

查看并浏览在现场采集的定向影像。需要 OrientedImageryLayer。

OrientedImageryViewer 组件
<arcgis-map>
  <arcgis-oriented-imagery-viewer
    slot="top-right"
  ></arcgis-oriented-imagery-viewer>
</arcgis-map>

<script type="module">
  import OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";

  const viewElement = document.querySelector("arcgis-map");
  const viewer = document.querySelector("arcgis-oriented-imagery-viewer");

  await viewElement.viewOnReady();

  const oiLayer = new OrientedImageryLayer({
    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OrientedImagery/MapServer/0",
  });

  viewElement.map.add(oiLayer);
  viewer.layer = oiLayer;
</script>
OrientedImageryViewer 微件（Core API）
import OrientedImageryViewer from "@arcgis/core/widgets/OrientedImageryViewer.js";
import OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";

const oiLayer = new OrientedImageryLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OrientedImagery/MapServer/0",
});

map.add(oiLayer);

const viewer = new OrientedImageryViewer({
  view: view,
  layer: oiLayer,
});

view.ui.add(viewer, "top-right");

VideoPlayer

播放来自 VideoLayer 服务的视频馈送。需要 VideoLayer。

VideoPlayer 组件
<arcgis-map>
  <arcgis-video-player slot="top-right"></arcgis-video-player>
</arcgis-map>

<script type="module">
  import VideoLayer from "@arcgis/core/layers/VideoLayer.js";

  const viewElement = document.querySelector("arcgis-map");
  const videoPlayer = document.querySelector("arcgis-video-player");

  await viewElement.viewOnReady();

  const videoLayer = new VideoLayer({
    url: "https://your-server.com/arcgis/rest/services/VideoService/MapServer/0",
  });

  viewElement.map.add(videoLayer);
  videoPlayer.layer = videoLayer;
</script>

Track

实时追踪用户设备的 GPS 位置。需要 HTTPS 和用户授权。

Track 组件
<arcgis-map
  basemap="streets-navigation-vector"
  center="-118.24, 34.05"
  zoom="12"
>
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-track slot="top-left"></arcgis-track>
</arcgis-map>
Track 微件（Core API）
import Track from "@arcgis/core/widgets/Track.js";
import Graphic from "@arcgis/core/Graphic.js";

const track = new Track({
  view: view,
  useHeadingEnabled: true,
  goToOverride: (view, options) => {
    options.target.scale = 1500;
    return view.goTo(options.target);
  },
});

view.ui.add(track, "top-left");
track.start();
Track 事件
track.on("track", (event) => {
  const { position } = event;
  console.log("Lat:", position.coords.latitude);
  console.log("Lon:", position.coords.longitude);
  console.log("Accuracy:", position.coords.accuracy);
});

track.on("track-error", (event) => {
  console.error("Tracking error:", event.error);
});
使用自定义符号的 Track
const track = new Track({
  view: view,
  graphic: new Graphic({
    symbol: {
      type: "simple-marker",
      size: 12,
      color: "blue",
      outline: { color: "white", width: 2 },
    },
  }),
});

view.ui.add(track, "top-left");

Locate

缩放至用户当前位置。用于查找设备位置的单操作微件。

Locate 组件
<arcgis-map
  basemap="streets-navigation-vector"
  center="-118.24, 34.05"
  zoom="12"
>
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-locate slot="top-left"></arcgis-locate>
</arcgis-map>
Locate 微件（Core API）
import Locate from "@arcgis/core/widgets/Locate.js";

const locate = new Locate({
  view: view,
  useHeadingEnabled: false,
  goToOverride: (view, options) => {
    options.target.scale = 1500;
    return view.goTo(options.target);
  },
});

view.ui.add(locate, "top-left");
Locate 事件
locate.on("locate", (event) => {
  console.log(
    "Located at:",
    event.position.coords.latitude,
    event.position.coords.longitude,
  );
});

locate.on("locate-error", (event) => {
  console.error("Location error:", event.error);
});

ScaleBar

显示表示地图比例尺的比例尺指示器。

ScaleBar 组件
<arcgis-map basemap="streets-navigation-vector">
  <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
</arcgis-map>
ScaleBar 微件（Core API）
import ScaleBar from "@arcgis/core/widgets/ScaleBar.js";

const scaleBar = new ScaleBar({
  view: view,
  unit: "dual", // "metric", "imperial", "dual", "non-metric"
  style: "line", // "line" or "ruler"
});

view.ui.add(scaleBar, "bottom-left");

Compass

显示指示当前方向的罗盘指示器。

Compass 组件
<arcgis-map basemap="streets-navigation-vector">
  <arcgis-compass slot="top-left"></arcgis-compass>
</arcgis-map>


<arcgis-scene>
  <arcgis-compass slot="top-left"></arcgis-compass>
</arcgis-scene>
Compass 微件（Core API）
import Compass from "@arcgis/core/widgets/Compass.js";

const compass = new Compass({ view: view });
view.ui.add(compass, "top-left");

// Clicking the compass resets rotation to north
// Programmatically reset:
view.rotation = 0; // 2D
view.goTo({ heading: 0 }); // 3D

NavigationToggle

在平移和旋转导航模式之间切换。主要适用于 3D SceneView。

NavigationToggle 组件
<arcgis-scene>
  <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
</arcgis-scene>
NavigationToggle 微件（Core API）
import NavigationToggle from "@arcgis/core/widgets/NavigationToggle.js";

const navigationToggle = new NavigationToggle({
  view: view,
  layout: "horizontal", // "horizontal" or "vertical"
});

view.ui.add(navigationToggle, "top-left");

HistogramRangeSlider

显示直方图，并提供可调整范围的滑块手柄以筛选数据。仅限 Core API。

基本 HistogramRangeSlider
import HistogramRangeSlider from "@arcgis/core/widgets/HistogramRangeSlider.js";
import * as histogram from "@arcgis/core/smartMapping/statistics/histogram.js";

const histogramResult = await histogram.histogram({
  layer: featureLayer,
  field: "population",
  numBins: 30,
});

const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue],
  excludedBarColor: "#d7d7d7",
  rangeType: "between",
  container: "sliderDiv",
});
使用图层筛选的 HistogramRangeSlider
const fieldName = "median_income";

const histogramResult = await histogram.histogram({
  layer: featureLayer,
  field: fieldName,
  numBins: 50,
});

const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue],
  excludedBarColor: "#d7d7d7",
  rangeType: "between",
  labelFormatFunction: (value) => "$" + Math.round(value).toLocaleString(),
  container: "sliderDiv",
});

// Filter layer when slider values change
slider.on(["thumb-change", "thumb-drag", "segment-drag"], () => {
  const [min, max] = slider.values;
  featureLayer.definitionExpression = `${fieldName} >= ${min} AND ${fieldName} <= ${max}`;
});
HistogramRangeSlider 配置
const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: 0,
  max: 100,
  values: [20, 80],
  rangeType: "between", // "between", "not-between", "at-least", "at-most", "equal", "not-equal"
  excludedBarColor: "#d7d7d7",
  includedBarColor: "#007ac2",
  dataLines: [{ value: 50, label: "Average" }],
  precision: 2,
  container: "sliderDiv",
});

组合使用多个微件

完整的 3D 建筑探索应用
<calcite-shell>
  <calcite-navigation slot="header">
    <calcite-navigation-logo
      slot="logo"
      heading="Building Explorer"
    ></calcite-navigation-logo>
  </calcite-navigation>

  <calcite-shell-panel slot="panel-start">
    <calcite-panel heading="Building">
      <arcgis-building-explorer
        reference-element="sceneView"
      ></arcgis-building-explorer>
    </calcite-panel>
  </calcite-shell-panel>

  <arcgis-scene id="sceneView">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
    <arcgis-compass slot="top-left"></arcgis-compass>
    <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
    <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
  </arcgis-scene>
</calcite-shell>

<script type="module">
  import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer.js";

  const sceneElement = document.querySelector("arcgis-scene");
  await sceneElement.viewOnReady();

  const buildingLayer = new BuildingSceneLayer({
    url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__United_States__NewYork__702702_702_Main/SceneServer",
  });

  sceneElement.map.add(buildingLayer);
</script>
使用楼层筛选器进行室内制图
<arcgis-map item-id="YOUR_FLOOR_AWARE_WEBMAP_ID">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-floor-filter slot="top-left"></arcgis-floor-filter>
  <arcgis-locate slot="top-left"></arcgis-locate>
  <arcgis-track slot="top-left"></arcgis-track>
  <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
</arcgis-map>
3D 场景中的导航微件
<arcgis-scene basemap="satellite">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-compass slot="top-left"></arcgis-compass>
  <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
  <arcgis-locate slot="top-left"></arcgis-locate>
  <arcgis-scale-bar slot="bottom-left"></arcgis-scale-bar>
</arcgis-scene>

参考示例

  • building-scene-layer-explorer - 浏览建筑场景图层
  • widgets-floorfilter - 室内楼层筛选
  • layers-orientedimagerylayer - 定向影像查看器
  • widgets-track - GPS 跟踪微件
  • widgets-locate - 定位微件
  • widgets-scalebar - ScaleBar 微件配置
  • histogram-range-slider - 用于筛选的直方图范围滑块

常见问题

  1. Track 微件需要 HTTPS：Track 和 Locate 使用 Geolocation API，该 API 仅适用于 HTTPS 源（或 localhost）。在 HTTP 上会静默失效。

  2. FloorFilter 需要支持楼层感知的 Web 地图：需要配置了楼层感知数据（包括设施和楼层信息）的 Web 地图。标准 Web 地图不会显示任何内容。

  3. BuildingExplorer 仅适用于 SceneView 中的 BuildingSceneLayer：需要同时使用 3D SceneView（而非 MapView）和至少一个 BuildingSceneLayer。它不适用于其他图层类型，也不适用于 2D。

  4. HistogramRangeSlider 需要有效的分箱数据：bins 属性必须是一个对象数组，且对象包含 minValue、maxValue 和 count 属性。使用 smartMapping/statistics/histogram 从图层数据生成有效的分箱数据。

  5. 外部组件缺少 reference-element：将微件组件放置在地图／场景元素之外（例如 Calcite 面板中）时，请将 reference-element 属性设置为地图／场景元素 ID。

相关技能

  • 基础 UI 微件和 Calcite 集成，请参阅 arcgis-widgets-ui
  • 测量、打印和路线规划工具，请参阅 arcgis-map-tools
  • 智能制图统计数据和直方图，请参阅 arcgis-smart-mapping

评论

支持 Markdown