vue中使用cesium

1、npm install cesium

2、build / webpack.base.conf.js文件下做如下更改：

const cesiumSource = '../node_modules/cesium/Source'
　
output: {

　　...

　　 sourcePrefix: ''　　

amd: {

　　toUrlUndefined: true

},
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      cesium: path.resolve(__dirname, cesiumSource)
    }
},

　　module: {

　　　　...

　　　　 unknownContextCritical: false

　　}

3、build / webpack.dev.conf.js文件下做如下更改：

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

  plugins: [
    new CopyWebpackPlugin([
      { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }
    ]),
    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 webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('')
    }),
    new CopyWebpackPlugin([ { from: path.join('./static', 'model'), to: 'model3D'}])，
   ....... 
  ]

4、build / webpack.prod.conf.js文件下做如下更改：

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

plugins添加：

    /* cesium */
    new CopyWebpackPlugin([
      { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }
    ]),
    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 webpack.DefinePlugin({
      // Define relative base path in cesium for loading assets
      // 定义 Cesium 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径
      CESIUM_BASE_URL: JSON.stringify('./')
    })

5、需要渲染cesium的页面

import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

mounted () {
    this.viewer = new Cesium.Viewer('cesiumContainer', {
      shouldAnimate: true,
      animation: false, // 是否创建动画小器件，左下角仪表
      baseLayerPicker: false, // 是否显示图层选择器
      fullscreenButton: false, // 是否显示全屏按钮
      geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
      homeButton: false, // 是否显示Home按钮
      infoBox: false, // 是否显示信息框
      sceneModePicker: false, // 是否显示3D/2D选择器
      selectionIndicator: false, // 是否显示选取指示器组件
      timeline: false, // 是否显示时间轴
      navigationHelpButton: false, // 是否显示右上角的帮助按钮
      scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
      selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型，仅baseLayerPicker设为true有意义
      imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
      selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型，仅baseLayerPicker设为true有意义
      terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
      }),
      fullscreenElement: document.body, // 全屏时渲染的HTML元素,
      useDefaultRenderLoop: true, // 如果需要控制渲染循环，则设为true
      targetFrameRate: undefined, // 使用默认render loop时的帧率
      showRenderLoopErrors: false, // 如果设为true，将在一个HTML面板中显示错误信息
      automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
      contextOptions: undefined, // 传递给Scene对象的上下文参数（scene.options）
      sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式为三维
      mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
      dataSources: new Cesium.DataSourceCollection()
      // 需要进行可视化的数据源的集合
    })
    this.viewer.imageryLayers.get(0).brightness = 0.88
    this.viewer.imageryLayers.get(0).contrast = 0.94
    this.viewer.imageryLayers.get(0).hue = 0.48
    this.viewer.imageryLayers.get(0).saturation = 1.4
    this.viewer.imageryLayers.get(0).gamma = 0.46

    this.viewer._cesiumWidget._creditContainer.style.display = 'none'

    this.viewer.scene.postProcessStages.fxaa.enabled = false
    /* 设置相机最小高度 */
    this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000
    /* 设置相机最大高度 */
    this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 14023
}

猜你喜欢