ProgrammingJavascript

Cesium-React 적용

, , , , ,

Cesium-React 적용

출처: cesium-react - npm

create-react-app

react 프로젝트 생성

1
2
3
create-react-app cesium-react-test
cd cesium-react-test
yarn eject

yarn install

모듈 설치

  • cesium
  • cesium-react
  • html-webpack-include-assets-plugin
  • copy-webpack-plugin
1
yarn add cesium cesium-react html-webpack-include-assets-plugin copy-webpack-plugin

webpack.config 수정

config/webpack.config.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// config/webpack.config.dev.js

const HtmlIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  externals: {
    cesium: "Cesium"
  },  
  plugins: {
    new CopyWebpackPlugin([
      {
        from: "node_modules/cesium/Build/CesiumUnminified",
        to: "cesium"
      }
    ]),
    new HtmlIncludeAssetsPlugin({
      append: false,
      assets: [
        "cesium/Widgets/widgets.css",
        "cesium/Cesium.js"
      ]
    }),
    new webpack.DefinePlugin({
      "process.env": {
        CESIUM_BASE_URL: JSON.stringify("/cesium")
      }
    }),
    // ...
  }
  // ...
}

config/webpack.config.prod.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// config/webpack.config.prod.js

const HtmlIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  externals: {
    cesium: "Cesium"
  },  
  plugins: {
    new CopyWebpackPlugin([
      {
        from: "node_modules/cesium/Build/Cesium",
        to: "cesium"
      }
    ]),
    new HtmlIncludeAssetsPlugin({
      append: false,
      assets: [
        "cesium/Widgets/widgets.css",
        "cesium/Cesium.js"
      ]
    }),
    new webpack.DefinePlugin({
      "process.env": {
        CESIUM_BASE_URL: JSON.stringify("/cesium")
      }
    }),
    // ...
  }
  // ...
}

소스 수정

App.js 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import CesiumPage from "./CesiumPage";

class App extends Component {
  render() {
    return (
      <div className="App">
        <CesiumPage />
      </div>
    );
  }
}

export default App;

CesiumPage.js 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from "react";
import { Cartesian3 } from "cesium";
import { Viewer, Entity } from "cesium-react";

class CesiumPage extends Component {
  render() {
    return (
      <div>
        cesium page
        <Viewer full>
          <Entity name="Seoul" position={Cartesian3.fromDegrees(126.97224, 37.40076, 100)} point={{ pixelSize: 10 }}>
            test
          </Entity>
        </Viewer>
      </div>
    );
  }
}

export default CesiumPage;

Cesium-React

공유하기