<template>
|
|
<div
|
id="cesiumContainer"
|
class="cesiumContainer"
|
>
|
|
<div class="mouseBox">
|
<div
|
class="earthImage"
|
:class="{ active: gridIsshow }"
|
></div>
|
<div class="earthLable">经度 :</div>
|
<div class="earthLable">{{ longitude }}</div>
|
<div class="earthLable">纬度 :</div>
|
<div class="earthLable">{{ latitude }}</div>
|
<div class="earthLable">地形高度 :</div>
|
<div class="earthLable">{{ altHeight }} </div>
|
<div class="earthLable">米</div>
|
<div class="earthLable">视角高度 :</div>
|
<div class="earthLable">{{ alt }} </div>
|
<div class="earthLable">千米</div>
|
<div class="earthLable">分辨率 :</div>
|
<div class="earthLable">{{ rate }}</div>
|
<div class="earthLable">m/px</div>
|
</div>
|
|
</div>
|
<!-- <button id="btn1" class="layui-btn" @click="cameraInfo()">相机参数</button> -->
|
|
</template>
|
|
<script>
|
import { getToken } from "../../utils/auth.js";
|
export default {
|
components: {},
|
data() {
|
return {
|
earthCtrl: null,
|
Viewer: null,
|
longitude: "0.00",
|
latitude: "0.00",
|
rate: "0.00",
|
alt: "0.00",
|
altHeight: '0.00',
|
gridIsshow: false
|
};
|
},
|
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.imageryLayers.removeAll();
|
this.Viewer.scene.globe.depthTestAgainstTerrain = false;
|
this.Viewer.scene.skyAtmosphere.show = 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);
|
this.getLonLat();
|
var token = getToken();
|
var demUrl = `${BASE_URL}/proxy/${token}/25`
|
var wmtsUrl = `${BASE_URL}/proxy/${token}/26`
|
this.AddDemLayer(demUrl)
|
this.AddWmtesLayer(wmtsUrl)
|
},
|
getLonLat() {
|
let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
|
window.Viewer.scene.canvas
|
);
|
var ellipsoid = window.Viewer.scene.globe.ellipsoid;
|
var that = this;
|
handlerPoint.setInputAction(function (movement) {
|
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
var cartesian = window.Viewer.camera.pickEllipsoid(
|
movement.endPosition,
|
ellipsoid
|
);
|
if (cartesian) {
|
//将笛卡尔三维坐标转为地图坐标（弧度）
|
var cartographic =
|
window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
//将地图坐标（弧度）转为十进制的度数
|
that.longitude = SmartEarth.Cesium.Math.toDegrees(
|
cartographic.longitude
|
).toFixed(6);
|
that.latitude = SmartEarth.Cesium.Math.toDegrees(
|
cartographic.latitude
|
).toFixed(6);
|
that.altHeight = window.Viewer.scene.globe.getHeight(
|
Cesium.Cartographic.fromDegrees(that.longitude, that.latitude, 0)
|
)
|
if (that.altHeight) {
|
that.altHeight = that.altHeight.toFixed(6);
|
}
|
}
|
}, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
Viewer.camera.changed.addEventListener(() => {
|
// 视高 km
|
let camera_alt = (Viewer.camera.positionCartographic.height / 1000).toFixed(
|
2
|
);
|
that.alt = camera_alt;
|
|
let scene = window.Viewer.scene;
|
// 获取画布的大小
|
var width = scene.canvas.clientWidth;
|
var height = scene.canvas.clientHeight;
|
//获取画布中心两个像素的坐标（默认地图渲染在画布中心位置）
|
var left = scene.camera.getPickRay(
|
new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2)
|
);
|
var right = scene.camera.getPickRay(
|
new SmartEarth.Cesium.Cartesian2((1 + width / 2) | 0, (height - 1) / 2)
|
);
|
var globe = scene.globe;
|
var leftPosition = globe.pick(left, scene);
|
var rightPosition = globe.pick(right, scene);
|
if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
|
return;
|
}
|
var leftCartographic =
|
globe.ellipsoid.cartesianToCartographic(leftPosition);
|
var rightCartographic =
|
globe.ellipsoid.cartesianToCartographic(rightPosition);
|
var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic();
|
geodesic.setEndPoints(leftCartographic, rightCartographic);
|
that.rate = geodesic.surfaceDistance.toFixed(6); //分辨率
|
});
|
|
},
|
|
},
|
mounted() {
|
this.init3DMap();
|
},
|
created() { },
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.cesiumContainer {
|
width: 100%;
|
height: 100%;
|
|
.mouseBox {
|
height: 30px;
|
background: rgba(1, 0, 28, 0.3);
|
z-index: 40;
|
position: absolute;
|
padding: 0px 10px;
|
bottom: 30px;
|
left: 20px;
|
display: flex;
|
align-items: center;
|
border-radius: 5px;
|
.earthImage {
|
width: 20px;
|
height: 20px;
|
background: url("../../assets/img/形状 9.png") no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
}
|
.earthLable {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 5px;
|
margin-left: 10px;
|
}
|
.active {
|
background-color: #171e2e;
|
border: 1px solid;
|
border-image: linear-gradient(47deg, #397bc9, #77a5cd, #397bc9) 1 1;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 7px 8px 0px rgba(38, 47, 71, 0.68);
|
}
|
}
|
}
|
</style>
|
<style>
|
.cesium-viewer-animationContainer {
|
display: none !important;
|
}
|
</style>
|
