GatsbyでCesiumjsを動かす

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

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

検証時はgatsby@4.4.0, cesium@1.99.0

インストール

yarn add cesium resium

ln

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

yarn add -D symlink-dir

package.json

{
  "script": {"postinstall": "symlink-dir node_modules/cesium/Build/Cesium static/{page}/cesium"}
}

{page}には利用するページ名を入れる。

.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" ではないことに注意。

fallback は webpack や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/{page}/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;