arcgis-advanced-layers

ArcGIS の高度なレイヤー

OGC サービス（WMS、WFS、WMTS、OGC API Features）、KML/KMZ ファイル、MapImageLayer、CatalogLayer、MediaLayer、動的データレイヤーを扱う場合は、このスキルを使用してください。

関連スキル： 一般的なレイヤータイプ（FeatureLayer、GraphicsLayer、GeoJSONLayer など）については、arcgis-layers を参照してください。

インポートパターン

直接 ESM インポート

import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
import WFSLayer from "@arcgis/core/layers/WFSLayer.js";
import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";
import OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";
import KMLLayer from "@arcgis/core/layers/KMLLayer.js";
import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
import CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
import MediaLayer from "@arcgis/core/layers/MediaLayer.js";

動的インポート（CDN）

const WMSLayer = await $arcgis.import("@arcgis/core/layers/WMSLayer.js");
const [WFSLayer, wfsUtils] = await $arcgis.import([
  "@arcgis/core/layers/WFSLayer.js",
  "@arcgis/core/layers/ogc/wfsUtils.js",
]);
const MapImageLayer = await $arcgis.import(
  "@arcgis/core/layers/MapImageLayer.js",
);

レイヤータイプの比較

レイヤータイプ	用途	データソース
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
KMLLayer	KML/KMZ の地理データ	KML ファイル
MapImageLayer	サーバーでレンダリングされた画像	ArcGIS MapServer
CatalogLayer	レイヤーのコレクション	ArcGIS Catalog Service
MediaLayer	ジオリファレンス済みの画像、動画、GIF	ローカル／リモートメディア
VideoLayer	ライブ動画フィード	ArcGIS Video Server

WMSLayer（Web Map Service）

基本的な WMSLayer

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

ベースマップとしての WMSLayer（Map コンポーネント）

<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 Basemap",
    },
  };
</script>

カスタムパラメーターを指定した WMSLayer

const layer = new WMSLayer({
  url: "https://example.com/wms",
  sublayers: [
    {
      name: "LayerName",
      visible: true,
    },
  ],
  customParameters: {
    TRANSPARENT: "TRUE",
    FORMAT: "image/png",
  },
  imageFormat: "png",
  version: "1.3.0",
});

WFSLayer（Web Feature Service）

基本的な WFSLayer

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: "GeoBretagne",
});

map.add(layer);

WFS の機能情報の検出

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

レンダラーを指定した WFSLayer

const layer = new WFSLayer({
  url: "https://geobretagne.fr/geoserver/ows",
  name: "fma:bvme_zhp_vs_culture",
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-fill",
      color: [76, 129, 64, 0.6],
      outline: { color: "white", width: 1 },
    },
  },
  popupTemplate: {
    title: "{nom}",
    content: "Type: {type_cultu}",
  },
});

WMTSLayer（Web Map Tile Service）

基本的な WMTSLayer

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 Geografico Nacional",
});

map.add(layer);

ベースマップとしての WMTSLayer

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",
    }),
  ],
});

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

OGCFeatureLayer（OGC API - Features）

基本的な OGCFeatureLayer

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

const layer = new OGCFeatureLayer({
  url: "https://demo.ldproxy.net/vineyards",
  collectionId: "vineyards",
  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);

ラベリングを設定した OGCFeatureLayer

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

KMLLayer

基本的な KMLLayer

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

const layer = new KMLLayer({
  url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month_age_animated.kml",
});

map.add(layer);

サブレイヤーを含む KMLLayer

const layer = new KMLLayer({
  url: "https://example.com/data.kml",
});

await layer.load();

// Access KML sublayers
layer.sublayers.forEach((sublayer) => {
  console.log(sublayer.title, sublayer.visible);
});

// Toggle sublayer visibility
const sublayer = layer.sublayers.getItemAt(0);
sublayer.visible = false;

ローカルファイルからの KMLLayer

const layer = new KMLLayer({
  url: "/data/places.kml",
  title: "Places of Interest",
});

map.add(layer);

MapImageLayer

基本的な MapImageLayer

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

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

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

map.add(layer);

サブレイヤーを含む MapImageLayer

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

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

定義式を指定した MapImageLayer

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

カスタムレンダラーを指定した MapImageLayer

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

動的データレイヤー

テーブルからのデータレイヤー

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",
        },
      },
    },
  ],
});

テーブル結合を使用したデータレイヤー

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: { type: "simple-fill", color: "#f8e3c2" },
          },
          {
            minValue: 0.01,
            maxValue: 0.05,
            symbol: { type: "simple-fill", color: "#d86868" },
          },
        ],
      },
    },
  ],
});

CatalogLayer

基本的な CatalogLayer

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

CatalogLayer のフットプリントを扱う

import CatalogLayer from "@arcgis/core/layers/CatalogLayer.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: "text",
      color: "white",
      font: { 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);

LayerList を含む CatalogLayer

<arcgis-map id="mapView">
  <arcgis-layer-list slot="top-right"></arcgis-layer-list>
</arcgis-map>

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

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

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

  viewElement.map.add(catalogLayer);

  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",
          },
        ],
      ];
    }
  };
</script>

MediaLayer

画像を含む MediaLayer

import MediaLayer from "@arcgis/core/layers/MediaLayer.js";
import ImageElement from "@arcgis/core/layers/support/ImageElement.js";
import ExtentAndRotationGeoreference from "@arcgis/core/layers/support/ExtentAndRotationGeoreference.js";
import Extent from "@arcgis/core/geometry/Extent.js";

const imageElement = new ImageElement({
  image: "https://example.com/historical-map.png",
  georeference: new ExtentAndRotationGeoreference({
    extent: new Extent({
      xmin: -10047456,
      ymin: 3486722,
      xmax: -10006982,
      ymax: 3514468,
      spatialReference: { wkid: 102100 },
    }),
  }),
});

const mediaLayer = new MediaLayer({
  source: [imageElement],
  title: "Historical Map",
});

map.add(mediaLayer);

複数の画像を含む MediaLayer

const imageInfos = [
  { url: "image1.png", extent: { xmin: -100, ymin: 30, xmax: -90, ymax: 40 } },
  { url: "image2.png", extent: { xmin: -95, ymin: 35, xmax: -85, ymax: 45 } },
];

const imageElements = imageInfos.map(
  (info) =>
    new ImageElement({
      image: info.url,
      georeference: new ExtentAndRotationGeoreference({
        extent: new Extent({
          ...info.extent,
          spatialReference: { wkid: 4326 },
        }),
      }),
    }),
);

const mediaLayer = new MediaLayer({
  source: imageElements,
  title: "Image Collection",
});

回転によるジオリファレンス

const georeference = new ExtentAndRotationGeoreference({
  extent: new Extent({
    xmin: -122.5,
    ymin: 37.5,
    xmax: -122.0,
    ymax: 38.0,
    spatialReference: { wkid: 4326 },
  }),
  rotation: 15, // Degrees clockwise
});

制御点によるジオリファレンス

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

const georeference = new ControlPointsGeoreference({
  controlPoints: [
    {
      sourcePoint: { x: 0, y: 0 }, // Top-left of image (pixels)
      mapPoint: { x: -122.5, y: 38.0 }, // Map coordinates
    },
    {
      sourcePoint: { x: 1000, y: 0 }, // Top-right
      mapPoint: { x: -122.0, y: 38.0 },
    },
    {
      sourcePoint: { x: 1000, y: 800 }, // Bottom-right
      mapPoint: { x: -122.0, y: 37.5 },
    },
    {
      sourcePoint: { x: 0, y: 800 }, // Bottom-left
      mapPoint: { x: -122.5, y: 37.5 },
    },
  ],
  width: 1000,
  height: 800,
});

動画を含む MediaLayer

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

const videoElement = new VideoElement({
  video: "https://example.com/timelapse.mp4",
  georeference: new ExtentAndRotationGeoreference({
    extent: new Extent({
      xmin: -122.5,
      ymin: 37.5,
      xmax: -122.0,
      ymax: 38.0,
      spatialReference: { wkid: 4326 },
    }),
  }),
});

const mediaLayer = new MediaLayer({
  source: [videoElement],
});

// Control video playback
videoElement.content.play();
videoElement.content.pause();
videoElement.content.currentTime = 30;

不透明度とブレンドモードを指定した MediaLayer

const mediaLayer = new MediaLayer({
  source: [imageElement],
  opacity: 0.7,
  blendMode: "multiply", // normal, multiply, luminosity, etc.
});

// Change dynamically
mediaLayer.opacity = 0.5;
mediaLayer.blendMode = "luminosity";

// Individual element opacity
imageElement.opacity = 0.8;

インタラクティブな制御点

// Enable interactive editing of georeference control points
const mediaLayerView = await view.whenLayerView(mediaLayer);
mediaLayerView.interactive = true;

// Disable when done
mediaLayerView.interactive = false;

VideoLayer

ArcGIS Video Server からライブ動画フィードを表示します。VideoLayer は Layer を拡張したもので、ほかのレイヤーと同様に Map に追加します。再生コントロールを使用するには、arcgis-video-player ウィジェット（arcgis-widgets-advanced を参照）と組み合わせます。

基本的な VideoLayer

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

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

map.add(videoLayer);

VideoPlayer ウィジェットとの併用

<arcgis-map basemap="streets-vector">
  <arcgis-video-player slot="top-right"></arcgis-video-player>
</arcgis-map>

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/VideoServer",
});

viewElement.map.add(videoLayer);
videoPlayer.layer = videoLayer;

制限事項

• 2D の MapView のみでサポートされます。3D の SceneView では使用できません。
• macOS または iOS デバイスではサポートされません。
• 有効な ArcGIS Video Server エンドポイントが必要です（一般的な動画ファイルの URL は使用できません。ローカルまたはリモートの動画ファイルには、VideoElement と MediaLayer を使用してください）。

完全な例

<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"
    ></script>
    <script src="https://js.arcgis.com/5.0/"></script>
    <script
      type="module"
      src="https://js.arcgis.com/5.0/map-components/"
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <calcite-shell>
      <calcite-navigation slot="header">
        <calcite-navigation-logo
          slot="logo"
          heading="Advanced Layers"
        ></calcite-navigation-logo>
      </calcite-navigation>

      <calcite-shell-panel slot="panel-start">
        <calcite-panel heading="Layers">
          <arcgis-layer-list reference-element="mapView"></arcgis-layer-list>
        </calcite-panel>
      </calcite-shell-panel>

      <arcgis-map id="mapView" center="-89.93, 29.97" zoom="10">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
        <arcgis-legend slot="bottom-left"></arcgis-legend>
      </arcgis-map>
    </calcite-shell>

    <script type="module">
      import Map from "@arcgis/core/Map.js";
      import WMSLayer from "@arcgis/core/layers/WMSLayer.js";
      import MediaLayer from "@arcgis/core/layers/MediaLayer.js";
      import ImageElement from "@arcgis/core/layers/support/ImageElement.js";
      import ExtentAndRotationGeoreference from "@arcgis/core/layers/support/ExtentAndRotationGeoreference.js";
      import Extent from "@arcgis/core/geometry/Extent.js";

      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();

      // Add a WMS layer
      const wmsLayer = new WMSLayer({
        url: "https://ows.terrestris.de/osm/service",
        title: "OpenStreetMap WMS",
      });

      // Add a media layer for a historical map overlay
      const imageElement = new ImageElement({
        image: "https://example.com/historical-map.png",
        georeference: new ExtentAndRotationGeoreference({
          extent: new Extent({
            xmin: -10047456,
            ymin: 3486722,
            xmax: -10006982,
            ymax: 3514468,
            spatialReference: { wkid: 102100 },
          }),
        }),
      });

      const mediaLayer = new MediaLayer({
        source: [imageElement],
        title: "Historical Map",
        opacity: 0.7,
      });

      viewElement.map.addMany([wmsLayer, mediaLayer]);
    </script>
  </body>
</html>

参考サンプル

• layers-wms - WMS レイヤーの追加と設定
• layers-wfs - WFS レイヤーの操作
• layers-ogcfeaturelayer - OGC Features API レイヤーの使用
• layers-mapimagelayer - 動的な MapImageLayer の設定
• layers-mapimagelayer-dynamic-data - 結合を使用した動的データレイヤー
• layers-kml - KML/KMZ ファイルの読み込み
• layers-cataloglayer - CatalogLayer を使用したポータルコンテンツの閲覧
• layers-medialayer-images - MediaLayer での画像の表示
• layers-medialayer-video - MediaLayer での動画再生
• layers-medialayer-control-points - メディアのコントロールポイントの配置

よくある落とし穴

1. WFS のバージョン要件：WFSLayer には、GeoJSON 出力形式に対応した WFS 2.0.0 が必要です。古いバージョンの WFS や GeoJSON に対応していないサービスでは、処理に失敗します。

2. OGC サービスの CORS：外部の OGC サービス（WMS、WFS、WMTS）では、CORS ヘッダーを有効にするか、プロキシを設定する必要があります。CORS が設定されていない場合、ブラウザーはクロスオリジンリクエストを通知せずにブロックします。

3. MapImageLayer のサブレイヤー ID：サブレイヤーの id 値は、サービスのレイヤー ID と完全に一致する必要があります。誤った ID を使用すると、サブレイヤーが空になったり、表示されなくなったりします。

4. 動的データソースには登録済みのワークスペースが必要です：データレイヤーのソース（source.type: "data-layer"）は、ArcGIS Server に登録されているワークスペース ID でのみ動作します。ワークスペースは、サーバー管理者が事前に設定しておく必要があります。

5. CatalogLayer のポータル URL：ArcGIS Online 以外のアイテムでは、portalItem の設定で portal.url を指定する必要があります。省略すると、デフォルトで ArcGIS Online が使用されます。

6. 結合テーブルのフィールド名のプレフィックス：MapImageLayer でテーブル結合を使用する場合、フィールド名にはテーブル名のプレフィックスを付ける必要があります（例：ancestry.Norwegian、states.POP2007）。

7. メディアの CORS：MediaLayer で外部サーバーから読み込む画像や動画には、CORS ヘッダーが必要です。CORS ヘッダーがない場合、画像は読み込まれますが、マップキャンバスに描画できません。

8. 動画の自動再生制限：ブラウザーは、MediaLayer の動画要素の自動再生をブロックする場合があります。videoElement.content.play() を呼び出す前に、ボタンのクリックなど、ユーザーの操作を必要とするようにしてください。

9. KMLLayer のネットワークリンク：ネットワークリンクを含む KML ファイルは、追加の HTTP リクエストを発行します。リンク先の URL にアクセスでき、CORS が有効になっていることを確認してください。

10. WMSLayer のサブレイヤー選択：WMSLayer の読み込み後は、デフォルトですべてのサブレイヤーが表示されます。必要なサブレイヤーだけを表示するよう layer.sublayers を明示的に設定してください。レイヤー数の多いサービスでは、設定しないとパフォーマンスが低下する可能性があります。

関連スキル

• 一般的なレイヤータイプ（FeatureLayer、GraphicsLayer、GeoJSONLayer など）については、arcgis-layers を参照してください
• 画像専用のレイヤー（ImageryLayer、ImageryTileLayer）については、arcgis-imagery を参照してください
• レンダラーとシンボルの設定については、arcgis-visualization を参照してください
• 3D 専用のレイヤータイプ（SceneLayer、IntegratedMeshLayer）については、arcgis-3d-layers を参照してください