arcgis-core-maps

ArcGIS Core Maps

ArcGIS Maps SDK for JavaScript を使用して 2D マップ（MapView）または 3D シーン（SceneView）を作成する場合に、このスキルを使用します。

インポートパターン

直接 ESM インポート（ビルドツールを使用する場合に推奨）

Vite、webpack、Rollup などのビルドツールで使用します。

import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";

• ツリーシェイキングに対応しています
• 標準の JavaScript モジュールを使用します
• 本番アプリケーションに最適です

動的インポート（CDN／ビルドツールなし）

ビルド手順が利用できない場合は、CDN の script タグとともに使用します。

const Map = await $arcgis.import("@arcgis/core/Map.js");
const MapView = await $arcgis.import("@arcgis/core/views/MapView.js");

// Multiple imports
const [FeatureLayer, Graphic] = await $arcgis.import([
  "@arcgis/core/layers/FeatureLayer.js",
  "@arcgis/core/Graphic.js",
]);

• Map Components（Web コンポーネント）で動作します
• ビルド手順は不要です
• 手早くプロトタイプやデモを作成するのに適しています
• HTML に <script src="https://js.arcgis.com/5.0/"></script> が必要です

注： このスキルの例では、直接 ESM インポートを使用しています。CDN を使用する場合は、import X from "path" を const X = await $arcgis.import("path") に置き換えてください。

オートキャストと明示的なクラス（TypeScript）

ArcGIS SDK はオートキャストに対応しており、クラスのインスタンスの代わりにプレーンオブジェクトを渡せます。

明示的なクラスを使用する場合（オートキャストしない場合）

次のような場合は、new SimpleRenderer()、new Point() などを使用します。

• インスタンスメソッドや instanceof チェックが必要な場合
• 共有の内部ライブラリを構築する場合 — コンストラクター API を使うと、コンパイル時に破壊的変更が表面化します
• エディターでの見つけやすさを重視する場合 — new SimpleRenderer({ ... }) ではプロパティが明確になります
• オブジェクトを段階的に変更する場合 — 長期間使用するインスタンスは、実際のクラスとして扱うほうが明確です

import SimpleRenderer from "@arcgis/core/renderers/SimpleRenderer.js";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol.js";

const renderer = new SimpleRenderer({
  symbol: new SimpleMarkerSymbol({
    color: [226, 119, 40],
    size: 8,
  }),
});

オートキャストを使用する場合

次のような場合は、type プロパティを持つプレーンオブジェクトを使用します。

• 設定が中心のコード — レンダラー、シンボル、ポップアップは通常、振る舞いではなくデータです
• UI 主導の設定 — React の状態 → プレーンオブジェクト → SDK のプロパティという流れのほうがシンプルです
• シリアル化と再利用が重要な場合 — 設定を保存、差分比較、テスト、再利用できます
• 作成後にプロパティを更新する場合 — layer.renderer = { ... } は React の useEffect で簡潔に使えます

// Use 'as const' or 'satisfies' to keep discriminated unions narrow
const renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: [226, 119, 40],
    size: 8,
  },
} as const;

// Or with satisfies for better type inference
const renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: [226, 119, 40],
    size: 8,
  },
} satisfies __esri.SimpleRendererProperties;

TypeScript のベストプラクティス

TypeScript で重要なのは、判別可能なユニオン型を狭く保つことです。

// ❌ BAD - type widens to string
const symbol = { type: "simple-marker", color: "red" };

// ✅ GOOD - type stays literal
const symbol = { type: "simple-marker", color: "red" } as const;

// ✅ GOOD - explicit type annotation
const symbol: __esri.SimpleMarkerSymbolProperties = {
  type: "simple-marker",
  color: "red",
};

推奨されるデフォルト

• 設定にはオートキャストを使用します（レンダラー、シンボル、ポップアップ、ラベル）
• 振る舞いには明示的なクラスを使用します（メソッドや instanceof が必要な場合）
• as const または satisfies を使用して、オートキャストで型安全性を維持します

2 つのアプローチ

1. Map Components（最新 — 推奨）

<arcgis-map> と <arcgis-scene> を使用する Web コンポーネントのアプローチです。

2. Core API

Map、MapView、SceneView クラスを使用する従来の JavaScript アプローチです。

CDN のセットアップ

Map Components のアプローチ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ArcGIS Map</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
    
    <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>
  </head>
  <body>
    <arcgis-map basemap="topo-vector" center="-118.24,34.05" zoom="12">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>
  </body>
</html>

Core API のアプローチ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ArcGIS Map</title>
    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        margin: 0;
      }
    </style>
    
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/5.0/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/5.0/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <script type="module">
      import Map from "@arcgis/core/Map.js";
      import MapView from "@arcgis/core/views/MapView.js";

      const map = new Map({ basemap: "topo-vector" });
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.24, 34.05], // [longitude, latitude]
        zoom: 12,
      });
    </script>
  </body>
</html>

2D マップ

Map Components

<arcgis-map basemap="topo-vector" center="-118.24,34.05" zoom="12">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-compass slot="top-left"></arcgis-compass>
  <arcgis-home slot="top-left"></arcgis-home>
  <arcgis-locate slot="top-left"></arcgis-locate>
</arcgis-map>

<script type="module">
  const mapElement = document.querySelector("arcgis-map");
  await mapElement.viewOnReady(); // Wait for view to be ready
  const view = mapElement.view; // Access the MapView
  const map = mapElement.map; // Access the Map
</script>

Core API

import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";

const map = new Map({ basemap: "streets-vector" });

const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-118.24, 34.05],
  zoom: 12,
  // Optional constraints
  constraints: {
    minZoom: 5,
    maxZoom: 18,
    rotationEnabled: false,
  },
});

3D シーン

Map Components

<arcgis-scene basemap="topo-3d" ground="world-elevation">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
</arcgis-scene>

<script type="module">
  const sceneElement = document.querySelector("arcgis-scene");
  await sceneElement.viewOnReady();
  const view = sceneElement.view; // SceneView
</script>

Core API

import Map from "@arcgis/core/Map.js";
import SceneView from "@arcgis/core/views/SceneView.js";

const map = new Map({
  basemap: "topo-3d",
  ground: "world-elevation",
});

const view = new SceneView({
  container: "viewDiv",
  map: map,
  camera: {
    position: {
      longitude: -118.24,
      latitude: 34.05,
      z: 25000, // altitude in meters
    },
    heading: 0, // compass direction
    tilt: 45, // 0 = straight down, 90 = horizon
  },
});

WebMap と WebScene の読み込み

WebMap（2D）

<arcgis-map item-id="f2e9b762544945f390ca4ac3671cfa72">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-map>

// Core API
import MapView from "@arcgis/core/views/MapView.js";
import WebMap from "@arcgis/core/WebMap.js";

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

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

WebScene（3D）

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

// Core API
import SceneView from "@arcgis/core/views/SceneView.js";
import WebScene from "@arcgis/core/WebScene.js";

const webscene = new WebScene({
  portalItem: { id: "YOUR_WEBSCENE_ID" },
});

const view = new SceneView({
  map: webscene,
  container: "viewDiv",
});

ナビゲーションコンポーネント

コンポーネント	用途
arcgis-zoom	拡大／縮小ボタン
arcgis-compass	方位インジケーター。クリックすると北向きにリセットします
arcgis-home	初期範囲に戻ります
arcgis-locate	ユーザーの位置を検索します
arcgis-navigation-toggle	パン／回転モードを切り替えます（3D）
arcgis-fullscreen	全画面モードを切り替えます
arcgis-scale-bar	マップの縮尺を表示します

スロットの位置

<arcgis-map basemap="streets-vector">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-home slot="top-left"></arcgis-home>
  <arcgis-search slot="top-right"></arcgis-search>
  <arcgis-legend slot="bottom-left"></arcgis-legend>
  <arcgis-scale-bar slot="bottom-right"></arcgis-scale-bar>
</arcgis-map>

利用可能なスロット：top-left、top-right、bottom-left、bottom-right、top-start、top-end、bottom-start、bottom-end

コンポーネント属性

<arcgis-map> / <arcgis-scene> コンポーネントには、basemap、center、zoom 以外にも多くの宣言型属性が用意されています。特に重要なものを以下に示します。

属性	型	用途
item-id	string	ArcGIS Online または Enterprise から WebMap/WebScene を読み込みます
rotation	number	マップの回転角度（度）
scale	number	初期縮尺（例：1:50,000 の場合は 50000）
extent	Extent (autocast)	初期表示範囲
viewpoint	Viewpoint (autocast)	中心点 + 縮尺 + 回転角度をまとめて指定します
spatial-reference	SpatialReference	座標系（WKID）
time-extent	TimeExtent	時間対応レイヤーの時間フィルター
animations-disabled	boolean	すべての goTo アニメーションを無効にします
popup-disabled	boolean	クリック時の自動ポップアップを無効にします
popup-component-enabled	boolean	ウィジェットの代わりに新しい Popup コンポーネント（ベータ版）を使用します
auto-destroy-disabled	boolean	アンマウント後もビューを維持します — React strict mode や SPA のルート変更で特に重要です
attribution-mode	"dark" | "light"	帰属表示テキストのテーマ
hide-attribution	boolean	帰属表示を非表示にします（最初に SDK のライセンス条項を確認してください）

一部のプロパティは JavaScript でのみ設定できます（属性としては設定できません）。

プロパティ	型	用途
padding	ViewPadding	サイドパネルがマップの一部を覆う場合に、UI の論理領域をオフセットします
theme	Theme	ライト／ダークの描画テーマ
background	ColorBackground	タイル化されていない領域の背景色
graphics	Collection	レイヤーに依存しない、ビュー単位のグラフィックス
highlights	Collection	フィーチャのハイライト表示に使用する最大 6 つのハイライト設定
analyses	Collection	3D 解析（見通し解析、可視領域解析）— SceneView のみ
aria	ARIAProperties	アクセシビリティ用のラベルと説明

<arcgis-map
  auto-destroy-disabled
  basemap="topo-vector"
  center="-118.24,34.05"
  zoom="12"
></arcgis-map>

// Layout: offset the UI when a 320px left sidebar covers part of the map
const mapElement = document.querySelector("arcgis-map");
await mapElement.viewOnReady();
mapElement.padding = { left: 320 };

マップのプロパティ

プロパティ	型	説明
basemap	string or Basemap	マップのベースレイヤー
ground	string or Ground	地表のプロパティ（標高）
layers	Collection	運用レイヤー
tables	Collection	空間情報を持たないテーブル
allLayers	Collection (readonly)	フラット化されたレイヤーコレクション
allTables	Collection (readonly)	フラット化されたテーブルコレクション
editableLayers	Collection (readonly)	編集をサポートするレイヤー
focusAreas	Collection (readonly)	マップのフォーカスエリア

マップのメソッド

メソッド	戻り値	目的
add(layer, index?)	void	レイヤーを追加します。任意でインデックスを指定できます
addMany(layers, index?)	void	複数のレイヤーを一度に追加します
remove(layer)	Layer	単一のレイヤーを削除します
removeMany(layers)	Layer[]	複数のレイヤーを削除します
removeAll()	Layer[]	すべての運用レイヤーを削除します
reorder(layer, index?)	Layer	レイヤーの描画順を変更します
findLayerById(id)	Layer	id プロパティでレイヤーを検索します
findTableById(id)	Layer	id プロパティでテーブルを検索します
destroy()	void	マップ、そのレイヤー、ベースマップ、地表を解放します

// Add at a specific index (below existing layers)
map.add(baseLayer, 0);

// Batch add for initial setup
map.addMany([featureLayer, graphicsLayer, imageryLayer]);

// Reorder — move a layer to index 2
map.reorder(roadsLayer, 2);

// Lookup by ID (requires `id` to be set on the layer at creation)
const roads = map.findLayerById("roads");
if (roads) roads.visible = false;

パターン： 単一の Map インスタンスを MapView（2D）と SceneView（3D）の両方で共有できます。ユーザーとのインタラクションはマップではなくビュー上で発生するため、同じマップを使用する2つのビューでは、カメラや表示範囲の状態を個別に保ちながら、レイヤーの状態が同期されます。

ビューの設定

初期表示範囲の設定

// By center and zoom
const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-118.24, 34.05],
  zoom: 12,
});

// By scale
const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-118.24, 34.05],
  scale: 50000, // 1:50,000
});

// By extent
const view = new MapView({
  container: "viewDiv",
  map: map,
  extent: {
    xmin: -118.5,
    ymin: 33.8,
    xmax: -117.9,
    ymax: 34.3,
    spatialReference: { wkid: 4326 },
  },
});

プログラムによるナビゲーション

// Go to location
await view.goTo({
  center: [-118.24, 34.05],
  zoom: 15,
});

// Animated navigation
await view.goTo(
  { center: [-118.24, 34.05], zoom: 15 },
  { duration: 2000, easing: "ease-in-out" },
);

// Go to extent
await view.goTo(layer.fullExtent);

// Go to features
await view.goTo(featureSet.features);

ビューの制約

// Constrain zoom levels
view.constraints = {
  minZoom: 5,
  maxZoom: 18,
};

// Constrain to area
view.constraints = {
  geometry: layer.fullExtent,
  minScale: 500000,
};

// Disable rotation
view.constraints = {
  rotationEnabled: false,
};

ビューの状態プロパティ

プロパティ	型	説明
ready	boolean	ビューが完全に初期化されているかどうか
updating	boolean	レイヤーまたはビューが更新中かどうか
stationary	boolean	ナビゲーションが進行中でない場合は true
interacting	boolean	ユーザーが操作中（パン／ズーム）の場合は true
suspended	boolean	ビューが表示されていない場合は true
focused	boolean	ビューがキーボードフォーカスを持つ場合は true
resolution	number	1ピクセルあたりのマップ単位

イベント処理

コンポーネントイベント

Map コンポーネントは、<arcgis-map>／<arcgis-scene> 要素自体で、arcgisView をプレフィックスとする DOM イベントを発生させます。これらのイベントはビューイベントに対応しており、ビューの準備が完了する前でも、要素に対する addEventListener で処理できます。

const mapElement = document.querySelector("arcgis-map");

// Alternative to awaiting viewOnReady()
mapElement.addEventListener("arcgisViewReadyChange", () => {
  if (mapElement.ready) {
    const view = mapElement.view;
    const map = mapElement.map;
    // Safe to use view and map here
  }
});

どちらを使うか：

• 要素上の コンポーネントイベント — 宣言的で、フレームワークとの親和性が高く、ビューの準備が完了する前から機能します。DOM スタイルのイベントリスナーを使いたい React／Vue のパターンに適しています。
• view.on(...) を使う ビューイベント — 命令的で、クリーンアップ用のハンドルを返し、Core API のコードと同じように機能します。

ほとんどのビューイベントには、対応する arcgisView* コンポーネントイベントがあります。すべてのイベントについては、arcgis-map コンポーネントのリファレンスを参照してください。

ビューイベント

// View ready
view.when(() => {
  console.log("View is ready");
});

// Click event
view.on("click", (event) => {
  console.log("Clicked at:", event.mapPoint);
});

// Pointer move
view.on("pointer-move", (event) => {
  const point = view.toMap(event);
  console.log("Mouse at:", point.longitude, point.latitude);
});

// Hit test (identify features under cursor)
view.on("click", async (event) => {
  const response = await view.hitTest(event);
  if (response.results.length > 0) {
    const graphic = response.results[0].graphic;
    console.log("Clicked feature:", graphic.attributes);
  }
});

// Extent change (using reactiveUtils)
import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";

reactiveUtils.watch(
  () => view.extent,
  (extent) => console.log("Extent changed:", extent),
);

// Stationary (after pan/zoom completes)
reactiveUtils.watch(
  () => view.stationary,
  (isStationary) => {
    if (isStationary) {
      console.log("Navigation complete");
    }
  },
);

ビューイベントのリファレンス

イベント	説明
click	ユーザーがビューをクリックします
double-click	ユーザーがビューをダブルクリックします
immediate-click	クリック時にすぐ発生します（ダブルクリックの待機時間はありません）
pointer-move	マウスまたはタッチのポインターがビュー上を移動します
pointer-down / pointer-up	ポインターを押す／離す操作
pointer-enter / pointer-leave	ポインターがビューに入る／ビューから出る操作
key-down / key-up	ビューにフォーカスがあるときのキーボードイベント
drag	ユーザーがビュー上をドラッグ（パン）します
hold	ユーザーがビュー上でポインターを押したままにします
mouse-wheel	マウスホイールでスクロールします
resize	ビューのコンテナーのサイズが変更されます
focus / blur	ビューがキーボードフォーカスを取得／喪失します
layerview-create	レイヤービューが作成されます
layerview-destroy	レイヤービューが破棄されます

一般的なベースマップ

ベースマップ ID	説明
streets-vector	道路地図
topo-vector	地形図
satellite	衛星画像
hybrid	ラベル付き衛星画像
dark-gray-vector	ダークグレーのキャンバス
gray-vector	ライトグレーのキャンバス
osm	OpenStreetMap
topo-3d	3D 地形図（SceneView）

惑星の可視化（火星）

火星のシーン

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

<script type="module">
  import ElevationLayer from "@arcgis/core/layers/ElevationLayer.js";
  import TileLayer from "@arcgis/core/layers/TileLayer.js";

  const viewElement = document.querySelector("arcgis-scene");

  // Set Mars spatial reference
  viewElement.spatialReference = { wkid: 104971 }; // Mars 2000

  // Configure camera for Mars
  viewElement.camera = {
    position: {
      x: 27.63423,
      y: -6.34466,
      z: 1281525,
      spatialReference: { wkid: 104971 },
    },
    heading: 332,
    tilt: 37,
  };

  await viewElement.viewOnReady();

  // Mars elevation
  const marsElevation = new ElevationLayer({
    url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDEM200M/ImageServer",
  });
  viewElement.ground = { layers: [marsElevation] };

  // Mars imagery
  const marsImagery = new TileLayer({
    url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDIM/MapServer",
    title: "Mars Imagery",
  });
  viewElement.map.add(marsImagery);
</script>

概観図（同期されたビュー）

シーンを含む概観図

<arcgis-scene basemap="hybrid" ground="world-elevation">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  
  <arcgis-map
    basemap="topo-vector"
    id="overviewDiv"
    slot="top-right"
  ></arcgis-map>
</arcgis-scene>

<style>
  #overviewDiv {
    width: 300px;
    height: 200px;
    border: 1px solid black;
  }
</style>

<script type="module">
  import Graphic from "@arcgis/core/Graphic.js";
  import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";

  const sceneElement = document.querySelector("arcgis-scene");
  const overviewElement = document.querySelector("arcgis-map");

  await sceneElement.viewOnReady();
  await overviewElement.viewOnReady();

  // Disable rotation on overview
  overviewElement.constraints.rotationEnabled = false;
  overviewElement.view.ui.components = [];

  // Add visible area graphic
  const visibleAreaGraphic = new Graphic({
    symbol: {
      type: "simple-fill",
      color: [0, 0, 0, 0.5],
      outline: null,
    },
  });
  overviewElement.graphics.add(visibleAreaGraphic);

  // Sync overview with main scene
  reactiveUtils.watch(
    () => sceneElement.visibleArea,
    async (visibleArea) => {
      visibleAreaGraphic.geometry = visibleArea;
      await overviewElement.goTo(visibleArea);
    },
    { initial: true },
  );
</script>

関連サンプル

• intro-mapview - MapView の基本的な設定と構成
• intro-sceneview - 3D 用 SceneView の基本的な設定
• webmap-basic - ポータルからの WebMap の読み込み
• watch-for-changes-reactiveutils - reactiveUtils を使ったリアクティブなプロパティ監視
• overview-map - 概観図／インセットマップの作成

関連スキル

• マップにデータレイヤーを追加する方法については、arcgis-layers を参照してください。
• プロジェクトのセットアップとスキャフォールディングについては、arcgis-starter-app を参照してください。
• reactiveUtils と promiseUtils の詳細については、arcgis-core-utilities を参照してください。
• ヒットテスト、ポップアップ、ユーザー操作については、arcgis-interaction を参照してください。

よくある落とし穴

1. Core API の CSS が不足している：ウィジェットやポップアップを正しく表示するには、Core API に main.css が必要です。

   
   <script type="module">
     import MapView from "@arcgis/core/views/MapView.js";
     import Map from "@arcgis/core/Map.js";
     const view = new MapView({
       container: "viewDiv",
       map: new Map({ basemap: "topo-vector" }),
     });
   </script>
   

   
   <link
     rel="stylesheet"
     href="https://js.arcgis.com/5.0/esri/themes/light/main.css"
   />
   <script type="module">
     import MapView from "@arcgis/core/views/MapView.js";
     import Map from "@arcgis/core/Map.js";
     const view = new MapView({
       container: "viewDiv",
       map: new Map({ basemap: "topo-vector" }),
     });
   </script>
   

   影響： 地図自体は表示されますが、ウィジェット（ズーム、凡例、検索）やポップアップのスタイルが適用されない、または完全に崩れて表示されます。レイアウトが崩れ、コントロールが使えなくなります。

2. viewOnReady() を await していない：ビューのプロパティは、ビューの準備が完了するまで使用できません。

   // Anti-pattern: accessing view before it is ready
   const mapElement = document.querySelector("arcgis-map");
   const view = mapElement.view; // undefined - view is not ready yet
   view.goTo({ center: [-118, 34] }); // TypeError: Cannot read properties of undefined
   

   // Correct: wait for the view to be ready
   const mapElement = document.querySelector("arcgis-map");
   await mapElement.viewOnReady();
   const view = mapElement.view; // MapView instance, safe to use
   view.goTo({ center: [-118, 34] });
   

   影響： コンポーネントの初期化前は view が null または undefined となり、プロパティへのアクセスやメソッドの呼び出しで実行時エラーが発生します。

3. 座標の順序：ArcGIS では [longitude, latitude] を使用し、[latitude, longitude] ではありません。

   // Anti-pattern: lat/lng order (Google Maps convention)
   const view = new MapView({
     center: [34.05, -118.24], // lat first, lng second - WRONG
     zoom: 12,
   });
   

   // Correct: lng/lat order (ArcGIS convention)
   const view = new MapView({
     center: [-118.24, 34.05], // lng first, lat second
     zoom: 12,
   });
   

   影響： 地図が誤った場所を中心に表示され、多くの場合、海上や別の大陸に表示されます。この間違いを示すエラーメッセージは表示されません。

4. viewDiv の高さが不足している：コンテナーに高さが設定されていることを確認してください。

   html,
   body,
   #viewDiv {
     height: 100%;
     margin: 0;
   }
   

5. スクリプトの type：async/await をサポートするには、type="module" を使用してください。

   <script type="module">
     // async/await works here
   </script>
   

6. レイヤーを追加できる Map は 1 つだけ：レイヤーを 2 つ目の Map に追加すると、最初の Map からは警告なしで削除されます。

   // Anti-pattern: sharing a layer between two maps expecting both to display it
   const layer = new FeatureLayer({ url: "..." });
   const map1 = new Map({ layers: [layer] });
   const map2 = new Map({ layers: [layer] }); // silently removes layer from map1
   

   // Correct: create two instances against the same data source
   const layer1 = new FeatureLayer({ url: "..." });
   const layer2 = new FeatureLayer({ url: "..." });
   const map1 = new Map({ layers: [layer1] });
   const map2 = new Map({ layers: [layer2] });
   

   影響： レイヤーは最後に作成された地図にのみ表示され、エラーや警告は表示されません。2 つのビュー間で同じ地図を共有せず、2D と 3D を別々の地図インスタンスで切り替える場合によく発生します。