react 地图可视化 cesium 篇
2019-08-14 10:05:35来源:博客园 阅读 ()
npm install -g create-react-app
create-react-app cesium-react
npm install cesium --save
四、copy-webpack-plugin 安装
npm install copy-webpack-plugin --save-dev
npm run eject
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 }
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 }
import 'cesium/Widgets/widgets.css'
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
原文链接:https://www.cnblogs.com/lifefriend/p/11132789.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 前端笔记之React(八)上传&图片裁切 2019-08-14
- 前端笔记之React(七)redux-saga&Dva&路由 2019-08-14
- 前端笔记之React(六)ES6的Set和Map&immutable和Ra 2019-08-14
- 前端笔记之React(五)Redux深入浅出 2019-08-14
- 前端笔记之React(四)生命周期&Virtual DOM和Diff 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash