cesium开发引入方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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' },

]

),

],文章来源地址https://www.toymoban.com/news/detail-713541.html