当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react 地图可视化 cesium 篇

react 地图可视化 cesium 篇

2019年07月04日  | 移动技术网IT编程  | 我要评论
vue function-based api rfc 一出来，感觉 vue 越来越像 react 了。新立项目，决定尝试下 react.js。下面是 react 集成 cesium，核心部分是 webpack 的配置。

 

一、安装 create-react-app
npm install -g create-react-app

 

二、react 工程创建
create-react-app cesium-react

 

三、cesium 安装
npm install cesium --save

 

四、copy-webpack-plugin 安装

npm install copy-webpack-plugin --save-dev

 

五、提取 webpack 配置文件
create-react-app 创建的项目，默认会隐藏 webpack 的配置项，所以需要将 webpack 配置文件提取出来。
npm run eject
成功后，项目根目录下会多出二个文件夹，config scripts，其中 webpack 的配置文件 webpack.config.js 位于 config 文件夹。

 

六、webpack 配置
 
1、添加 cesium module name
 1 module.exports = function (webpackenv) {
 2     ...
 3     return {
 4         ...
 5         resolve: {
 6             alias: {
 7                 // cesium module name
 8                 cesium: path.resolve(__dirname, '../node_modules/cesium/source')
 9             }
10         }
11     }
12 }

 

2、添加 static files 管理
 1 const copywebpackplugin = require('copy-webpack-plugin');
 2 
 3 module.exports = function (webpackenv) {
 4     ...
 5     return {
 6         ...
 7         resolve: {
 8             alias: {
 9                 // cesium module name
10                 cesium: path.resolve(__dirname, '../node_modules/cesium/source')
11             }
12         },
13         plugins: [
14             ...
15             // copy cesium assets, widgets, and workers to a static directory
16             new copywebpackplugin([ { from: path.join('node_modules/cesium/source', '../build/cesium/workers'), to: 'workers' } ]),
17             new copywebpackplugin([ { from: path.join('node_modules/cesium/source', 'assets'), to: 'assets' } ]),
18             new copywebpackplugin([ { from: path.join('node_modules/cesium/source', 'widgets'), to: 'widgets' } ]),
19             new webpack.defineplugin({
20                 // define relative base path in cesium for loading assets
21                 cesium_base_url: json.stringify('')
22             })
23         ]
24     }
25 }

 

七、hello world

 

1、src/index.js 中引入样式
import 'cesium/widgets/widgets.css'

 

2、src/app.js 初始化地图
 1 import react, { component } from 'react';
 2 import cesium from "cesium/cesium";
 3 
 4 class app extends component {
 5   componentdidmount() {
 6     cesium.ion.defaultaccesstoken = 'your_access_token';
 7     const viewer = new cesium.viewer("cesiumcontainer");
 8   }
 9   render() {
10     return (
11       <div id="cesiumcontainer" />
12     );
13   }
14 }
15 
16 export default app;
 
环境如下：
node: v12.5.0
npm: 6.9.0
create-react-app: 3.0.1

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网