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

OpenLayers セットアップ

Web で OpenLayers を MapConductor から使う手順です。キーは不要で、投影法やタイルソースを細かく制御したいときに向きます。

PACKAGE

react-for-openlayers

API KEY

不要

CSS

必要

3D CAMERA

擬似

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

前提

Node.js 18 以上

React 18 または 19

STEP 01

インストールする

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

terminalnpm

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

STEP 02

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

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

main.tsxTypeScript

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

STEP 03

タイルソースを決める

OpenLayersDesign は OpenLayers の TileSource を包んだ定数です。既定の OpenStreetMap は ol の OSM ソースを使い、帰属表示も持ちます。

注意

OpenStreetMap の公開タイルサーバーには利用ポリシーがあります。本番トラフィックを流す場合は、自前のタイル配信か商用サービスを使ってください。

動作確認

ここまで動けば完了

地図が出れば完了です。

OpenLayersMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { OpenLayersDesign, OpenLayersMapView, useOpenLayersMapViewState } from '@mapconductor/react-for-openlayers';
import '@mapconductor/react-for-openlayers/style.css';

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

export function OpenLayersMap() {
  const state = useOpenLayersMapViewState({
    mapDesignType: OpenLayersDesign.OpenStreetMap,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

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

地図デザイン

OpenLayersDesign は ol の TileSource を包んだ定数です。

OpenLayersDesign

Notes

OpenStreetMap

ol の OSM ソース。帰属表示付き

None

ベースタイルなし

うまくいかないとき

傾きや回転が効かない

OpenLayers にはネイティブの 3D カメラがありません。MapConductor は tilt と bearing を CSS の 3D 変換で近似しています。見た目だけの効果です。

地図の位置が崩れる

style.css を読み込んでいるか確認します。

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

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

次に

OpenLayers のネイティブ機能が必要になったら、MapViewHolder から ol の Map インスタンスを取り出して直接操作できます。