上文中列出了关于cesium的一些学习以及官网等很重要的链接.在学习链接中,有如何注册cesium的token的过程,此处不再赘述.以下是cesium版本1.110的安装及在页面中使用的过程.
官网中关于此过程的链接:cesium.com/learn/cesiu…
1 安装
npm install cesium
2 配置/修改cesium的文件路径
(1) 在node_modules文件夹中找到cesium文件夹,将图片中BUild/Cesium中的四个文件夹CV至public/static文件夹下. (2) vue2项目中,在vue.config.js文件中配置webpack
const cesiumSource = './node_modules/cesium/Source'
module.exports = defineConfig({
chainWebpack: (config) => {
config.resolve.alias.set('cesium', resolve(cesiumSource)); // 3 定义别名cesium
config.plugin('define').tap((args) => {
args[0]["CESIUM_BASE_URL"] =JSON.stringify('static/Cesium/')
return args
})
},
//此版本使用时需要对以下四个包进行安装及引入,否则编译时会报错:找不到以下四个包.
configureWebpack() {
return {
resolve: {
fallback: {
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
zlib: require.resolve("browserify-zlib"),
stream: require.resolve('stream-browserify'),
},
},
}
}
})
(3) 在main.js中引入cesium
//引入cesium库
import * as Cesium from 'cesium/Cesium.js'
import 'cesium/Widgets/widgets.css'
//将cesium绑定在vue原型上,方便在页面中使用
Vue.prototype.cesium = Cesium;
3 在页面中使用
在此步骤之前,请注意:
cesium与mock.js冲突!!!
cesium与mock.js冲突!!!
cesium与mock.js冲突!!!
重要的事情说三遍.如果项目中有引入mock.js,请注释掉该引入再使用cesium.否则即使按照步骤一步一步来,页面中也无法正常加载cesium中的地球,导致页面黑暗.
注释掉mock.js后就可以在页面中正常使用了. 在需要使用cesium的文件中
<template>
<div id="container" class="box">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default{
data() {
return {
_viewer:null,//加下划线定义实例对象.--vue的数据劫持与代理会降低效率,当实例对象很大时,很容易引起页面崩溃.
};
},
mounted() {
this.init();
},
methods:{
init() {
const Cesium = this.cesium;
Cesium.Ion.defaultAccessToken = '';//此处是在cesium中注册的token
//此处应用的是高德地图影像图.
const baseLayer = new Cesium.ImageryLayer.fromProviderAsync(Cesium.TileMapServiceImageryProvider.fromUrl("https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",{
// 最小级别
minimumLevel: 1,
// 最大级别
maximumLevel: 18,
brightness:0.6,
contrast:1.8,
gamma:0.3,
hue:1,
saturation:0,
alpha:0.3,
}))
this._viewer = new Cesium.Viewer('cesiumContainer',{
orderIndependentTranslucency: true,//为true去掉地球表面的大气效果的黑圈问题
baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮。
sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
animation: false, // 如果设置为false，将不会创建左下角动画小部件。
timeline: false, // 如果设置为false，则不会创建正下方时间轴小部件。
fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
// ps. Viewer＃clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟，就把shouldAnimate设为false
infoBox: false, // 是否显示点击要素之后显示的信息
sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源吧
fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处，虽然我关闭了全屏按钮，但是键盘按F11 浏览器也还是会进入全屏
baseLayer: baseLayer,
terrainProvider: new Cesium.EllipsoidTerrainProvider(), //地形图层提供者，仅baseLayerPicker设为false有意义
showRenderLoopErrors:false,//如果设为true，将在一个HTML面板中显示错误信息
});
// 设置初始位置 Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
const boundingSphere = new Cesium.BoundingSphere(
Cesium.Cartesian3.fromDegrees(116.309681,39.956909),1000
);
// 定位到初始位置
this._viewer.camera.flyToBoundingSphere(boundingSphere, {
// 定位到初始位置的过渡时间，设置成0，就没有过渡，类似一个过场的动画时长
duration: 0,
});
this._viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
},
}
}
</script>
现在启动项目就可以在页面中看到cesium渲染出来的一个地球了.
