arcgis-utility-networks

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ArcGIS Utility Networks

Use this skill for working with utility networks, tracing, and associations visualization.

本技能可用于处理公用设施网络、网络追踪以及关联关系可视化。

Utility Network Basics

公用设施网络基础

Utility networks model connected infrastructure like electric, gas, water, and telecom systems. Key concepts:

Network tracing - Follow connectivity through the network
Associations - Relationships between network features (connectivity, containment, structural attachment)
Subnetworks - Isolated portions of the network

公用设施网络可对电力、燃气、供水以及电信系统等互联基础设施进行建模。核心概念：

网络追踪 - 追踪网络中的连接关系
关联关系 - 网络要素之间的关系（连接关系、包含关系、结构附着关系）
子网 - 网络中的独立部分

Map Components Approach

地图组件方式

Utility Network Trace Component

公用设施网络追踪组件

html

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

html

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

Utility Network Associations Component

公用设施网络关联组件

html

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

html

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

Core API Approach

核心API方式

UtilityNetworkTrace Widget

UtilityNetworkTrace 组件

javascript

import WebMap from "@arcgis/core/WebMap.js";
import MapView from "@arcgis/core/views/MapView.js";
import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
import esriConfig from "@arcgis/core/config.js";

// Configure portal (required for secured utility network services)
esriConfig.portalUrl = "https://www.arcgis.com";

// Load WebMap containing utility network
const webmap = new WebMap({
  portalItem: {
    id: "YOUR_WEBMAP_ID"
  }
});

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

// Create trace widget
const utilityNetworkTrace = new UtilityNetworkTrace({
  view: view
});

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

javascript

import WebMap from "@arcgis/core/WebMap.js";
import MapView from "@arcgis/core/views/MapView.js";
import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
import esriConfig from "@arcgis/core/config.js";

// 配置门户（安全公用设施网络服务必填）
esriConfig.portalUrl = "https://www.arcgis.com";

// 加载包含公用设施网络的WebMap
const webmap = new WebMap({
  portalItem: {
    id: "YOUR_WEBMAP_ID"
  }
});

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

// 创建追踪组件
const utilityNetworkTrace = new UtilityNetworkTrace({
  view: view
});

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

UtilityNetworkAssociations Widget

UtilityNetworkAssociations 组件

javascript

import WebMap from "@arcgis/core/WebMap.js";
import MapView from "@arcgis/core/views/MapView.js";
import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

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

// Create TileInfo for high zoom levels (required to see associations)
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
  }
});

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

  // Check if webMap contains utility networks
  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");
  }
});

javascript

import WebMap from "@arcgis/core/WebMap.js";
import MapView from "@arcgis/core/views/MapView.js";
import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

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

// 创建高缩放级别的TileInfo（查看关联关系必填）
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
  }
});

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

  // 检查WebMap是否包含公用设施网络
  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");
  }
});

Accessing Utility Networks

访问公用设施网络

Get Utility Network from WebMap

从WebMap获取公用设施网络

javascript

await webMap.load();

// Check for utility networks
if (webMap.utilityNetworks && webMap.utilityNetworks.length > 0) {
  const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
  await utilityNetwork.load();

  console.log("Network name:", utilityNetwork.networkName);
  console.log("Tier definitions:", utilityNetwork.definition.tierDefinitions);
}

javascript

await webMap.load();

// 检查是否存在公用设施网络
if (webMap.utilityNetworks && webMap.utilityNetworks.length > 0) {
  const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
  await utilityNetwork.load();

  console.log("Network name:", utilityNetwork.networkName);
  console.log("Tier definitions:", utilityNetwork.definition.tierDefinitions);
}

Utility Network Properties

公用设施网络属性

javascript

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

// Access network definition
const definition = utilityNetwork.definition;
console.log("Domain networks:", definition.domainNetworks);
console.log("Terminal configurations:", definition.terminalConfigurations);
console.log("Network attributes:", definition.networkAttributes);

javascript

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

// 访问网络定义
const definition = utilityNetwork.definition;
console.log("Domain networks:", definition.domainNetworks);
console.log("Terminal configurations:", definition.terminalConfigurations);
console.log("Network attributes:", definition.networkAttributes);

Associations Widget Configuration

关联关系组件配置

Visible Elements

可见元素

javascript

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
    }
  }
});

javascript

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
    }
  }
});

Association Types

关联类型

javascript

// Connectivity - electrical/flow connections
// Containment - features inside other features
// Structural Attachment - features attached to structures

const unAssociations = new UtilityNetworkAssociations({
  view,
  utilityNetwork,
  associationTypes: ["connectivity", "structural-attachment"]
});

javascript

// Connectivity - 电气/水流连接
// Containment - 要素包含在其他要素内
// Structural Attachment - 要素附着在结构上

const unAssociations = new UtilityNetworkAssociations({
  view,
  utilityNetwork,
  associationTypes: ["connectivity", "structural-attachment"]
});

Network Tracing

网络追踪

Trace Widget Configuration

追踪组件配置

javascript

const utilityNetworkTrace = new UtilityNetworkTrace({
  view: view,
  // Optional: specify which traces are available
  showSelectionAttributes: true,
  selectOnComplete: true
});

javascript

const utilityNetworkTrace = new UtilityNetworkTrace({
  view: view,
  // 可选：指定可用的追踪类型
  showSelectionAttributes: true,
  selectOnComplete: true
});

Trace Types

追踪类型

Common trace types available in utility networks:

Connected - Find all connected features
Upstream - Trace toward sources
Downstream - Trace away from sources
Subnetwork - Find features in same subnetwork
Isolation - Find isolation points
Loops - Find loops in network

公用设施网络中常见的追踪类型：

Connected - 查找所有相连的要素
Upstream - 向源头方向追踪
Downstream - 远离源头方向追踪
Subnetwork - 查找同一子网中的要素
Isolation - 查找隔离点
Loops - 查找网络中的环路

High Zoom Level Support

高缩放级别支持

Associations are only visible at high zoom levels. Configure additional LODs:

javascript

import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

// Create tile info with 32 LODs for extreme zoom
const tileInfo = TileInfo.create({
  spatialReference: { wkid: 102100 },
  numLODs: 32
});

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

关联关系仅在高缩放级别下可见。配置额外的LOD（细节层次）：

javascript

import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

// 创建包含32个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
  }
});

Complete Example

完整示例

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Utility Network</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.34/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.34/"></script>
  <style>
    html, body, #viewDiv { height: 100%; margin: 0; }
  </style>
  <script type="module">
    import WebMap from "@arcgis/core/WebMap.js";
    import MapView from "@arcgis/core/views/MapView.js";
    import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
    import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
    import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

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

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

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

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

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

        // Add trace widget
        const trace = new UtilityNetworkTrace({ view });
        view.ui.add(trace, "top-right");

        // Add associations widget
        const associations = new UtilityNetworkAssociations({
          view,
          utilityNetwork
        });
        view.ui.add(associations, "bottom-right");
      }
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Utility Network</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.34/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.34/"></script>
  <style>
    html, body, #viewDiv { height: 100%; margin: 0; }
  </style>
  <script type="module">
    import WebMap from "@arcgis/core/WebMap.js";
    import MapView from "@arcgis/core/views/MapView.js";
    import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
    import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
    import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

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

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

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

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

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

        // 添加追踪组件
        const trace = new UtilityNetworkTrace({ view });
        view.ui.add(trace, "top-right");

        // 添加关联关系组件
        const associations = new UtilityNetworkAssociations({
          view,
          utilityNetwork
        });
        view.ui.add(associations, "bottom-right");
      }
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Common Pitfalls

常见问题

Authentication required: Utility network services typically require authentication
WebMap required: Utility networks must be accessed through a WebMap - they cannot be created client-side
High zoom for associations: Associations only display at very high zoom levels (use TileInfo with 32+ LODs)
Load order: Must load WebMap, then load UtilityNetwork before using widgets
Enterprise portals: Often hosted on ArcGIS Enterprise - configure
```
esriConfig.portalUrl
```

需要身份验证：公用设施网络服务通常需要身份验证
需要WebMap：公用设施网络必须通过WebMap访问，无法在客户端直接创建
高缩放级别查看关联关系：关联关系仅在极高缩放级别下显示（使用包含32个以上LOD的TileInfo）
加载顺序：必须先加载WebMap，再加载UtilityNetwork，之后才能使用组件
企业门户：通常托管在ArcGIS Enterprise上 - 需配置
```
esriConfig.portalUrl
```