2-2. resiumの概要

[sumakokima2]

resiumの概要

resiumとは

https://resium.darwineducation.com/

Resium is library of React components for 🌍Cesium ResiumはCesiumをReactスタイルで書くことができるライブラリです。

インストール

https://resium.darwineducation.com/installationに細かいインストール方法が記載されています。

手順

1. Install cesium and resium
2. Set up webpack configuration(以下3つから1つの手法を洗濯) 2.1 If you are using create-react-app, craco-cesium is recommended. (easiest) 2.2 Copy whole Cesium files and load Cesium in HTML (easier) 2.3 Copy only asset files and load Cesium partially

ここではまずnpmでcesiumとresiumをインストールするのですが、初心者にはstep2の2. Set up webpack configurationに混乱しました。ので、ここでは 2. Set up webpack configuration -> 2.1 If you are using create-react-app, craco-cesium is recommended. (easiest)　の方法でインストールを進めます。（まだnpmでcesiumとresiumをインストールしないでください。）

craco-sesiumのgitページに行きます！

https://github.com/darwin-education/craco-cesium#3-rewrite-npm-scripts

1. create-react-appをインストール まず、create-react-appをインストールします。 create-react-appは、reactでシングルページを作るためのアプリケーションです。reactの公式サイトでも推奨されています。

npm install -g create-react-app
# or
yarn global add create-react-app

2.Reactプロジェクトを作成

create-react-app test
cd test

以下のようなプロジェクトフォルダが自動的に生成されます。

$yarn startするだけで、もうhttp://localhost:3000/reactの初期画面に。

3. モジュールのインストール

npm install --save @craco/craco craco-cesium cesium resium
# or
yarn add @craco/craco craco-cesium cesium resium

4. package.jsonの書き換え

{
  // ...
  "scripts": {
    "start": "craco start", // react-scripts -> craco
    "build": "craco build", // react-scripts -> craco
    "test": "craco test",   // react-scripts -> craco
    "eject": "react-scripts eject"
  },
  // ...
}

のように書き換えてください。なお、// react-scripts -> cracoのコメントアウト部分は削除。

5. craco.config.js を作る craco.config.jsを作って、package.jsonと同じ階層に保存します。

module.exports = {
  plugins: [
    {
      plugin: require("craco-cesium")()
    }
  ]
};

6. 終了！！！ $yarn start で動作確認。react画面が表示されればOKです。