cesium开发引入方式
无独有偶,引入无非两种方式:外部标签引入和import导入。
1、外部引入
外部引入的话需要提前去下载开发包,下载完后,Build文件夹有两个文件夹:Cesium和CesiumUnminified,Cesium是压缩版的,CesiumUnminified是未压缩的,如果自己学习调试可以用未压缩的;如果是项目建议用压缩的,体积小,网络请求快。
下载地址:GitHub - CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
<link href="<%= BASE_URL %>Cesium/Widgets/widgets.css" rel="stylesheet" />
<script src="<%= BASE_URL %>Cesium/Cesium.js"></script>
2、npm导入
具体步骤可以看这篇:三维技术探索-Cesium.js学习 - 简书
可以看出npm稍有麻烦,需要做一下打包配置,以上是vue/cli 打包配置的,如果是纯webpack打包项目配置请看这儿:基于Webpack的Cesium+Vue应用-CSDN博客
(顺便补充一下webpack与vue-cli的关系:webpack与vue-cli的关系_vuecli和webpack关系_儒雅的烤地瓜的博客-CSDN博客)
两者项目结构和位置有所差别。
注意配置时CopyWebpackPlugin参数,我这是这样配置的,在vue.config.js文件configureWebpack下:
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
}),
new CopyWebpackPlugin(
[
{ from: path.resolve('./node_modules/cesium/Source/Workers'), to: 'Workers' },
{ from: path.resolve('./node_modules/cesium/Source/Assets'), to: 'Assets' },
{ from: path.resolve('./node_modules/cesium/Source/Widgets'), to: 'Widgets' },
{ from: path.resolve('./node_modules/cesium/Source/ThirdParty/Workers'), to: 'WoThirdParty/Workersrkers' },
]
),
],