当前位置：首页 > news >正文

cesium学习记录02-vue项目中cesium的配置与使用

news 2025/8/24 19:09:41

1，下载cesium包

（当然，使用npm install cesium安装也是可以的，不过在这里选择下载包放到本地）
官方下载地址
笔者的cesium版本为1.101

2，将下载的Cesium文件夹放到项目里某个位置

这里，笔者将其放在static文件夹中
在这里插入图片描述

3，引入cesium

在index.html里引入cesium文件

  <!-- 引入cesium --><script src="./static/Cesium/Cesium.js"></script><link rel="stylesheet" href="./static//Cesium/Widgets/widgets.css" />

4，实例化地球方法

新建一个CesiumMap.js文件
在这里插入图片描述
initEarth就是地球初始化的方法，里面是一些常用的基础配置

export default {viewer: null,/*** 实例化球及加载地图*/initEarth: function(divobj) {//cesium密钥Cesium.Ion.defaultAccessToken = "**********";// 实例化地球let viewerOption = {geocoder: false, // 地名查找,默认truehomeButton: false, // 主页按钮，默认truesceneModePicker: false, //二三维切换按钮baseLayerPicker: false, // 地图切换控件(底图以及地形图)是否显示,默认显示truenavigationHelpButton: false, // 问号图标，导航帮助按钮，显示默认的地图控制帮助// animation: false, // 动画控制，默认true .shouldAnimate: true, // 是否显示动画控制，默认true .shadows: true, // 阴影timeline: true, // 时间轴,默认true .CreditsDisplay: false, // 展示数据版权属性fullscreenButton: false, // 全屏按钮,默认显示trueinfoBox: true, // 点击要素之后显示的信息,默认trueselectionIndicator: true, // 选中元素显示,默认truecontextOptions: {webgl: {preserveDrawingBuffer: true //cesium状态下允许canvas转图片convertToImage}}};//视角默认定位到中国上空Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(75.0, // 东0.0, // 南140.0, // 西60.0 // 北);let viewer = new Cesium.Viewer(divobj, viewerOption);viewer._cesiumWidget._creditContainer.style.display = "none"; // 去掉版权信息（logo）viewer.scene.globe.enableLighting = false; //开启场景光照阴影//设置初始化球体遮挡viewer.scene.highDynamicRange = !1;viewer.scene.globe.depthTestAgainstTerrain = true; // 深度检测viewer.scene.postProcessStages.fxaa.enabled = false; //抗锯齿viewer.screenSpaceEventHandler.setInputAction(function() {},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); //禁用双击viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2023-02-01T00:00:08");// 显示帧率viewer.scene.debugShowFramesPerSecond = false;}}

Cesium.Ion.defaultAccessToken = "**********";

可以看出，cesium也是需要密钥的

5，申请密钥

注册或登录cesium
在这里插入图片描述
点击按钮创建token，右边框内的内容就是需要的密钥，放到""里

Cesium.Ion.defaultAccessToken = "**********";

6，cesium全局化

在main.js中引入并定义全局

import cesiumEarth from "../util/CesiumMap.js"

Vue.prototype.$cesiumEarth = cesiumEarth;

7，地球初始化

新建一个map.vue文件，用来放置地球，调用initEarth方法

<!--cesium地球-->
<template><div class="home"><div id="cesiumContainer" ref="cesiumContainer"></div>  </template><script>
export default {data() {return {}},mounted() {// 初始化地球this.$nextTick(() => {this.$cesiumEarth.initEarth(this.$refs.cesiumContainer);})}
};
</script>
<style scoped>
.home {height: 100%;width: 100%;overflow-y: auto;
}
#cesiumContainer {display: flex;height: 100%;width: 100%;
}
</style>