Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持,且支持绝大多数的浏览器和mobile。相关网址如下:
Cesium 官网:Cesium: The Platform for 3D Geospatial
Cesium 官网 API:Index - Cesium Documentation
Cesium 中文API: Cesium中文api文档 | Index - Cesium Documentation
Cesium 官方案例:Cesium Sandcastle
Cesium 技能树:Cesium 简介 - Cesium 中文文档 - 开发文档 - 文江博客
Cesium 中文社区:cesium中文网 | 学习cesiumjs 的好地方--伐罗密
3D 模型下载网站:Log in to your Sketchfab account - Sketchfab
采用Vue如何使用cesium 加载地球呢?步骤如下:
1)安装cesium
npm i cesium --save
2) 加载cesium
从node_modules 依赖包里面,找到我们刚刚安装的 cesium ,在文件夹里面有一个 Build 文件夹,里面有一个 Cesium 文件夹,把这个 Cesium 文件夹复制一份,放到vue工程的public目录下。
在public/index.html文件中,加载样式文件,以及cesium.js文件,如下所示:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<script type="text/javascript" src="./Cesium/Cesium.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4)创建地图实例
<template>
<div id="app">
<div id="mapId"></div>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
this.init()
},
methods: {
init() {
this.viewer = new Cesium.Viewer('mapId', {
homeButton: true,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: false, // 是否显示动画控件
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, // 是否显示帮助信息控件
});
}
}
}
</script>
<style></style>
这时重新编译vue项目会报错,Cesium is not defined Cesium全局变量找不到,这时只需在package.json的eslintConfig字段加上如下代码即可:
"globals": {
"Cesium": true
},
重新编译项目就能看到地球了。
4)加入cesium ion token
使用cesium需要申请一个token值,这个地方就和百度地图或者是高德地图一样,需要一个 token 秘钥来进行操作,确保在使用 cesium 的过程中不会出现 token 过期造成地图加载不出来的问题
去这个网址:Cesium ion 申请个token就可以了。在创建cesium实例之前把token加上:
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpX'
this.viewer = new Cesium.Viewer('mapId', {
homeButton: true,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: false, // 是否显示动画控件
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, // 是否显示帮助信息控件
});
5)调整视角到中国南海
项目启动后相机会有一个默认视角俯瞰地球,我们调整一下视角,让相机俯瞰南海,完整代码如下所示:
<template>
<div id="app">
<div id="mapId"></div>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
this.init()
},
methods: {
init() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYTNiMDIxZS02NjMyLTQ0MTgtYTY0NS1kYzMwYjZkZDllZTIiLCJpZCI6MTIyNjgwLCJpYXQiOjE2NzUwNDU3NjR9.YAIh-_IFBWrprAoLkJHZGh8oLjJHDemH62_enMlVu1E'
this.viewer = new Cesium.Viewer('mapId', {
homeButton: true,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: false, // 是否显示动画控件
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, // 是否显示帮助信息控件
});
setTimeout(() => {
console.log("go to china")
this.viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(113, 16, 2500000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0
}
})
}, 500);
}
}
}
</script>
<style></style>