🌏

GatsbyでCesiumjsを動かす

2022/02/23に公開約2,700字


動かすまでちょっと手間だったのでメモ。

基本的にはResiumのInstallationで説明されていることがベースとなる。

インストール

yarn add cesium resium

ln

cesiumのアセットディレクトリをまるっとstaticにコピーします。
コピーする階層は自由ですが、この例ではトップディレクトリに配置します。

yarn add -D symlink-dir
package.json
{
  "script": {"postinstall": "symlink-dir node_modules/cesium/Build/Cesium static/cesium"}
}
.gitignore
/static/cesium
yarn

でコピーされる。

gatsby-node.js

gatsby-node.js
const {
  resolve
} = require("path"); /* eslint-disable-line @typescript-eslint/no-var-requires */

exports.onCreateWebpackConfig = ({
  actions,
  plugins
}) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "~": resolve(__dirname, "./src"),
      },
      fallback: {
        assert: require.resolve("assert/"),
        url: require.resolve("url/"),
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        stream: require.resolve("stream-browserify"),
        zlib: require.resolve("browserify-zlib"),
      }
    },
    plugins: [
      plugins.define({
        CESIUM_BASE_URL: JSON.stringify("cesium"),
      }),
    ],
  });
};

CESIUM_BASE_URL: JSON.stringify("cesium")CESIUM_BASE_URL: "cesium" ではないことに注意。

fallbackwebpack やbuild時にでるメッセージをもとに足していく。

コンポーネントを作る

src/components/Cesium.tsx
import { Viewer } from 'resium'

export default function Cesium() {
  return (
    <Viewer full />
  )
}

ここはサンプル通り。

yarn add @loadable/component @types/loadable__component
src/pages/index.tsx
import * as React from "react";
import { Helmet } from "react-helmet-async";
import loadable from "@loadable/component";

const Index = (): React.ReactElement => {
  const Cesium = loadable(() => import("~/components/Cesium"));

  return (
    <>
      <Helmet>
        <title>Cesium</title>
        <link rel="stylesheet" href="cesium/Widgets/widgets.css" />
	{/* CESIUM_BASE_URL 同様ここのパスはページのディレクトリ構造によって変える */}
      </Helmet>
      <Cesium />
    </>
  );
};

export default Index;

CESIUM_BASE_URL

cesiumを表示するページが {host}/index.html ならば、
サンプルの通り

gatsby-node.js
CESIUM_BASE_URL: JSON.stringify("cesium")
src/pages/index.tsx
<link rel="stylesheet" href="cesium/Widgets/widgets.css" />

でよいが、{host}/hoge/index.htmlなら

gatsby-node.js
CESIUM_BASE_URL: JSON.stringify("../cesium")
src/pages/index.tsx
<link rel="stylesheet" href="../cesium/Widgets/widgets.css" />

のように適切な相対パスに変更する[1]

脚注
  1. 今回のやり方だと、 /a.html と /hoge/b.html のように階層が違う複数ページでcesiumを使うことができない。webpackむずかしい。 ↩︎

Discussion

ログインするとコメントできます