Skip to content

V
vue-cesium-lyc
Commit 8927f7fd by lyc
Options

1

parent 0551d450
Showing with 201 additions and 71 deletions
src/App.vue
......@@ -13,9 +13,12 @@ import baozha from './components/baozha.vue'
import kedupan from './components/kedupan.vue'
import raotaiyang from './components/raotaiyng.vue'
import qq from './components/qq.vue'
import setl from './components/setl.vue'
import xyz from './components/xyz.vue'
export default {
name: 'app',
components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan,raotaiyang,qq}
components: { boom, demo ,draw,moon,fire,selt,sun,camera,dail,baozha,kedupan,raotaiyang,qq,setl,xyz}
}
</script>
......@@ -31,8 +34,10 @@ export default {
<!-- <draw/> -->
<!-- <camera/> -->
<!-- <dail/> -->
<raotaiyang/>
<!-- <raotaiyang/> -->
<!-- <qq/> -->
<xyz/>
<!-- <setl/> -->
</template>
<style scoped>
......
src/components/qq.vue
......@@ -5,6 +5,7 @@
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Cesium3DTile from 'cesium/Source/Scene/Cesium3DTile';
onMounted(() => {
......@@ -16,15 +17,32 @@ onMounted(() => {
let handler;
// 添加轨迹线实体
const polyline = viewer.entities.add({
viewer.entities.add({
id: 'polyline',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-100, 20, -100, 30,-90,25]),
width: 20,
material: Cesium.Color.YELLOW,
},
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,300000),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
}
});
const polyline = viewer.entities.add({
id: 'line',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-70, 30, -60, 20,-50,30]),
width:2,
material:Cesium.Color.YELLOW
}
})
viewer.entities.add({
id: "point",
position: Cesium.Cartesian3.fromDegrees(-85, 30, 100),
point: {
pixelSize: 10,
color: Cesium.Color.RED
}
})
// 添加用于显示标签的实体
const entity = viewer.entities.add({
label: {
......@@ -34,79 +52,64 @@ onMounted(() => {
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(15, 0),
eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
},
});
// 设置鼠标事件处理器
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
// 处理鼠标移动事件
handler.setInputAction(function (movement) {
const pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.id === 'polyline') {
const cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
if (cartesian) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
const heightString = cartographic.height.toFixed(2);
const xString = cartesian.x.toFixed(2);
const yString = cartesian.y.toFixed(2);
const zString = cartesian.z.toFixed(2);
entity.position = cartesian;
entity.label.show = true;
entity.label.text =
`Lon: ${` ${longitudeString}`.slice(-7)}\u00B0` +
`\nLat: ${` ${latitudeString}`.slice(-7)}\u00B0` +
`\nHeight: ${heightString} m` +
`\n\nECEF:` +
`\nX: ${xString} m` +
`\nY: ${yString} m` +
`\nZ: ${zString} m`;
}
const cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
if (cartesian) {
// 从笛卡尔坐标转换为地理坐标
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
const heightString = cartographic.height.toFixed(2);
// 将笛卡尔坐标转换为字符串
const cartesianString = `X: ${cartesian.x.toFixed(2)}, Y: ${cartesian.y.toFixed(2)}, Z: ${cartesian.z.toFixed(2)}`;
entity.position = cartesian;
entity.label.show = true;
entity.label.text =
`X: ${cartesian.x.toFixed(2)}` +
`\nY: ${cartesian.y.toFixed(2)}` +
`\nZ: ${cartesian.z.toFixed(2)}`;
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function (movement) {
const pickedObject = viewer.scene.pick(movement.position);
if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.id === 'polyline') {
const cartesian = viewer.camera.pickEllipsoid(
movement.position,
scene.globe.ellipsoid
);
if (cartesian) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
const heightString = cartographic.height.toFixed(2);
const xString = cartesian.x.toFixed(2);
const yString = cartesian.y.toFixed(2);
const zString = cartesian.z.toFixed(2);
entity.position = cartesian;
entity.label.show = true;
entity.label.text =
`Lon: ${` ${longitudeString}`.slice(-7)}\u00B0` +
`\nLat: ${` ${latitudeString}`.slice(-7)}\u00B0` +
`\nHeight: ${heightString} m` +
`\n\nECEF:` +
`\nX: ${xString} m` +
`\nY: ${yString} m` +
`\nZ: ${zString} m`;
}
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// handler.setInputAction(function (movement) {
// const cartesian = viewer.camera.pickEllipsoid(
// movement.endPosition,
// scene.globe.ellipsoid
// );
// if (cartesian) {
// const pickedEntity = viewer.scene.pick(movement.endPosition);
// if (Cesium.defined(pickedEntity) && pickedEntity.id) {
// const entityPosition = Cesium.Cartographic.fromCartesian(pickedEntity.id.position.getValue(viewer.clock.currentTime));
// const longitudeString = Cesium.Math.toDegrees(entityPosition.longitude).toFixed(2);
// const latitudeString = Cesium.Math.toDegrees(entityPosition.latitude).toFixed(2);
// const heightString = entityPosition.height.toFixed(2);
// entity.position = cartesian;
// entity.label.show = true;
// entity.label.text =
// `Lon: ${longitudeString}\u00B0` +
// `\nLat: ${latitudeString}\u00B0`;
// } else {
// entity.label.show = false;
// }
// } else {
// entity.label.show = false;
// }
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
......
src/components/setl.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
const scene = viewer.scene;
let handler;
// 添加用于显示标签的实体
const entity = viewer.entities.add({
label: {
show: false,
showBackground: true,
font: "16px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(15, 0),
eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
},
});
// 设置鼠标事件处理器
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
const cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
if (cartesian) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
entity.position = cartesian;
entity.label.show = true;
entity.label.text =`Lon: ${` ${longitudeString}`.slice(-7)}\u00B0` +`\nLat: ${` ${latitudeString}`.slice(-7)}\u00B0`;
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
</style>
src/components/xyz.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
const scene = viewer.scene;
let handler;
// 添加用于显示标签的实体
const entity = viewer.entities.add({
label: {
show: false,
showBackground: true,
font: "16px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(15, 0),
eyeOffset: new Cesium.Cartesian3(0, 0, -10000)
},
});
// 设置鼠标事件处理器
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
const cartesian = viewer.camera.pickEllipsoid(movement.endPosition,scene.globe.ellipsoid);
if (cartesian) {
entity.position = cartesian;
entity.label.show = true;
entity.label.text =`X: ${cartesian.x.toFixed(2)}` +`\nY: ${cartesian.y.toFixed(2)}` +`\nZ: ${cartesian.z.toFixed(2)}`;
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment