arcgis-advanced-layers

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ArcGIS Advanced Layers

ArcGIS 高级图层

Use this skill for working with OGC services, MapImageLayer, CatalogLayer, and dynamic data layers.

本技能适用于处理OGC服务、MapImageLayer、CatalogLayer以及动态数据图层。

WMSLayer (Web Map Service)

WMSLayer（Web地图服务）

Basic WMSLayer

基础WMSLayer

javascript

import WMSLayer from "@arcgis/core/layers/WMSLayer.js";

const layer = new WMSLayer({
  url: "https://ows.terrestris.de/osm/service"
});

await layer.load();

// Find and use a specific sublayer
const sublayer = layer.findSublayerByName("OSM-WMS");
if (sublayer) {
  layer.sublayers = [sublayer];
}

map.add(layer);

javascript

import WMSLayer from "@arcgis/core/layers/WMSLayer.js";

const layer = new WMSLayer({
  url: "https://ows.terrestris.de/osm/service"
});

await layer.load();

// 查找并使用特定子图层
const sublayer = layer.findSublayerByName("OSM-WMS");
if (sublayer) {
  layer.sublayers = [sublayer];
}

map.add(layer);

WMSLayer as Basemap (Map Component)

作为底图的WMSLayer（地图组件）

html

<arcgis-scene>
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-scene>

<script type="module">
  import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
  const viewElement = document.querySelector("arcgis-scene");

  const layer = new WMSLayer({
    url: "https://ows.terrestris.de/osm/service"
  });

  await layer.load();
  const sublayer = layer.findSublayerByName("OSM-WMS");
  if (sublayer) {
    layer.sublayers = [sublayer];
  }

  viewElement.map = {
    basemap: {
      baseLayers: [layer],
      title: "WMS Layer"
    }
  };
</script>

html

<arcgis-scene>
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-scene>

<script type="module">
  import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
  const viewElement = document.querySelector("arcgis-scene");

  const layer = new WMSLayer({
    url: "https://ows.terrestris.de/osm/service"
  });

  await layer.load();
  const sublayer = layer.findSublayerByName("OSM-WMS");
  if (sublayer) {
    layer.sublayers = [sublayer];
  }

  viewElement.map = {
    basemap: {
      baseLayers: [layer],
      title: "WMS Layer"
    }
  };
</script>

WFSLayer (Web Feature Service)

WFSLayer（Web要素服务）

Basic WFSLayer

基础WFSLayer

javascript

import WFSLayer from "@arcgis/core/layers/WFSLayer.js";

const layer = new WFSLayer({
  url: "https://geobretagne.fr/geoserver/ows",
  name: "fma:bvme_zhp_vs_culture",
  copyright: "GéoBretagne"
});

map.add(layer);

javascript

import WFSLayer from "@arcgis/core/layers/WFSLayer.js";

const layer = new WFSLayer({
  url: "https://geobretagne.fr/geoserver/ows",
  name: "fma:bvme_zhp_vs_culture",
  copyright: "GéoBretagne"
});

map.add(layer);

WFS Capabilities

WFS服务能力

javascript

import WFSLayer from "@arcgis/core/layers/WFSLayer.js";
import wfsUtils from "@arcgis/core/layers/ogc/wfsUtils.js";

// Get capabilities from WFS endpoint
const capabilities = await wfsUtils.getCapabilities("https://geobretagne.fr/geoserver/ows");

// List available feature types
capabilities.featureTypes.forEach(featureType => {
  console.log(featureType.title, featureType.name);
});

// Create layer from specific feature type
const layerInfo = await wfsUtils.getWFSLayerInfo(capabilities, "featureTypeName");
const layer = WFSLayer.fromWFSLayerInfo(layerInfo);
map.add(layer);

javascript

import WFSLayer from "@arcgis/core/layers/WFSLayer.js";
import wfsUtils from "@arcgis/core/layers/ogc/wfsUtils.js";

// 从WFS端点获取服务能力
const capabilities = await wfsUtils.getCapabilities("https://geobretagne.fr/geoserver/ows");

// 列出可用要素类型
capabilities.featureTypes.forEach(featureType => {
  console.log(featureType.title, featureType.name);
});

// 从特定要素类型创建图层
const layerInfo = await wfsUtils.getWFSLayerInfo(capabilities, "featureTypeName");
const layer = WFSLayer.fromWFSLayerInfo(layerInfo);
map.add(layer);

WMTSLayer (Web Map Tile Service)

WMTSLayer（Web地图瓦片服务）

Basic WMTSLayer

基础WMTSLayer

javascript

import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";

const layer = new WMTSLayer({
  url: "https://www.ign.es/wmts/ign-base",
  activeLayer: {
    id: "IGNBase-gris",
    tileMatrixSetId: "GoogleMapsCompatible"
  },
  serviceMode: "KVP",
  copyright: "Instituto Geográfico Nacional"
});

map.add(layer);

javascript

import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";

const layer = new WMTSLayer({
  url: "https://www.ign.es/wmts/ign-base",
  activeLayer: {
    id: "IGNBase-gris",
    tileMatrixSetId: "GoogleMapsCompatible"
  },
  serviceMode: "KVP",
  copyright: "Instituto Geográfico Nacional"
});

map.add(layer);

WMTSLayer as Basemap

作为底图的WMTSLayer

javascript

import Basemap from "@arcgis/core/Basemap.js";
import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";

const wmtsBasemap = new Basemap({
  baseLayers: [
    new WMTSLayer({
      url: "https://www.ign.es/wmts/ign-base",
      activeLayer: { id: "IGNBase-gris", tileMatrixSetId: "GoogleMapsCompatible" },
      serviceMode: "KVP"
    })
  ],
  thumbnailUrl: "https://example.com/thumbnail.jpg"
});

const map = new Map({
  basemap: wmtsBasemap
});

javascript

import Basemap from "@arcgis/core/Basemap.js";
import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";

const wmtsBasemap = new Basemap({
  baseLayers: [
    new WMTSLayer({
      url: "https://www.ign.es/wmts/ign-base",
      activeLayer: { id: "IGNBase-gris", tileMatrixSetId: "GoogleMapsCompatible" },
      serviceMode: "KVP"
    })
  ],
  thumbnailUrl: "https://example.com/thumbnail.jpg"
});

const map = new Map({
  basemap: wmtsBasemap
});

OGCFeatureLayer

Basic OGCFeatureLayer

基础OGCFeatureLayer

javascript

import OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";

const layer = new OGCFeatureLayer({
  url: "https://demo.ldproxy.net/vineyards",  // OGC API landing page
  collectionId: "vineyards",                   // Collection ID
  minScale: 5000000,
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-fill",
      color: [76, 129, 64, 0.6]
    }
  },
  popupTemplate: {
    title: "{name}",
    content: "Area: {area_ha} hectares"
  }
});

map.add(layer);

javascript

import OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";

const layer = new OGCFeatureLayer({
  url: "https://demo.ldproxy.net/vineyards",  // OGC API 着陆页
  collectionId: "vineyards",                   // 集合ID
  minScale: 5000000,
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-fill",
      color: [76, 129, 64, 0.6]
    }
  },
  popupTemplate: {
    title: "{name}",
    content: "面积: {area_ha} 公顷"
  }
});

map.add(layer);

OGCFeatureLayer with Labeling

带标注的OGCFeatureLayer

javascript

const layer = new OGCFeatureLayer({
  url: "https://demo.ldproxy.net/vineyards",
  collectionId: "vineyards",
  labelingInfo: [{
    labelExpressionInfo: {
      expression: "$feature.NAME"
    },
    symbol: {
      type: "text",
      color: "#4a6741",
      haloSize: 1,
      haloColor: "white",
      font: {
        family: "Arial",
        style: "italic"
      }
    },
    minScale: 100000
  }]
});

javascript

const layer = new OGCFeatureLayer({
  url: "https://demo.ldproxy.net/vineyards",
  collectionId: "vineyards",
  labelingInfo: [{
    labelExpressionInfo: {
      expression: "$feature.NAME"
    },
    symbol: {
      type: "text",
      color: "#4a6741",
      haloSize: 1,
      haloColor: "white",
      font: {
        family: "Arial",
        style: "italic"
      }
    },
    minScale: 100000
  }]
});

MapImageLayer

Basic MapImageLayer

基础MapImageLayer

javascript

import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";

// From portal item
const layer = new MapImageLayer({
  portalItem: {
    id: "d7892b3c13b44391992ecd42bfa92d01"
  }
});

// From URL
const layer2 = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"
});

map.add(layer);

javascript

import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";

// 通过门户项创建
const layer = new MapImageLayer({
  portalItem: {
    id: "d7892b3c13b44391992ecd42bfa92d01"
  }
});

// 通过URL创建
const layer2 = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"
});

map.add(layer);

MapImageLayer with Sublayers

带子图层的MapImageLayer

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [
    { id: 2, visible: true },   // States
    { id: 1, visible: true },   // Highways
    { id: 0, visible: true }    // Cities
  ]
});

// Toggle sublayer visibility
layer.when(() => {
  const sublayer = layer.findSublayerById(1);
  sublayer.visible = !sublayer.visible;
});

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [
    { id: 2, visible: true },   // 州
    { id: 1, visible: true },   // 高速公路
    { id: 0, visible: true }    // 城市
  ]
});

// 切换子图层可见性
layer.when(() => {
  const sublayer = layer.findSublayerById(1);
  sublayer.visible = !sublayer.visible;
});

MapImageLayer with Definition Expression

带定义表达式的MapImageLayer

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [{
    id: 0,
    definitionExpression: "pop2000 > 100000"
  }]
});

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [{
    id: 0,
    definitionExpression: "pop2000 > 100000"
  }]
});

MapImageLayer with Custom Renderer

带自定义渲染器的MapImageLayer

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [{
    id: 2,
    renderer: {
      type: "simple",
      symbol: {
        type: "simple-fill",
        color: [0, 100, 200, 0.5],
        outline: { color: "white", width: 1 }
      }
    }
  }]
});

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [{
    id: 2,
    renderer: {
      type: "simple",
      symbol: {
        type: "simple-fill",
        color: [0, 100, 200, 0.5],
        outline: { color: "white", width: 1 }
      }
    }
  }]
});

Dynamic Data Layers

动态数据图层

Data Layer from Table

从表创建数据图层

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [{
    id: 4,
    title: "Railroads",
    renderer: {
      type: "simple",
      symbol: {
        type: "simple-line",
        color: [255, 255, 255, 0.5],
        width: 0.75,
        style: "long-dash-dot-dot"
      }
    },
    source: {
      type: "data-layer",
      dataSource: {
        type: "table",
        workspaceId: "MyDatabaseWorkspaceIDSSR2",
        dataSourceName: "ss6.gdb.Railroads"
      }
    }
  }]
});

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [{
    id: 4,
    title: "铁路",
    renderer: {
      type: "simple",
      symbol: {
        type: "simple-line",
        color: [255, 255, 255, 0.5],
        width: 0.75,
        style: "long-dash-dot-dot"
      }
    },
    source: {
      type: "data-layer",
      dataSource: {
        type: "table",
        workspaceId: "MyDatabaseWorkspaceIDSSR2",
        dataSourceName: "ss6.gdb.Railroads"
      }
    }
  }]
});

Data Layer with Table Join

带表连接的Data Layer

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
  sublayers: [{
    id: 0,
    opacity: 0.75,
    source: {
      type: "data-layer",
      dataSource: {
        type: "join-table",
        // Left table: map layer with geometries
        leftTableSource: {
          type: "map-layer",
          mapLayerId: 3
        },
        // Right table: data table in workspace
        rightTableSource: {
          type: "data-layer",
          dataSource: {
            type: "table",
            workspaceId: "CensusFileGDBWorkspaceID",
            dataSourceName: "ancestry"
          }
        },
        leftTableKey: "STATE_NAME",
        rightTableKey: "State",
        joinType: "left-outer-join"
      }
    },
    renderer: {
      type: "class-breaks",
      field: "ancestry.Norwegian",
      normalizationField: "states.POP2007",
      classBreakInfos: [
        { minValue: 0, maxValue: 0.01, symbol: createSymbol("#f8e3c2") },
        { minValue: 0.01, maxValue: 0.05, symbol: createSymbol("#d86868") }
      ]
    }
  }]
});

javascript

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
  sublayers: [{
    id: 0,
    opacity: 0.75,
    source: {
      type: "data-layer",
      dataSource: {
        type: "join-table",
        // 左表：带几何信息的地图图层
        leftTableSource: {
          type: "map-layer",
          mapLayerId: 3
        },
        // 右表：工作区中的数据表
        rightTableSource: {
          type: "data-layer",
          dataSource: {
            type: "table",
            workspaceId: "CensusFileGDBWorkspaceID",
            dataSourceName: "ancestry"
          }
        },
        leftTableKey: "STATE_NAME",
        rightTableKey: "State",
        joinType: "left-outer-join"
      }
    },
    renderer: {
      type: "class-breaks",
      field: "ancestry.Norwegian",
      normalizationField: "states.POP2007",
      classBreakInfos: [
        { minValue: 0, maxValue: 0.01, symbol: createSymbol("#f8e3c2") },
        { minValue: 0.01, maxValue: 0.05, symbol: createSymbol("#d86868") }
      ]
    }
  }]
});

CatalogLayer

Basic CatalogLayer

基础CatalogLayer

javascript

import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";

const layer = new CatalogLayer({
  portalItem: {
    id: "487cc66d305145d3b67fed383456af48",
    portal: {
      url: "https://jsapi.maps.arcgis.com/"
    }
  }
});

map.add(layer);

javascript

import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";

const layer = new CatalogLayer({
  portalItem: {
    id: "487cc66d305145d3b67fed383456af48",
    portal: {
      url: "https://jsapi.maps.arcgis.com/"
    }
  }
});

map.add(layer);

Working with CatalogLayer Footprints

处理CatalogLayer范围图

javascript

import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
import catalogUtils from "@arcgis/core/layers/catalog/catalogUtils.js";

const layer = new CatalogLayer({
  portalItem: { id: "YOUR_CATALOG_ITEM_ID" }
});

map.add(layer);

const layerView = await view.whenLayerView(layer);

// Query all footprints
const result = await layer.queryFeatures({
  where: "1=1",
  returnGeometry: true,
  outFields: ["*"],
  orderByFields: [layer.itemNameField]
});

// Add labels to footprint layer
layer.footprintLayer.labelingInfo = [{
  labelExpressionInfo: {
    expression: "$feature." + layer.itemNameField
  },
  symbol: {
    type: "label-3d",
    symbolLayers: [{
      type: "text",
      material: { color: "white" },
      size: 10
    }]
  }
}];

// Highlight a footprint
const highlight = layerView.footprintLayerView.highlight(feature);

// Create layer from footprint
const footprint = layer.createFootprintFromLayer(selectedLayer);
const newLayer = await layer.createLayerFromFootprint(footprint);
map.add(newLayer);

javascript

import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
import catalogUtils from "@arcgis/core/layers/catalog/catalogUtils.js";

const layer = new CatalogLayer({
  portalItem: { id: "YOUR_CATALOG_ITEM_ID" }
});

map.add(layer);

const layerView = await view.whenLayerView(layer);

// 查询所有范围图
const result = await layer.queryFeatures({
  where: "1=1",
  returnGeometry: true,
  outFields: ["*"],
  orderByFields: [layer.itemNameField]
});

// 为范围图图层添加标注
layer.footprintLayer.labelingInfo = [{
  labelExpressionInfo: {
    expression: "$feature." + layer.itemNameField
  },
  symbol: {
    type: "label-3d",
    symbolLayers: [{
      type: "text",
      material: { color: "white" },
      size: 10
    }]
  }
}];

// 高亮某个范围图
const highlight = layerView.footprintLayerView.highlight(feature);

// 从范围图创建图层
const footprint = layer.createFootprintFromLayer(selectedLayer);
const newLayer = await layer.createLayerFromFootprint(footprint);
map.add(newLayer);

CatalogLayer with LayerList

结合LayerList使用CatalogLayer

javascript

const layerList = document.querySelector("arcgis-layer-list");

layerList.catalogOptions = {
  selectionMode: "single"
};

layerList.listItemCreatedFunction = (event) => {
  if (catalogUtils.isLayerFromCatalog(event.item.layer)) {
    event.item.actionsSections = [[{
      title: "Add layer to map",
      icon: "add-layer",
      id: "add-layer"
    }]];
  }
};

javascript

const layerList = document.querySelector("arcgis-layer-list");

layerList.catalogOptions = {
  selectionMode: "single"
};

layerList.listItemCreatedFunction = (event) => {
  if (catalogUtils.isLayerFromCatalog(event.item.layer)) {
    event.item.actionsSections = [[{
      title: "添加图层到地图",
      icon: "add-layer",
      id: "add-layer"
    }]];
  }
};

Layer Comparison

图层对比

Layer Type	Use Case	Data Source
WMSLayer	Raster imagery from OGC WMS	WMS 1.1.1/1.3.0
WFSLayer	Vector features from OGC WFS	WFS 2.0.0
WMTSLayer	Cached tiles from OGC WMTS	WMTS 1.0.0
OGCFeatureLayer	Vector from OGC API - Features	OGC API
MapImageLayer	Server-rendered imagery	ArcGIS Map Service
CatalogLayer	Collection of layers	ArcGIS Catalog Service

图层类型	适用场景	数据源
WMSLayer	OGC WMS提供的栅格影像	WMS 1.1.1/1.3.0
WFSLayer	OGC WFS提供的矢量要素	WFS 2.0.0
WMTSLayer	OGC WMTS提供的缓存瓦片	WMTS 1.0.0
OGCFeatureLayer	OGC API - Features提供的矢量数据	OGC API
MapImageLayer	服务器渲染的影像	ArcGIS地图服务
CatalogLayer	图层集合	ArcGIS目录服务

Common Pitfalls

常见陷阱

WFS version: WFSLayer requires WFS 2.0.0 with GeoJSON output format
CORS: OGC services need CORS headers or proxy configuration
Sublayer IDs: MapImageLayer sublayer IDs must match service layer IDs
Dynamic data sources: Require registered workspaces on the server
CatalogLayer portal: Must specify portal URL for non-ArcGIS Online items
Field prefixes: In joined tables, prefix field names with table name (e.g.,
```
ancestry.Norwegian
```
)

WFS版本：WFSLayer需要支持GeoJSON输出格式的WFS 2.0.0版本
CORS问题：OGC服务需要配置CORS头或使用代理
子图层ID：MapImageLayer的子图层ID必须与服务端图层ID匹配
动态数据源：需要在服务器端注册工作区
CatalogLayer门户：非ArcGIS Online的项必须指定门户URL
字段前缀：在连接表中，字段名需要添加表名前缀（例如
```
ancestry.Norwegian
```
）