ArcGIS Maps SDK

ArcGIS Maps SDK for JavaScript は Esri の地図ライブラリです。OpenLayers と同様に完全にモジュール化されているため、Terra Draw のアダプターは必要なクラスを lib 経由で受け取ります。

ローカルで使う場合は次のようにインストールします。

pnpm install -D @arcgis/core terra-draw-arcgis-adapter

MapLibre との違い

1. import 文

import EsriMap from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer.js';
// ...plus the geometry/symbol classes the adapter needs (see below)
import { TerraDrawArcGISMapsSDKAdapter } from 'terra-draw-arcgis-adapter';

2. 地図の作成

ArcGIS ではマップ (データ) とビュー (描画) が分かれています。

const map = new EsriMap({ basemap });
const view = new MapView({
	container: 'map',
	map,
	center: [132.4553, 34.3966],
	zoom: 12
});

ベースマップと API キー

Esri 自身のベースマップ (basemap: 'topo-vector' など) には ArcGIS の API キーが必要です。以下のサンプルでは代わりに、WebTileLayer を使って CARTO のラスタータイルからキー不要のベースマップを構成しているため、キーなしで動作します。

3. アダプター — と描画開始のタイミング

アダプターがラップするのはマップではなくビューです。

adapter: new TerraDrawArcGISMapsSDKAdapter({
	lib: {
		GraphicsLayer, Graphic, Point, Polyline, Polygon,
		SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,
		PictureMarkerSymbol, Color
	},
	map: view
})

view.when(() => {
	draw.start();
});

動くサンプル

Live editor — open this page in the browser to run the code.

次のステップ

ハンズオンの内容はこれで終わりです。6 つの地図ライブラリを、1 つの Terra Draw API で扱ってきました。Terra Draw コミュニティとのつながり方については、質疑応答のページ をご覧ください。