ドキュメント / セットアップ / React / ArcGIS

ArcGIS セットアップ

Web で ArcGIS を MapConductor から使う手順です。@arcgis/core はパッケージに同梱され、Esri のテーマ CSS もパッケージ側で読み込まれます。

PACKAGE

react-for-arcgis

API KEY

必要

CSS

自動

REACT NATIVE

あり

ほかのプラットフォームAndroid iOS

デモを見る店舗マップ · React ↗

前提

Node.js 18 以上

ArcGIS Location Platform の API キー

STEP 01

インストールする

@arcgis/core はパッケージに同梱されています。Esri のテーマ CSS もビュー側で読み込まれるため、自分で import する必要はありません。

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-arcgis

STEP 02

API キーを状態フックに渡す

キーはビュー component の props ではなく、状態フックに渡します。props に置くとテストのログやスナップショットに混ざるためです。

ArcGISMap.tsxTypeScript · React

const state = useArcGISViewState({
  apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
  mapDesignType: ArcGISDesign.Streets,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

注意

キーはビルド時の環境変数（Vite なら import.meta.env.VITE_*）から渡し、ソース管理には入れないでください。フロントエンドに渡る以上、公開されても被害が出ないようリファラ制限やドメイン制限を必ず掛けます。

STEP 03

2D と 3D を使い分ける

ArcGISMapView は 3D のシーンビュー、ArcGISMapView2D は 2D のマップビューです。どちらも同じ状態オブジェクトを共有するので、実行時に切り替えられます。

動作確認

ここまで動けば完了

ArcGIS の地図が出れば完了です。

ArcGISMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { ArcGISDesign, ArcGISMapView2D, useArcGISViewState } from '@mapconductor/react-for-arcgis';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function ArcGISMap() {
  const state = useArcGISViewState({
    apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
    mapDesignType: ArcGISDesign.Streets,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <ArcGISMapView2D state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </ArcGISMapView2D>
  );
}

地図デザイン

ArcGISDesign は Esri のベースマップに対応します。ここに挙げたのは一部です。

ArcGISDesign

Notes

Streets / StreetsNight / StreetsRelief

道路地図とその変種

Imagery / ImageryLabels

衛星画像とラベル付き

Topographic / Terrain

地形図

LightGray / DarkGray

データを載せる下地向け

Navigation / NavigationNight

ナビゲーション向け

Oceans / ChartedTerritory / Nova

その他のテーマ別スタイル

うまくいかないとき

地図が出ない

キーが状態フックに渡っているか確認します。
キーで必要な ArcGIS サービスが有効になっているか確認します。

バンドルが大きい

@arcgis/core は大きなライブラリです。ArcGIS を使う画面だけを動的 import に切り出すと初期ロードを抑えられます。

プロバイダを切り替えるとフックの順序エラーが出る

React はフックの呼び出し順を変えられません。プロバイダごとに小さなコンポーネントを作り、その中でそのプロバイダのフックを呼ぶ形にします。サンプルアプリの providers/ ディレクトリがこの構成です。

次に

ArcGIS は GIS 資産をそのまま扱えるのが強みです。共通 API で足りない部分は MapViewHolder からネイティブのビューを取り出して直接操作できます。