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

),

],

相关推荐
白嫖叫上我3 天前
Cesium广告牌之自定义封装label
cesium
郝学胜-神的一滴18 天前
[简化版 GAMES 101] 计算机图形学 04:二维变换上
c++·算法·unity·godot·图形渲染·unreal engine·cesium
duansamve21 天前
Cesium快速入门到精通系列教程二十五:以较长经纬度跨度为基准,将多边形充满屏幕,返回此时的中心点坐标及相机高度
cesium
阿琳a_1 个月前
在github上部署个人的vitepress文档网站
前端·vue.js·github·网站搭建·cesium
云上飞476369621 个月前
glb模型在Cesium中发黑的机理分析
cesium·glb模型发黑
ct9781 个月前
Cesium的Primitive API
gis·webgl·cesium
Irene19911 个月前
OpenLayers 和 Cesium 都是流行的开源 JavaScript 库,用于在网页上构建地图和地理空间应用
openlayers·cesium
fxshy1 个月前
前端直连模型 vs 完整 MCP:大模型驱动地图的原理与实践(技术栈Vue + Cesium + Node.js + WebSocket + MCP)
前端·vue.js·node.js·cesium·mcp
棋鬼王1 个月前
Cesium(十) 动态修改白模颜色、白模渐变色、白模光圈特效、白模动态扫描光效、白模着色器
前端·javascript·vue.js·智慧城市·数字孪生·cesium
duansamve1 个月前
Cesium快速入门到精通系列教程二十四:限制相机在特定的Level之间展示地图
cesium