最近用VUE在做项目,加上自己是学GIS,最近的三维GIS比较火,所以就准备将Cesuim引入VUE框架。
话不多说,百度
1.安装cesuim
npm install cesium --save
2.webpack 配置
a.build/webpack.base.conf.js 文件中添加 Cesium module name
resolve: { alias: { // Cesium module name cesium: path.resolve(__dirname, '../node_modules/cesium/Source') } }
b.build/webpack.dev.conf.js 文件中添加 static files 管理
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('') }) ],
c.build/webpack.base.conf.js 文件中添加
module: { unknownContextCritical: false, unknownContextRegExp: /^.\/.*$/, ... }
3.配置结束后,开始写关于Cesuim有关组件,我是这么写的
<template> <div> <div id="cesiumContainer"></div> </div> </template> <script> import 'cesium/Widgets/widgets.css' import Cesium from 'cesium/Cesium' // 导出组件 export default { name: "home", data() { return {}; }, mounted () { this.$nextTick(() => { const viewer = new Cesium.Viewer('cesiumContainer') console.log('viewer: ', viewer) }) }, }; </script> <style scoped> #cesiumContainer { width: 100%; height: 100%; } </style>
4.写完后开始运行,但是很遗憾,结果是这样
F12,看了一下,提示 "TypeError: Cannot read property 'Viewer' of undefined",所以很疑惑为啥没有引入Cesuim成功
5.又从网上百度查了一下问题,发现要把Cesuim.js引入到index.html页面上,所有我又重新试了一下
又试了一下,还是空白,所以我又调式,发现一个很奇怪的现象就是我引入的cesuim.js文件居然没有成功,他的文件路径已经返回体居然是这样
6.继续百度,发现第三方的css或者js需要放在和src同级的static文件夹下然后再在index.html里引用才会有效,可能会有人问why?其实我也不太明白,大概百度了一下,说是config配置里做的操作
所以我又把Cesuim文件重新换到static文件夹下面,改一下路径,重新跑一下,果然
所以,我觉得自己的知识还是很菜,虽然用到 VUE做项目,但是还是停留在表面,没有深入研究,在以后的工作中,还是希望不断学习,不断思考,知其然知其所以然。