react 地图可视化 cesium 篇
2024-08-28 10:38:49
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
module.exports = function (webpackEnv) {
...
return {
...
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
}
}
}
2、添加 static files 管理
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function (webpackEnv) {
...
return {
...
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
},
plugins: [
...
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
]
}
}
七、Hello World
1、src/index.js 中引入样式
import 'cesium/Widgets/widgets.css'
2、src/App.js 初始化地图
import React, { Component } from 'react';
import Cesium from "cesium/Cesium";
class App extends Component {
componentDidMount() {
Cesium.Ion.defaultAccessToken = 'your_access_token';
const viewer = new Cesium.Viewer("cesiumContainer");
}
render() {
return (
<div id="cesiumContainer" />
);
}
}
export default App;
环境如下：
node: v12.5.0
npm: 6.9.0
create-react-app: 3.0.1
最新文章
- 谈谈枚举的新用法——java
- 宿主机远程桌面连接vmware中的虚拟机
- Eclipse中设置jsp文字大小
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数012,polygon，多边形
- SparkR grammer
- [leetcode] 406. Queue Reconstruction by Height
- Linux 安装配置 JDK 8
- ASP.NET Cookie 概述
- String、StringBuffer、StringBulider之间的联系和区别
- Java：注解Annotation（元数据）
- RefineDet网络简介（转载）
- CentOS 6.9 NFS安装和配置
- leetcode python 010
- 2.7 清除FTP服务器文件
- SDL源码阅读笔记（2） video dirver的初始化及选择
- python3简单使用requests 用户代理，cookie池
- 阿里云 ssh 登陆请使用（公）ip
- MAC配置DNS服务器
- nfs远程挂载问题记录
- js document.activeElement及使用