mcpField
A
arcgis-widgets-advanced

arcgis-widgets-advanced

github.com/saschabrunnerch開発2348 回インストール29 週間前に更新
リポジトリ

arcgis-widgets-advanced について

建物、屋内マップ、位置情報、ナビゲーション、画像、動画、ヒストグラム絞り込み用の ArcGIS ウィジェットを扱う開発者向けスキルです。コンポーネントと Core API の使い方に加え、各ウィジェットの要件も説明します。

主な機能

  1. 01建物や屋内フロアの探索ウィジェットを解説
  2. 02GPS トラッキングと端末位置の特定に対応
  3. 03マップの縮尺とコンパス方位を表示
  4. 04画像および動画の表示ウィジェットを提供
  5. 05ヒストグラム範囲スライダーでレイヤーデータを絞り込み

活用シーン

  1. 013D シーンで建物レイヤーを探索
  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 Advanced Widgets

建物の探索、屋内マッピング、デバイスの 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 Building Explorer アプリの全体例
<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>
Floor Filter を使用した屋内マッピング
<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 - スケールバーウィジェットの構成
  • histogram-range-slider - フィルタリング用ヒストグラム範囲スライダー

よくある問題

  1. Track ウィジェットには HTTPS が必要です：Track と Locate は Geolocation API を使用します。この API は HTTPS オリジン（または localhost）でのみ動作します。HTTP ではエラーが表示されずに失敗します。

  2. FloorFilter にはフロア対応のウェブマップが必要です：施設とフロアの情報を含む、フロア対応データで構成されたウェブマップが必要です。標準的なウェブマップでは何も表示されません。

  3. BuildingExplorer は SceneView の BuildingSceneLayer でのみ動作します：3D SceneView（MapView ではありません）と、少なくとも 1 つの 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 対応