建设游戏网站需要哪些设备,wordpress 快速安装,网站不能上传附件,网站 建站模式1#xff0c;下载cesium包
#xff08;当然#xff0c;使用npm install cesium安装也是可以的#xff0c;不过在这里选择下载包放到本地#xff09; 官方下载地址 笔者的cesium版本为1.101
2#xff0c;将下载的Cesium文件夹放到项目里某个位置
这里#xff0c;笔者将…1下载cesium包
当然使用npm install cesium安装也是可以的不过在这里选择下载包放到本地 官方下载地址 笔者的cesium版本为1.101
2将下载的Cesium文件夹放到项目里某个位置
这里笔者将其放在static文件夹中
3引入cesium
在index.html里引入cesium文件 !-- 引入cesium --script src./static/Cesium/Cesium.js/scriptlink relstylesheet 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; // 去掉版权信息logoviewer.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 **********;6cesium全局化
在main.js中引入并定义全局
import cesiumEarth from ../util/CesiumMap.jsVue.prototype.$cesiumEarth cesiumEarth;7地球初始化
新建一个map.vue文件用来放置地球调用initEarth方法
!--cesium地球--
templatediv classhomediv idcesiumContainer refcesiumContainer/div /templatescript
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
8运行访问一下吧 9之后的方法就可以在CesiumMap.js里写在其他地方调用了
SVN代码地址用户名:liu 密码123
