Re:Earth をローカル環境で動かしてみた 

[YAMAP エンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yamap-engginers) の第8日目の記事です。

ときどき「この地理データを地図上にサクッといい感じに表示したいな」というケースに出くわします。
Mapbox GL JS や  leaflet.js を使って表示するのも良いのですが、もっとかんたんにノーコードで実現できないかなと思っていました。

カシミール3D や QGIS を使ってもいいのですが、動作が重いのと操作性が煩雑なのでどうしようかと思っていたところに以下の記事を見つけました。
[東京大学が「デジタルツイン」構築向けWebGISプラットフォーム「Re:Earth」をオープンソースとして公開](https://jp.techcrunch.com/2021/07/28/wtnv-eukarya-re-earth/)

今回は Re:Earth をお試ししてみたという内容です。ほぼ [チュートリアル](https://docs2.reearth.io/developer-guide/intro/getting-started/setup-environment) と同じ内容になりますが備忘録として投稿します...

## 環境
今回はローカルの Mac の Docker 上で Re:Earth を動かします

## Auth0の設定
[チュートリアル](https://docs2.reearth.io/developer-guide/intro/getting-started/setup-auth0) どおりに Auth0 の設定を行います。ここが最も面倒かもしれませんが、最初の1回だけなので大丈夫です。

まずは Application を作成します。バックエンド側の設定をポチポチと進めます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/5f305fde-5965-dd5d-a8cf-1467354377c9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/f93d2144-239a-1d7f-ca22-da89259ffe6f.png)

つぎはフロントエンド側の設定をポチポチと進めます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/0d0e6f00-98fc-ad15-4f96-db3fecac6c7b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/5e37a0a5-574f-82a6-6aa5-619b380be0dc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/8e8bf7e3-4a32-5e09-36af-81c683ef38aa.png)

こういう状態になりました
![スクリーンショット 2021-12-07 22.58.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/017c9fd4-fec2-da57-b53b-6a381149d9f6.png)

API を作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/019c41df-3bdd-934b-1a26-b7b8cf93d84b.png)

こういう状態になりました
![スクリーンショット 2021-12-07 23.05.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/1e7f4c87-d3f3-ac10-7c73-0f14980f6611.png)

Post User Registration を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/299f6a5d-b0a9-54a4-c6ee-68940b2964d0.png)

Sign up Re:Earth を作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/8c57cba2-b03f-243c-bfef-b3a7e9fc31e9.png)

text box に以下のコードを記載します

```
const axios = require("axios");

const url = "http://localhost:8080";

exports.onExecutePostUserRegistration = async (event) => {
  const res = await axios.post(url + "/api/signup", {
    email: event.user.email,
    sub: event.user.user_id,
    name: event.user.username || event.user.nickname || event.user.email,
  });
  console.log("Re:Earth OK", res);
};
```

Modules を表示して axios を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/191ccc96-fe28-71a4-e39f-c624b944596d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/37518cf2-a5e6-fcc1-1a07-b650289bbda8.png)

User のところで新しいユーザを追加しておきます
事前準備はいったん完了です

## Dockerで起動

docker-compose.yml をダウンロードします

```
curl -OL https://raw.githubusercontent.com/reearth/reearth/main/docker-compose.yml
```

Auth0 の設定内容を参照して .env ファイルを作成します

```
REEARTH_AUTH0_AUDIENCE=http://localhost:8080
REEARTH_AUTH0_CLIENTID=YOUR_CLIENTID
REEARTH_AUTH0_CLIENTSECRET=YOUR_CLIENTSECRET
REEARTH_AUTH0_DOMAIN=YOUR_DOMAIN.jp.auth0.com
REEARTH_AUTH0_WEBCLIENTID=YOUR_WEBCLIENTID
```

起動します

```
docker-compose up -d
```

## コマンドでユーザ登録
以下のコマンドで Auth0 に作成しておいたユーザを登録します

```
curl -H 'Content-Type: application/json' http://localhost:8080/api/signup -d @- << EOF
{
"sub": "google-oauth2|XXXXXXXXXXXXXXXXXX",
"email": "your_name@example.com",
"name": "Kohei Higuchi"
}
EOF
```

上記の sub には Auth0 の user_id を設定します
![スクリーンショット 2021-12-07 23.25.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/e07d0cea-6230-4fc2-ee88-15e451c89c0d.png)

## ブラウザで表示
http://localhost:8080/ が表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/6d2d08ea-53bc-2ea5-1e5d-62bc200e6751.png)

サインインすると Re:Earth が使えるようになりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/0a450eb1-eab4-90b5-50b6-5852b1169453.png)

## サンプルプロジェクトを作成する
さんぷるプロジェクトを作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/d6b59939-6dd5-68e9-4a34-129b60b8f370.png)

プロジェクト編集画面に行くと地球儀が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/228f435f-abbf-eb29-900c-523707c4142b.png)

## geojson を表示してみる
試しに適当な geojson を表示してみます
ここのファイルアイコンを地図上の　D&D　します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/933a2152-fbbc-15d5-dc41-2a7284887f21.png)

ファイルというレイヤーが作成されるので選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/f37051a5-c33e-8ffc-aad8-0936dae3e05a.png)

右サイドバーのファイル URL から geojson ファイルをアップロードします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/b89907d4-4b57-8245-f99e-215b4ee7220e.png)

簡単に表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/e2cd0c97-71e7-fcef-73d3-97c1fb0878a1.png)

## geojson.io でファイル編集
ちなみに geojson ファイルは [geojson.io](https://geojson.io/) で簡単に編集できます

## 地理院の衛星写真を表示する
タイルを URL に変更して、URL 欄に `https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg` と設定すると衛星写真が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/7f7db614-0164-ccee-245b-d5bad560f11a.png)

## 3D 表示してみる
地形をオンにして、 Ctrl を押しながらドラッグすると 3D 表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100097/80e93db6-9c75-8800-00a0-7d195291b10a.png)

## まとめ
このように Re:Earth を使うと簡単にコードを書かずに地図上に地理情報を表示できました。他にも写真を地図上に貼ったり、３D オブジェクトを配置したりと色々な表現ができます。お気軽に使うには便利です。
また OSS として公開されており、プラグイン開発なども今後盛んに行われるようです。
もう少し使い倒して自分でプラグインが作れるようにがんばります。