Cesium笔记(1)：在项目中使用Cesium—Vue整合Cesium

原创

周陆军博客

发布于 2023-05-14 23:14:27

1.6K0

发布于 2023-05-14 23:14:27

文章被收录于专栏：前端博客

项目中引入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 删除。

gis