前言:
屠龙勇士终成恶龙!本系列用Cesium结合超图写一些经典案例(加载SuperMap、空间分析、淹没分析、坡度分析、天际线分析等等),不是随意的去复制粘贴,打算输出一些好的内容,本系列将持续更新,并附项目源码,各位道友放心追番!
项目地址:cesium-demo
Cesium文档地址:Cesium Documentation
一、申请Cesium秘钥
申请前要登录,任何一个邮箱均可,由于官网全为英文,下面贴了申请token的地址,登录上了即可访问下面地址。
申请Token地址:https://ion.cesium.com/tokens?page=1
界面长这样,右上角为秘钥:
二、搭建vue项目并初始化Cesium
1.搭建vue项目
这里看个人习惯吧,yarn个人觉得好用一些。
vue create cesium
yarn add cesium
2.初始化Cesium
1.安装好 Cesium包后,去到node_modules/Cesium下将Cesium文件夹复制到public文件夹
tip:为什么要复制?网上众说纷纭,有写webpack配置的,有写copyCesiumlib的,其本质还是将资源copy出来,说来说去还是cesium官方偷懒,都弄npm库了也不去梳理下结构兼容ES6导入使用。总得来说目前为止推荐直接复制到项目里或者自己搭个CDN。
2.在html文件中引入Cesium静态资源
<!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>
</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>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="./Cesium/Cesium.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3. 使用Cesium对象初始化球体
初始化很简单,将实例化viewer,为viewer指定容器即可初始化球体。
<template>
<div id="cesiumContainer" style="width: 100%; height: 100%"></div>
</template>
<script>
export default {
name: "initCesium",
mounted() {
Cesium.Ion.defaultAccessToken = "你的秘钥";
const viewer = new Cesium.Viewer("cesiumContainer");
console.log('viewer',viewer);
}
};
</script>
方便后续维护以及案例的增加,demo没有将代码直接写到App.vue,而是进行了模块化分组和路由编排,如果效果不一致,可排查自身代码或者克隆项目到本地查看,也可以留言讨论。
3. 一些初始化配置
Cesium一些自带工具是默认开启的,要得到一个干净的球,需要做些许配置:
<template>
<div id="cesiumContainer" style="width: 100%; height: 100%"></div>
</template>
<script>
export default {
name: "initCesium",
mounted() {
Cesium.Ion.defaultAccessToken ="你的秘钥";
const initConfig = {
// 禁用动画控件
animation: false,
// 禁用图层选择器
baseLayerPicker: false,
// 禁用全屏按钮
fullscreenButton: false,
// 禁用地理编码器
geocoder: false,
// 禁用主页按钮
homeButton: false,
// 禁用点击弹窗信息框
infoBox: false,
// 禁用场景模式选择器
sceneModePicker: false,
// 禁用选中指示器
selectionIndicator: false,
// 禁用时间轴
timeline: false,
// 禁用导航帮助按钮
navigationHelpButton: false
};
const viewer = new Cesium.Viewer("cesiumContainer", initConfig);
// 禁用球体照明效果
viewer.scene.globe.enableLighting = false;
//取消版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
}
};
</script>