Cesium 上手不完全指北
将最近学习的
CesiumJS
做一个系统梳理,从项目配置开始,记录常用API
的使用。
环境搭建与安装
首先,什么是 Cesium
,Cesium
是一款开源的基于 JavaScript
的 3D
地图框架,即地图可视化框架。产品基于 WebGL
技术,可以使用 CesiumJS
创建虚拟场景的 3D
地理信息平台。其目标是用于创建以基于 Web
的地图动态数据可视化。在提升平台的性能、准确率、虚拟化能力、易用性方面提供各种支持。
更多介绍和信息可通过官网进行学习。
注册
Cesium ion
是一个提供瓦片图和 3D
地理空间数据的平台,Cesium ion
支持把数据添加到用户自己的 CesiumJS
应用中。使用二三维贴图和世界地形都需要 ion
的支持,如果没有自己的数据源需要 cesium
提供的数据源就需要申请 ion
的 token
,具体可以通过以下链接申请 access token。
在创建 Cesium Viewer
的时候,将 access token
填为自己的 access token
即可。
Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
项目搭建
进入项目搭建过程,项目选择在 Vue
平台上进行实现,首先创建项目安装 cesium
库:
vue create cesium-vue
cd cesium-vue
npm i cesium@1.61 --save
注意:目前使用 webpack
进行配置引用最新版本(1.71) cesium
暂时不能导入,实测 cesium@1.61
版本可以进行 import
导入。
项目配置
根目录下新建 vue.config.js
配置文件,对项目进行基本配置:
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
publicPath: '',
devServer: {
port: 9999
},
configureWebpack: {
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src'),
'cesium': path.resolve(__dirname, cesiumSource)
}
},
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' }]),
new CopyWebpackPlugin([{
from: path.join('./static', 'images'), to: 'images' }])
]
}
}
在根目录下创建 static
文件夹用于后续 model
和 images
的存放。
组件实现
在 src/components/
下新建 CesiumViewer.vue
进行组件实现:
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
name: 'CesiumViewer',
mounted ()