橙子个人博客
0%

vue + cesium 构建项目

发表于 更新于 分类于 留言

环境安装

  • Nodejs 安装，具体安装步骤自行百度，不做赘述
  • vue/cli 安装
1
2
3
4
5
6
// 安装命令
npm i -g @vue/cli

// 查看版本
vue -V
// @vue/cli 4.0.5

创建项目

  • 使用vue/cli创建项目
1
vue create cesium-demo
  • 安装Cesium
1
npm i cesium --save

配置webpack

使用 Vue CLI 3 创建的项目，需要在目录下新建 vue.config.js 文件对 webpack 进行配置，帮助文件参见 vue.config.js

安装 webpack 插件

copy-webpack-plugin // 用于拷贝项目文件至 build 文件

strip-pragma-loader（生产环境）// 用于在生产环境中移除 errors 和 warnings

1
npm i strip-pragma-loader copy-webpack-plugin --save-dev

在根目录新建vue.config.js 示例

Cesium 的 webpack 配置参见 cesium-webpack-example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
  publicPath: './',
  assetsDir: './static',
  productionSourceMap: false,
  devServer: {
    open: true
  },
  chainWebpack: config => {
    config
      .node.set('fs', 'empty').end()
      .resolve.alias.set('cesium', path.resolve(__dirname, cesiumSource)).end().end()
      .amd({
        toUrlUndefined: true
      })
      .module
      .set('unknownContextCritical', false)
      .rule()
      .include
      .add(path.resolve(__dirname, cesiumSource))
      .end()
      .post()
      .pre()
      .test(/\.js$/)
      .use('strip')
      .loader('strip-pragma-loader')
      .options({
        pragmas: {
          debug: false
        }
      })
      .end()
      .end()
  },
  configureWebpack: config => {
    let plugins = []
    if (process.env.NODE_ENV === 'production') {
      plugins = [
        new webpack.DefinePlugin({
          'CESIUM_BASE_URL': JSON.stringify('static')
        }),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'static/Workers' } ]),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' } ]),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' } ])
      ]
    } else {
      plugins = [
        new webpack.DefinePlugin({
          'CESIUM_BASE_URL': JSON.stringify('')
        }),
        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' } ])
      ]
    }
    return {
      plugins: plugins
    }
  }
}

在main.js导入cesium

1
2
3
4
// 引入cesium
import 'cesium/Widgets/widgets.css'
let Cesium = require('cesium/Cesium')
Vue.prototype.Cesium = Cesium

创建Cesium组件

在src/components文件夹下创建Cesium.vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
    <div id="CesiumContent"></div>
</template>
<script>
export default {
  name: 'Cesium',
  methods: {
    initCesium () {
      // 加载谷歌卫星地图
      let url = 'http://mt1.google.cn/vt/lyrs=s&h1=zh-CN&x={x}&y={y}&z={z}&s=Gali'
      let google = new this.Cesium.UrlTemplateImageryProvider({ url: url })

      // 初始化
      let viewer = new this.Cesium.Viewer('CesiumContent', {
        baseLayerPicker: false,
        imageryProvider: google,
        terrainProvider: this.Cesium.createWorldTerrain({ // 添加地形
          requestWaterMask: true,
          requestVertexNormals: true
        })
      })
      // 组件初始化完成，触发ready事件
      this.$emit('ready', viewer)
    }
  },
  mounted () {
    this.initCesium()
  }
}
</script>
<style scoped>
#CesiumContent{
  height:100vh;
  width:100vw;
}
</style>

使用组件

在对应的.vue文件引入cesium组件，或者复制下面代码到src/app.vue查看效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div class="home">
        <cesium @ready="handleReady" />
  </div>
</template>

<script>
import cesium from '@/components/Cesium.vue'
export default {
  components: {
    cesium
  },
  methods: {
    handleReady (viewer) {
		console.log('cesium加载完成')
    }
  },
  mounted () {

  }
}
</script>

到这里已经将cesium集成到vue了，可以愉快开发了

cesium API使用记录

  • 加载谷歌影像，及初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
// 加载谷歌卫星地图
let url = 'http://mt1.google.cn/vt/lyrs=s&h1=zh-CN&x={x}&y={y}&z={z}&s=Gali';
let google = new Cesium.UrlTemplateImageryProvider({url:url});

// 初始化
let viewer = new Cesium.Viewer('app',{
  baseLayerPicker: false,
  imageryProvider: google,
  terrainProvider: Cesium.createWorldTerrain({
    requestWaterMask: true,
    requestVertexNormals: true
  })
});
  • 相机默认视角
1
2
3
4
5
6
7
8
viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(110.828918, 24.831243, 90.0), // 坐标位置，及高度
      orientation: {
        heading: Cesium.Math.toRadians(0), // X轴左右视角
        pitch: Cesium.Math.toRadians(-90), // Y轴上下视角
        roll: 0.0 // z轴旋转相机
      }
    });
  • 相机调整-带动画
1
2
3
viewer.camera.flyTo({  
    destination : Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 90.0)  
});
  • gltf模型载入
1
2
3
4
5
6
7
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.828918, 24.831243, 80.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
  url: './k.gltf',  //载入当前路径下的k.gltf
  modelMatrix: modelMatrix,
  scale: 3.0
}));
  • 加载3D Tiles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 这里使用官方的3D Tiles数据，加载纽约区域的
let city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: Cesium.IonResource.fromAssetId(3839)}));
// 根据模型高度，设置不同颜色
let heightStyle = new Cesium.Cesium3DTileStyle({
  color: {
    conditions:[
      ["${height} >= 300","rgba(45,0,75,0.5)"],
      ["${height} >= 200","rgb(102,71,151)"],
      ["${height} >= 100","rgb(170,162,204)"],
      ["${height} >= 50","rgb(60,102,204)"],
      ["${height} >= 20","rgb(190,102,84)"],
      ["${height} >= 10","rgb(155,80,164)"],
      ["true","rgb(170,162,204)"],
    ]
  }
});
city.style = heightStyle;