<template>
|
<div class="body_box">
|
<div id="cesiumContainer"></div>
|
<!-- <button id="btn1" class="layui-btn" @click="cameraInfo()">相机参数</button> -->
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from "../../utils/auth.js";
|
export default {
|
components: {},
|
data() {
|
return {
|
earthCtrl: null,
|
Viewer: null,
|
};
|
},
|
methods: {
|
cameraInfo() {
|
// 获取当前相机位置的xyz坐标
|
var cameraPosition = Viewer.camera.position;
|
|
// 获取当前相机的姿态（heading、pitch、roll）
|
var cameraHeading = Viewer.camera.heading;
|
var cameraPitch = Viewer.camera.pitch;
|
var cameraRoll = Viewer.camera.roll;
|
|
// 构建警报框中的消息
|
var message = 'Camera Position (x, y, z):\n' +
|
cameraPosition.x.toFixed(2) + ', ' +
|
cameraPosition.y.toFixed(2) + ', ' +
|
cameraPosition.z.toFixed(2) + '\n\n' +
|
'Camera Heading: ' + cameraHeading.toFixed(2) + '\n' +
|
'Camera Pitch: ' + cameraPitch.toFixed(2) + '\n' +
|
'Camera Roll: ' + cameraRoll.toFixed(2);
|
|
// 弹出警报框显示相机位置和姿态
|
alert(message);
|
},
|
// wmts加载
|
AddWmtesLayer(url, id) {
|
var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
|
sourceType: "wmts",
|
url: url,
|
layer: "",
|
format: "image/png",
|
tileMatrixSetID: "GoogleCRS84Quad01",
|
tileMatrixLabels: [
|
"0",
|
"1",
|
"2",
|
"3",
|
"4",
|
"5",
|
"6",
|
"7",
|
"8",
|
"9",
|
"10",
|
"11",
|
"12",
|
"13",
|
"14",
|
"15",
|
"16",
|
"17",
|
"18",
|
],
|
style: "",
|
tilingScheme: new Cesium.GeographicTilingScheme({
|
ellipsoid: Cesium.Ellipsoid.MOON,
|
}),
|
});
|
console.log(urlTemplateImageryProvider);
|
// this.layerList.push({
|
// id: id,
|
// layerData: urlTemplateImageryProvider._primitive,
|
// type: "wmts",
|
// });
|
},
|
// 地形加载
|
AddDemLayer(url, id) {
|
var terrain = new Cesium.CesiumTerrainProvider({
|
url: url,
|
// url: url,
|
tilingScheme: new Cesium.GeographicTilingScheme({
|
ellipsoid: Cesium.Ellipsoid.MOON,
|
}),
|
});
|
window.Viewer.terrainProvider = terrain;
|
|
// let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
|
// this.layerList.push({ id: id, type: "dem" });
|
},
|
//地图初始化
|
init3DMap() {
|
//设置月球坐标系
|
SmartEarth.Cesium.Ellipsoid.WGS84 = new SmartEarth.Cesium.Ellipsoid(
|
1737400.0,
|
1737400.0,
|
1737400.0
|
);
|
//页面初始化
|
this.earthCtrl = new SmartEarth.EarthCtrl("cesiumContainer", {
|
StaticFileBaseUrl: StaticFileBaseUrl,
|
ellipsoidCoordinates: "MOON",
|
});
|
this.earthCtrl.environment.disableAllEffect();
|
|
this.Viewer = this.earthCtrl._Viewer;
|
|
// this.Viewer.scene.skyAtmosphere.show = false;
|
|
this.Viewer.scene.globe.depthTestAgainstTerrain = false;
|
|
window.earthCtrl = this.earthCtrl;
|
|
window.Viewer = this.earthCtrl._Viewer;
|
|
window.Cesium = SmartEarth.Cesium;
|
|
window.sgworld = earthCtrl;
|
sgworld.Navigate.Stop(); //取消飞行状态
|
sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
|
sgworld.Navigate.setPosition(-1093596.38, 5729026.12, 4136590.41);
|
var token = getToken();
|
var demUrl = `${BASE_URL}/proxy/${token}/24`
|
var wmtsUrl = `${BASE_URL}/proxy/${token}/17`
|
|
this.AddDemLayer(demUrl)
|
this.AddWmtesLayer(wmtsUrl)
|
//=======================
|
// window.Viewer.imageryLayers.removeAll();
|
//=======================
|
// Viewer.scene.globe.showGroundAtmosphere = false;
|
|
// var terrain = new Cesium.CesiumTerrainProvider({
|
// url: config.moonTerrain,
|
// tilingScheme: new Cesium.GeographicTilingScheme({
|
// ellipsoid: Cesium.Ellipsoid.MOON,
|
// }),
|
// });
|
// window.Viewer.terrainProvider = terrain;
|
|
|
},
|
},
|
mounted() {
|
this.init3DMap();
|
},
|
created() {},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.body_box {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
.cesiumContainer {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
</style>
|
<style>
|
.cesium-viewer-animationContainer{
|
display: none !important;
|
}
|
</style>
|
