Cesium Vue开发环境搭建
2018-12-27 07:42:21来源:博客园 阅读 ()
最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程。官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程。
一、vue 工程创建,使用 vue-cli
vue init webpack cesium-demo
二、cesium 安装
npm install cesium --save
三、webpack 配置
1、build/webpack.base.conf.js 文件中添加 Cesium module name
1 resolve: { 2 alias: { 3 // Cesium module name 4 cesium: path.resolve(__dirname, '../node_modules/cesium/Source') 5 } 6 },
2、build/webpack.dev.conf.js 文件中添加 static files 管理
1 plugins: [ 2 new HtmlWebpackPlugin({ 3 template: 'src/index.html' 4 }), 5 // Copy Cesium Assets, Widgets, and Workers to a static directory 6 new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]), 7 new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]), 8 new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]), 9 new webpack.DefinePlugin({ 10 // Define relative base path in cesium for loading assets 11 CESIUM_BASE_URL: JSON.stringify('') 12 }) 13 ],
四、Hello World!
App.vue 中输入以下代码
1 <template> 2 <div id="app"> 3 <div id="cesiumContainer"></div> 4 </div> 5 </template> 6 7 <script> 8 import Cesium from 'cesium/Cesium' 9 import 'cesium/Widgets/widgets.css' 10 export default { 11 name: 'App', 12 mounted () { 13 this.$nextTick(() => { 14 const viewer = new Cesium.Viewer('cesiumContainer') 15 console.log('viewer: ', viewer) 16 }) 17 } 18 } 19 </script> 20 <style> 21 html, 22 body { 23 width: 100%; 24 height: 100%; 25 padding: 0; 26 margin: 0; 27 } 28 #app,#cesiumContainer { 29 font-family: "Avenir", Helvetica, Arial, sans-serif; 30 width: 100%; 31 height: 100%; 32 overflow: hidden; 33 } 34 </style>
五、运行
npm run dev
根据官网的说明,浏览器运行结果如下
。。。
最后在 github 上找到这个问题的解决方法,
在 build/webpack.base.conf.js 文件中添加如下二行
module: { unknownContextCritical: false, unknownContextRegExp: /^.\/.*$/, ... }
重新运行
运行成功,不过界面底部有一个 access token 的提示,去官网上申请一个 access token ,在 new Cesium.Viewer 前添加 一行代码
Cesium.Ion.defaultAccessToken = ‘your_access_token’
放一张最终效果图
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端完整学习路线
- jQuery插件开发全解析 2020-03-25
- JS简单去除数组中重复项的方法 2020-03-16
- vue.js开发环境搭建教程 2020-03-16
- 微信小程序开发图片拖拽实例详解 2020-03-16
- JS之相等操作符详解 2020-03-12
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