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

動くサンプル¶

次のステップ¶

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