<template>
<div>
<!-- 容器 -->
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "",
props: {},
components: {},
data() {
return{
}
},
computed: {},
watch: {},
created () {},
mounted() {
var viewer = new Cesium.Viewer("cesiumContainer", {
// 是否显示信息窗口
infoBox: false , //将浏览器中的blank报错取消掉
// 是否显示搜索框
geocoder: false,
// 是否显示home按钮
homeButton: false,
// 场景的转换
sceneModePicker: false,
// 是否显示图层选择器
baseLayerPicker: false,
// 帮助按钮
navigationHelpButton: false,
// 动画
animation: false,
// 是否设置时间轴
timeline: false,
// 设置全屏按钮
FullscreenButton: false,
// 天空盒子，就是地球的背景色
skyBox:new Cesium.SkyBox({
sources: {
positiveX: 'skybox_px.png',
negativeX: 'skybox_nx.png',
positiveY: 'skybox_py.png',
negativeY: 'skybox_ny.png',
positiveZ: 'skybox_pz.png',
negativeZ: 'skybox_nz.png'
}
}),
// `这个没实现`
// 自定义椭圆体上的图像（来自于哪个地图，高德还是...）??我看不到效果
ImageryProvider: new Cesium.OpenStreetMapImageryProvider({
url : 'https://a.tile.openstreetmap.org/'
}),
// 使地图更加的立体
terrainProvider: Cesium.createWorldTerrain({
// 增加水纹的效果
requestWaterMask: true,
// 增加光照的效果
requestVertexNormals : true
})
});
// 地图的叠加
const imagerLayers = viewer.imagerLayers;
var layer = imagerLayers.addImageryProvider(
new Cesium.GoogleEarthEnterpriseMapsProvider({
url : 'https://earth.localdomain',
channel : 1008
})
)
// 设置透明度
layer.alpha=0.5
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<!-- 容器 -->
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "",
props: {},
components: {},
data() {
return{
}
},
computed: {},
watch: {},
created () {},
mounted() {
var viewer = new Cesium.Viewer("cesiumContainer", {
// 是否显示信息窗口
infoBox: false, //将浏览器中的blank报错取消掉
})
// 坐标系的种类
// 二维的平面的坐标系
// 地理位置坐标系，经度、维度、高度
// 三维的笛卡尔坐标系(空间坐标系)，一般用这个，因此需要将经纬度转换
// 角度和弧度的转换--2PI*弧度=360° 可知弧度和角度的转换
const radians = Cesium.Math.toRadians(90)
// 弧度转角度
const degrees = Cesium.Math.toDegrees(radians)
// 将经纬度转化为笛卡尔坐标系
var cartesion = Cesium.Cartesian3.fromDegrees(
// 经度
89.5,
// 维度
20.4,
// 高度
100
)
console.log(cartesion)
// 将笛卡尔坐标系转化为经纬度--结果对象的值以弧度表示
var Cartographic = Cesium.Cartographic.fromCartesian(cartesion)
console.log(Cartographic)
// console.log(Cesium.Math.toDegrees(Cartographic.latitude)) //这个才是原来的维度
// 瞬间将地图到达某一个位置
// 我们在拨动地图的时候,动的不是地图,而是相机
viewer.camera.setView({
// 指定相机的位置
destination: Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100),
// 设置相机的视角
orientation: {
// 设置相机的朝向 屏幕面向人脸是z轴,向上是Y轴,另一个方向是X轴
// heading 为绕y轴进行旋转
heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
// 相机的俯仰角:就是绕x轴进旋转,0度是竖直向上,-90是竖直向下
pitch: Cesium.Math.toRadians(-90), // default value (looking down)
// 相机的翻滚角
roll : 0.0 // default value
}
});
// ======================================
// 让相机飞过去
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100),
// 设置相机的视角
orientation: {
// 设置相机的朝向 屏幕面向人脸是z轴,向上是Y轴,另一个方向是X轴
// heading 为绕y轴进行旋转
heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
// 相机的俯仰角:就是绕x轴进旋转,0度是竖直向上,-90是竖直向下
pitch: Cesium.Math.toRadians(-90), // default value (looking down)
// 相机的翻滚角
roll : 0.0 // default value
}
})
// 通过按键去控制相机的前进或者后退
document.addEventListener('keydown', (e) => {
// 将速率根据高度改变 ---- 突然发现所有动的一切都是根据viewer
const height = viewer.camera.positionCartographic.height
console.log(height)
const moveRate=height/10
if (e.key === 'w') {
// 相机向前进行移动(速率)
viewer.camera.moveForward(moveRate)
// Camera#moveBackward
// Camera#moveForward
// Camera#moveLeft
// Camera#moveRight
// Camera#moveUp
// Camera#moveDown
// 相机的向左右旋转
//Camera#lookUp
// Camera#lookDown
// Camera#lookLeft
// Camera#lookRight
// 逆时针和顺时针旋转相机
// Camera#twistRight
}
})
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
(cesuim: cesuim 和mars3D 的学习的资料和笔记 (gitee.com)) 希望自己能留下来
