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

),

],

相关推荐
夜郎king2 小时前
基于天地图 Cesium 三维服务实现三维地球及地球自转实践
数据分析·cesium·3d地图·三维地球
luckystar513~2 天前
Navara是WebGIS的第三条路吗?
gis·cesium·mapbox·地图引擎·地理可视化
灵境(虚幻知音)8 天前
WebGL 不支持>1px的线绘制,那 Cesium 的带宽度的线是怎么画出来的?
webgl·cesium·着色器
ToTacview12 天前
WebGL 没有几何着色器,那 Cesium 的粗线是怎么画出来的?
cesium
用户615958680002214 天前
Cesium 入门系列(四):区域高亮显示的两种实现方案
cesium
用户615958680002214 天前
Cesium 入门(三):BaseLayerPicker 底图切换与国产地图接入
cesium
用户615958680002214 天前
Cesium 入门(二):Geocoder 搜索框参数详解与天地图搜索接入
cesium
灵境(虚幻知音)15 天前
Cesium动态轨迹性能瓶颈深度拆解:翼带与尾迹的底层优化实践
性能优化·cesium·3d引擎·afsim·翼带·尾迹·自定义着色器
fxshy17 天前
WebGIS 游戏化实践:基于 Cesium + Vue3 实现全球飞行模拟系统:从球体坐标、飞行动力学到地形碰撞实战
游戏·vue3·cesium·webgis·飞行模拟
用户831348593069818 天前
Cesium实现动态流动火烧云晚霞效果(可用slider调整火烧云浓度)
vue.js·webgl·cesium