项目中引入Cesium，普通项目，按照官方文档照做就可
https://cesium.com/docs/tutorials/getting-started/
常规引入
很多人说需要require.js,我是没有使用，
/Cesium-1.40/Build/CesiumUnminified/Cesium.js
/Cesium-1.40/Build/CesiumUnminified/Widgets/widgets.css
当然，也可以手工导入 improt 导入，这个不需要修改webpack 配置
整合入webpack
- 首先npm i cesium，如果按照不成功(再次fuck GFW)，直接下载cesium包（https://cesiumjs.org/downloads/），丢入node_modules/cesium，直接引入也可。
- 配置 amd参数
- 在output 里加入sourcePrefix: ' ' 让webpack 正确处理多行字符串
- module中在rules后添加 unknownContextCritical: false
- 项目根目录新建文件夹ThirdParty，放入draco_decoder.wasm文件，在加载gltf模型文件需要用到
如下配置，合并到wepback config，即可
代码语言：javascript复制// cesium--配置
const cesiumSource = '../node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
const path = require('path')
// 合并入现有webpack配置
module.exports = {
output: {
// cesium--配置------------------------------------
sourcePrefix: ' '
},
// cesium--配置----------------------------------------
amd: {
toUrlUndefined: true
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
// cesium--配置
'cesium': path.resolve(__dirname, cesiumSource)
}
},
module: {
// cesium--配置-------------------------------------
// unknownContextRegExp: /^./.*$/
unknownContextCritical: false,
},
plugins: [
new webpack.DefinePlugin({
// cesium--配置 为实际 CESIUM_BASE_URL 加载目录地址-------------------------------------------
'CESIUM_BASE_URL': JSON.stringify('')
}),
// cesium--配置---------------------------------------------
new CopyWebpackPlugin([{
from: path.join(cesiumSource, cesiumWorkers),
to: 'Workers'
}]), //flag
new CopyWebpackPlugin([{
from: path.join(cesiumSource, 'Assets'),
to: 'Assets'
}]),
new CopyWebpackPlugin([{
from: path.join(cesiumSource, 'Widgets'),
to: 'Widgets'
}]),
new CopyWebpackPlugin([{
from: path.join(cesiumSource, 'ThirdParty/Workers'),
to: 'ThirdParty/Workers'
}]),
new CopyWebpackPlugin([{ from: 'ThirdParty', to: 'ThirdParty' }]),
]
}合并到原有你的项目配置，我是这么操作的木有发现问题
Cesium初始化配置
代码语言：javascript复制let viewer = new this.Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker: false, // 图层选择器
animation: false, // 左下角仪表
fullscreenButton: false, // 全屏按钮
geocoder: false, // 右上角查询搜索
infoBox: false, // 信息框
homeButton: false,// home按钮
sceneModePicker: true, // 3d 2d选择器
selectionIndicator: false,
timeline: false, // 时间轴
navigationHelpButton: false, // 右上角帮助按钮
contextOptions: {// 截图需要的
webgl: {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: true,
// 通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: true
}
}
})
// 添加另外一个图层
var layers = viewer.scene.imageryLayers
var blackMarble = layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
url: '//cesiumjs.org/tilesets/imagery/blackmarble',
maximumLevel: 8,
credit: 'Black Marble imagery courtesy NASA Earth Observatory'
}))
// 设置图层的透明度
blackMarble.alpha = 0.5
// 设置图层的亮度
blackMarble.brightness = 2.0
// 添加一个图层，在特定位置绘制一个图片
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url: '../images/Cesium_Logo_overlay.png',
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}))这个配置，参考：https://www.cnblogs.com/reround/p/12160503.html
vue使用Cesium注意事项
无论是maptalks还是Cesium，请不要把跟地图更新相关数据放到Vue data中，不然，出现的问题，会搞晕自己的
cesium 的 viewer 不能放在vue的data对象中 最开始的时候直接把viewer放在data中使用，发现建筑数据过万直接卡崩溃。 原因：viewer与vue中的data或者computed进行了绑定，导致vue对viewer进行了数据劫持，劫持了太多数据。 解决：将viewer放到全局对象当中
之前做maptalks地图的时候，maptalks.ui.UIMarker，把创建的marker 放到一个 vue data 定义的数组中MarkersList（Vue View 中，通过数组做一些页面展示逻辑），清空MarkersList的时候，会发现，地图上的˛UIMarker清除不干净。会重复叠加。
如果是angularJS，不会产生如上问题。
可参看文章：
基于Webpack的Cesium Vue应用 https://blog.csdn.net/m0_37972557/article/details/79768408?utm_source=copy
vue集成Cesium（直接引入方式） https://www.jianshu.com/p/a4f371c56ba1
vue2.0项目集成Cesium的实现方法 https://www.jb51.net/article/166568.htm
Vue3.0 Cesium Tomcat服务下倾斜摄影数据加载详细过程 https://blog.csdn.net/wo_buzhidao/article/details/100124205
Vue-cli 3.0 cesium 构建 https://www.jianshu.com/p/0815c76d949f
Cesium Vue过程中遇到的问题（持续更新） https://blog.csdn.net/li11122212/article/details/93167685
转载本站文章《Cesium笔记(1)：在项目中使用Cesium—Vue整合Cesium》, 请注明出处：https://www.zhoulujun.cn/html/GIS/cesium/8321.html
