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

Cesium セットアップ

Web で Cesium を MapConductor から使う手順です。本物の地球儀として 3D 表示したいときに選びます。cesium の静的アセットをビルドに含める設定が必要です。

PACKAGE

react-for-cesium

API KEY

不要

CSS

必要

3D CAMERA

本物

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

前提

Node.js 18 以上

静的アセットを配信できるビルド設定（Vite など）

STEP 01

インストールする

cesium はパッケージに同梱されています。

terminalnpm

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

STEP 02

スタイルシートを読み込む

アプリのエントリーポイントで一度だけ読み込みます。忘れると地図の位置やコントロールの見た目が崩れます。

main.tsxTypeScript

import '@mapconductor/react-for-cesium/style.css';

STEP 03

Cesium の静的アセットを配信する

Cesium は Workers・Assets・Widgets・ThirdParty といった静的ファイルを実行時に読み込みます。これらを配信パスにコピーし、CESIUM_BASE_URL でその場所を教える必要があります。サンプルアプリ（examples/basic/vite.config.ts）がこの設定の実例です。

vite.config.tsTypeScript

// Copy node_modules/cesium/Build/Cesium/{Workers,Assets,Widgets,ThirdParty}
// into your output directory, then tell Cesium where they live:
define: {
  CESIUM_BASE_URL: JSON.stringify('/cesiumStatic/'),
}

動作確認

ここまで動けば完了

地球儀が出れば完了です。

CesiumMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { CesiumDesign, CesiumMapView, useCesiumMapViewState } from '@mapconductor/react-for-cesium';
import '@mapconductor/react-for-cesium/style.css';

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

export function CesiumMap() {
  const state = useCesiumMapViewState({
    mapDesignType: CesiumDesign.Default,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

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

地図デザイン

CesiumDesign は Cesium の ImageryProvider を包んだ定数です。

CesiumDesign

Notes

Default

OpenStreetMap のタイル。帰属表示付き

None

画像レイヤーなし

うまくいかないとき

コンソールに Worker やアセットの 404 が出る

静的アセットのコピーと CESIUM_BASE_URL の設定を確認します。Cesium はこれらを実行時に取りに行きます。

バンドルが大きい

cesium は大きなライブラリです。3D 表示が要る画面だけを動的 import に切り出してください。

開発時だけ地図が二重に初期化される

React StrictMode は effect を 2 回実行します。各プロバイダはこれを検知して片方を破棄するようになっているので、StrictMode を外す必要はありません。

次に

Cesium は本物の 3D カメラを持つため、tilt や bearing がそのまま反映されます。Leaflet や OpenLayers の擬似 3D とは挙動が異なります。