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' },

),

],

相关推荐
新中地GIS开发老师12 天前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
goodName13 天前
Cesium框选工具的3次进化:从卡顿到精准,我踩过这些坑
cesium
duansamve19 天前
React 18+TS中使用Cesium 1.95
react.js·typescript·cesium
DSLMing22 天前
Cesium 内置变量 czm_ellipsoidInverseRadii
cesium
Mintopia23 天前
Cesium-kit 又发新玩意儿了:CameraControl 相机控制组件全解析
前端·three.js·cesium
Mintopia25 天前
🌍 cesium-kit —— 快速实现动态标点与交互的 Cesium 工具库
前端·three.js·cesium
Mintopia1 个月前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia1 个月前
🚀 cesium-kit:让 Cesium 开发像写 UI 组件一样简单
前端·前端框架·cesium
YAY_tyy1 个月前
【Cesium 开发实战教程】第六篇:三维模型高级交互:点击查询、材质修改与动画控制
前端·javascript·3d·教程·cesium
不浪brown1 个月前
全面开发!可同时支持“倾斜模型”以及“地形”的填挖方(土方)分析工具
cesium