<template>
|
<div
|
class="mouseBox"
|
@setMouseMove="setMouseMove"
|
>
|
<div
|
class="earthImage"
|
:class="{ active: gridIsshow }"
|
@click="gridSwitch"
|
></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>
|
</template>
|
|
<script lang="ts" setup>
|
import InitMap from "@/assets/js/Map";
|
import server from "@/assets/js/Map/server";
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
const longitude = ref("0.00");
|
const latitude = ref("0.00");
|
const rate = ref("0.00");
|
const alt = ref("0.00");
|
const altHeight = ref("0.00");
|
|
let entitiesObj = reactive({
|
lonLine: [],
|
latLine: [],
|
});
|
let gridIsshow = ref(false);
|
let levelArray = [
|
0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000, 250000,
|
200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200, 100, 50, 25,
|
10, 0,
|
];
|
let heightlevel = "";
|
const setMouseMove = (res) => {
|
let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
|
window.Viewer.scene.canvas
|
);
|
var ellipsoid = window.Viewer.scene.globe.ellipsoid;
|
handlerPoint.setInputAction(function (movement) {
|
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
var cartesian = window.Viewer.camera.pickEllipsoid(
|
movement.endPosition,
|
ellipsoid
|
);
|
if (cartesian) {
|
//将笛卡尔三维坐标转为地图坐标（弧度）
|
var cartographic =
|
window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
//将地图坐标（弧度）转为十进制的度数
|
longitude.value = SmartEarth.Cesium.Math.toDegrees(
|
cartographic.longitude
|
).toFixed(6);
|
latitude.value = SmartEarth.Cesium.Math.toDegrees(
|
cartographic.latitude
|
).toFixed(6);
|
altHeight.value = window.Viewer.scene.globe.getHeight(
|
Cesium.Cartographic.fromDegrees(longitude.value, latitude.value, 0)
|
);
|
if (altHeight.value) {
|
altHeight.value = altHeight.value.toFixed(2);
|
}
|
}
|
}, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
Viewer.camera.changed.addEventListener(() => {
|
// 视高 km
|
let camera_alt = (Viewer.camera.positionCartographic.height / 1000).toFixed(
|
2
|
);
|
|
alt.value = 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);
|
rate.value = geodesic.surfaceDistance.toFixed(2); //分辨率
|
});
|
};
|
const gridSwitch = () => {
|
server.showlonlatLine();
|
};
|
const getHeight = () => {
|
let removeListener = Viewer.camera.changed.addEventListener(() => {
|
// 当前高度
|
let height = Viewer.camera.positionCartographic.height;
|
heightlevel = getLevel(height);
|
|
if (heightlevel == 6) {
|
gridDel();
|
grid(5);
|
}
|
// if (heightlevel <= 6) {
|
// gridDel();
|
// grid(10);
|
// }
|
if (heightlevel == 8) {
|
gridDel();
|
grid(1);
|
}
|
});
|
};
|
const getLevel = (height) => {
|
for (var i = 1, len = levelArray.length; i < len - 1; i++) {
|
if (height >= (levelArray[i] + levelArray[i + 1]) / 2) {
|
return i;
|
}
|
}
|
return levelArray.length - 1;
|
};
|
const createPrimitives = (degree) => {
|
// let ps = [];
|
// for (let longitude = -180; longitude <= 180; longitude += 10) {
|
// ps.push(
|
// Cesium.Cartesian3.fromDegreesArray([
|
// longitude,
|
// -90,
|
// longitude,
|
// 0,
|
// longitude,
|
// 90,
|
// ])
|
// );
|
// }
|
|
// let polylineGeometry = new Cesium.PolylineGeometry({
|
// positions: ps,
|
// width: 5,
|
// id: "polylineGeometry",
|
// });
|
// Viewer.scene.primitives.add(
|
// new Cesium.Primitive({
|
// geometryInstances: new Cesium.GeometryInstance({
|
// geometry: polylineGeometry,
|
// }),
|
// // vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
|
// appearance: new Cesium.EllipsoidSurfaceAppearance({
|
// material: Cesium.Material.fromType("Stripe"),
|
// }),
|
// })
|
// );
|
var GridImagery = new Cesium.GridImageryProvider();
|
var imageryLayers = Viewer.imageryLayers;
|
var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery); // 添加网格图层
|
imageryLayers.raiseToTop(GridImageryLayer); // 将网格图层置顶
|
};
|
const grid = (degree) => {
|
const entities = Viewer.entities;
|
for (let longitude = -180; longitude <= 180; longitude += degree) {
|
let text = "";
|
if (longitude === 0) {
|
text = "0";
|
}
|
text += longitude === 0 ? "" : "" + longitude + "°";
|
if (longitude === -180) {
|
text = "";
|
}
|
let obj = entities.add({
|
position: Cesium.Cartesian3.fromDegrees(longitude, 0),
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray([
|
longitude,
|
-90,
|
longitude,
|
0,
|
longitude,
|
90,
|
]),
|
width: 4.0,
|
material: new Cesium.Color.fromCssColorString("#c8b284"),
|
clampToGround: true, //开启贴地
|
},
|
label: {
|
text: text,
|
verticalOrigin: Cesium.VerticalOrigin.LEFT,
|
font: "16px sans-serif",
|
fillColor: new Cesium.Color.fromCssColorString("#000"),
|
outlineWidth: "6px sans-serif", // 字体外圈线宽度（同样也有颜色可设置）
|
outlineColor: new Cesium.Color.fromCssColorString("#000"),
|
// 这里设置了就不会被遮盖了，设为负值则在更上层
|
eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
|
},
|
});
|
entitiesObj.lonLine.push(obj);
|
}
|
let langS = [];
|
for (let longitude = -180; longitude <= 180; longitude += 5) {
|
langS.push(longitude);
|
}
|
//每隔10读绘制一条纬度线和纬度标注,自己控制间隔
|
for (let lat = -80; lat <= 80; lat += degree) {
|
let text = "";
|
text += "" + lat + "°";
|
if (lat === 0) {
|
text = "";
|
}
|
|
let obj = entities.add({
|
position: Cesium.Cartesian3.fromDegrees(0, lat),
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray(
|
langS
|
.map((long) => {
|
return [long, lat].join(",");
|
})
|
.join(",")
|
.split(",")
|
.map((item) => Number(item))
|
),
|
width: 4.0,
|
material: new Cesium.Color.fromCssColorString("#c8b284"),
|
clampToGround: true, //开启贴地
|
},
|
label: {
|
text: text,
|
font: "18px sans-serif",
|
fillColor: new Cesium.Color.fromCssColorString("#000"),
|
outlineWidth: 6, // 字体外圈线宽度（同样也有颜色可设置）
|
outlineColor: new Cesium.Color.fromCssColorString("#000"),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
|
pixelOffset: new Cesium.Cartesian2(0, 15), // 中心位置
|
// 这里设置了就不会被遮盖了，设为负值则在更上层
|
eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
|
},
|
});
|
entitiesObj.latLine.push(obj);
|
}
|
|
// 抗锯齿
|
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
//判断是否支持图像渲染像素化处理
|
Viewer.resolutionScale = window.devicePixelRatio;
|
}
|
//开启抗锯齿
|
Viewer.scene.fxaa = true;
|
Viewer.scene.postProcessStages.fxaa.enabled = true;
|
};
|
const gridDel = () => {
|
if (entitiesObj.lonLine.length > 0) {
|
entitiesObj.lonLine.forEach((e) => {
|
Viewer.entities.remove(e);
|
});
|
entitiesObj.lonLine = [];
|
}
|
if (entitiesObj.latLine.length > 0) {
|
entitiesObj.latLine.forEach((e) => {
|
Viewer.entities.remove(e);
|
});
|
entitiesObj.latLine = [];
|
}
|
};
|
onMounted(() => {
|
window.setMouseMove = setMouseMove;
|
// const handleMouseMove =
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.mouseBox {
|
height: 47px;
|
background: rgba(1, 0, 28, 0.3);
|
|
left: 128px;
|
bottom: 20px;
|
|
position: absolute;
|
z-index: 30;
|
padding-left: 10px;
|
padding-right: 20px;
|
display: flex;
|
align-items: center;
|
.earthImage {
|
width: 20px;
|
height: 20px;
|
background: url("../assets/img/形状 9.png") no-repeat;
|
background-size: 100% 100%;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
.earthLable {
|
font-size: 16px;
|
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>
|
