arcgis-utility-networks

ArcGIS Utility Networks

トレース、関連付け、トポロジの検証、接続されたインフラのネットワーク解析など、ユーティリティネットワークに関する作業にこのスキルを使用します。

インポートパターン

ESM（npm）

// Core network class
import UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";

// Widgets
import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
import UtilityNetworkValidateTopology from "@arcgis/core/widgets/UtilityNetworkValidateTopology.js";

// Support
import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
import WebMap from "@arcgis/core/WebMap.js";
import MapView from "@arcgis/core/views/MapView.js";
import esriConfig from "@arcgis/core/config.js";

CDN（動的インポート）

const UtilityNetwork = await $arcgis.import(
  "@arcgis/core/networks/UtilityNetwork.js",
);
const UtilityNetworkTrace = await $arcgis.import(
  "@arcgis/core/widgets/UtilityNetworkTrace.js",
);
const UtilityNetworkAssociations = await $arcgis.import(
  "@arcgis/core/widgets/UtilityNetworkAssociations.js",
);

主な概念

ユーティリティネットワークは、接続されたインフラ（電気、ガス、水道、通信）をモデル化します。主な概念は次のとおりです。

• ネットワークトレース — ネットワーク内の接続をたどります
• 関連付け — 接続、包含、構造物への取り付けの関係です
• サブネットワーク — ネットワーク内の分離された部分です
• トポロジ — ネットワーク接続を検証します

マップコンポーネントのアプローチ

Utility Network Trace コンポーネント

<arcgis-map item-id="471eb0bf37074b1fbb972b1da70fb310">
  <arcgis-utility-network-trace slot="top-right"></arcgis-utility-network-trace>
</arcgis-map>

Utility Network Associations コンポーネント

<arcgis-map item-id="e53b1054b29f4579baf878dcf2effe7a">
  <arcgis-utility-network-associations
    slot="top-right"
  ></arcgis-utility-network-associations>
</arcgis-map>

Utility Network Validate Topology コンポーネント

<arcgis-map item-id="YOUR_WEBMAP_ID">
  <arcgis-utility-network-validate-topology
    slot="top-right"
  ></arcgis-utility-network-validate-topology>
</arcgis-map>

Utility Network Trace Analysis コンポーネント

<arcgis-map item-id="YOUR_WEBMAP_ID">
  <arcgis-utility-network-trace-analysis
    slot="top-right"
  ></arcgis-utility-network-trace-analysis>
</arcgis-map>

コンポーネントの概要

コンポーネント	目的
arcgis-utility-network-trace	インタラクティブなトレース UI
arcgis-utility-network-associations	関連付けの可視化
arcgis-utility-network-trace-analysis	詳細なトレース解析
arcgis-utility-network-validate-topology	トポロジの検証

コア API のアプローチ

UtilityNetworkTrace ウィジェット

esriConfig.portalUrl = "https://www.arcgis.com";

const webmap = new WebMap({
  portalItem: { id: "YOUR_WEBMAP_ID" },
});

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

const utilityNetworkTrace = new UtilityNetworkTrace({
  view: view,
  showSelectionAttributes: true,
  selectOnComplete: true,
});

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

UtilityNetworkTrace のプロパティ

プロパティ	型	説明
view	MapView	マップビュー（必須）
flags	MapPoint[]	開始地点と障壁
selectedTraces	string[]	読み込み時に選択するトレースのグローバル ID
showSelectionAttributes	boolean	結果を整理されたリストとして表示
selectOnComplete	boolean	トレース完了時にフィーチャを自動選択
enableResultArea	boolean	結果エリアのグラフィックスを表示
resultAreaColor	Color	集約されたトレースジオメトリの色

UtilityNetworkTrace のイベント

イベント	説明
trace-complete	トレースの完了後に発生します
result-area-added	結果エリアのグラフィック追加時に発生します
result-area-removed	結果エリアのグラフィック削除時に発生します

UtilityNetworkAssociations ウィジェット

view.when(async () => {
  await webMap.load();

  if (webMap.utilityNetworks.length > 0) {
    const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
    await utilityNetwork.load();

    const unAssociations = new UtilityNetworkAssociations({
      view,
      utilityNetwork,
    });

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

関連付けの種類

• 接続 — フィーチャ間の電気的な接続または流体の接続
• 包含 — 別のフィーチャの内部に含まれるフィーチャ
• 構造物への取り付け — 構造物に取り付けられたフィーチャ

関連付けの表示要素

const unAssociations = new UtilityNetworkAssociations({
  view,
  utilityNetwork,
  visibleElements: {
    maxAllowableAssociationsSlider: true,
    connectivityAssociationsSettings: {
      arrowsToggle: false,
      capSelect: false,
      colorPicker: true,
      stylePicker: true,
      widthInput: true,
    },
    structuralAttachmentAssociationsSettings: {
      arrowsToggle: false,
      capSelect: false,
      colorPicker: true,
      stylePicker: true,
      widthInput: true,
    },
  },
});

ユーティリティネットワークへのアクセス

WebMap からユーティリティネットワークを取得する

await webMap.load();

if (webMap.utilityNetworks && webMap.utilityNetworks.length > 0) {
  const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
  await utilityNetwork.load();

  console.log("Title:", utilityNetwork.title);
  console.log("Dataset name:", utilityNetwork.datasetName);
  console.log("Domain networks:", utilityNetwork.domainNetworks);
  console.log("Network attributes:", utilityNetwork.networkAttributes);
  console.log("Terminal configs:", utilityNetwork.terminalConfigurations);
}

UtilityNetwork のプロパティ

プロパティ	型	説明
title	string	ネットワークのタイトル
datasetName	string	データセット名
domainNetworks	object[]	ユーティリティネットワーク内のドメインネットワーク
networkAttributes	object[]	ネットワーク属性
terminalConfigurations	object[]	ターミナル構成
sharedNamedTraceConfigurations	object[]	共有トレース構成

UtilityNetwork のメソッド

メソッド	説明
load()	ユーティリティネットワークのメタデータを読み込みます
trace(traceParams)	トレースを同期的に実行します
submitTraceJob(traceParams)	トレースを非同期で実行します
queryAssociations(params)	関連付けをクエリします
synthesizeAssociationGeometries(extent)	関連付けのジオメトリを取得します
loadAssociationsTable()	関連付けテーブルを読み込みます（クエリの前に実行することを推奨）

ネットワークトレース

トレースの種類

トレースの種類	説明
接続済み	接続されているすべてのフィーチャを検索します
上流	ソースに向かってトレースします
下流	ソースから離れる方向にトレースします
サブネットワーク	同じサブネットワーク内のフィーチャを検索します
分離	分離ポイントを検索します
ループ	ネットワーク内のループを検索します

プログラムでトレースを実行する

const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
await utilityNetwork.load();

const traceResult = await utilityNetwork.trace(traceParams);

// For long-running traces
const jobInfo = await utilityNetwork.submitTraceJob(traceParams);

関連付けをクエリする

await utilityNetwork.loadAssociationsTable();

const result = await utilityNetwork.queryAssociations(queryParams);

高ズームレベルのサポート

関連付けは非常に高いズームレベルでのみ表示されます。追加の LOD を設定します。

const tileInfo = TileInfo.create({
  spatialReference: { wkid: 102100 },
  numLODs: 32,
});

const view = new MapView({
  container: "viewDiv",
  map: webMap,
  zoom: 25,
  constraints: {
    lods: tileInfo.lods,
    snapToZoom: false,
  },
});

完全な例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/5.0/esri/themes/light/main.css"
    />
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
    <script
      type="module"
      src="https://js.arcgis.com/map-components/5.0/arcgis-map-components.esm.js"
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <arcgis-map item-id="YOUR_WEBMAP_ID">
      <arcgis-utility-network-trace
        slot="top-right"
      ></arcgis-utility-network-trace>
      <arcgis-utility-network-associations
        slot="bottom-right"
      ></arcgis-utility-network-associations>
    </arcgis-map>
  </body>
</html>

よくある落とし穴

1. 認証が必要です：ユーティリティネットワークサービスでは通常、認証が必要です。esriConfig.portalUrl と認証情報を設定してください。

2. WebMap が必要です：ユーティリティネットワークには WebMap を介してアクセスする必要があります。クライアント側では作成できません。

3. 関連付けには高いズームレベルが必要です：関連付けは非常に高いズームレベルでのみ表示されます。TileInfo.create({ numLODs: 32 }) を使用し、snapToZoom: false を設定してください。

4. 読み込み順序：最初に WebMap を読み込み、その後ウィジェットを作成する前に UtilityNetwork を読み込む必要があります。

5. Enterprise ポータル：ArcGIS Enterprise でホストされていることがよくあります。esriConfig.portalUrl にポータルの URL を設定してください。

6. トポロジの検証：正確なトレース結果を得るには、ネットワークトポロジを有効にして検証する必要があります。

7. 名前付きトレース構成：トレースウィジェットには、共有された名前付きトレース構成が必要です（Enterprise 10.9 以降）。

参照サンプル

• utility-network-trace — ユーティリティネットワークのトレースを実行する
• utility-network-associations — 関連付けを表示する
• widgets-untrace — ユーティリティネットワークのトレースウィジェット

関連スキル

• arcgis-layers — レイヤーの設定と WebMap の読み込み
• arcgis-authentication — ポータル認証の設定
• arcgis-widgets-ui — ウィジェットの配置と UI のカスタマイズ