Cesium笔记(1)：在项目中使用Cesium—Vue整合Cesium
原创Cesium笔记(1)：在项目中使用Cesium—Vue整合Cesium
原创
项目中引入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，即可
//?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初始化配置
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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。