gps
This commit is contained in:
@ -1,18 +1,314 @@
|
||||
<template>
|
||||
<div class="text-center py-10">
|
||||
<el-button type="primary" @click="handleGoBack">返回上一页</el-button>
|
||||
<div class="p5" style="width: 100%;height: calc(100vh - 84px);" v-loading="loading">
|
||||
<div id="TrajectoryEarth" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="EmptyPage" lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
<script setup name="equipmentGPS">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(true);
|
||||
let earthInstance = null;
|
||||
let data = [
|
||||
{
|
||||
"lng": 106.45637808828741,
|
||||
"lat": 29.5597535878972,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.45971817314378,
|
||||
"lat": 29.54708008996366,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.4594902314301,
|
||||
"lat": 29.53682043192008,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.47398277208025,
|
||||
"lat": 29.5448688679258,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.4793889453858,
|
||||
"lat": 29.549294608101395,
|
||||
"alt": 0.0016450895529057888
|
||||
},
|
||||
{
|
||||
"lng": 106.49100748408087,
|
||||
"lat": 29.551808876409023,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.5040076285079,
|
||||
"lat": 29.55321574288158,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.51355510567937,
|
||||
"lat": 29.546776414794298,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.51838453732344,
|
||||
"lat": 29.537721996213506,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.51457768703192,
|
||||
"lat": 29.524855377287736,
|
||||
"alt": 0.0009144105438296915
|
||||
},
|
||||
{
|
||||
"lng": 106.52872030672225,
|
||||
"lat": 29.53289655789934,
|
||||
"alt": 0.0005979679117487334
|
||||
},
|
||||
{
|
||||
"lng": 106.53493249730421,
|
||||
"lat": 29.541341118458874,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.53390022310705,
|
||||
"lat": 29.54848036964581,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.53471751083796,
|
||||
"lat": 29.55380771856629,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.53518023558718,
|
||||
"lat": 29.560247052020156,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.52470634506619,
|
||||
"lat": 29.560148336926677,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.52527983360243,
|
||||
"lat": 29.55240114606003,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.51837614087053,
|
||||
"lat": 29.557734494325807,
|
||||
"alt": 0.0021893863172707047
|
||||
},
|
||||
{
|
||||
"lng": 106.51573052195917,
|
||||
"lat": 29.564878142363643,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.50951515081469,
|
||||
"lat": 29.556427329943944,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.5076746620389,
|
||||
"lat": 29.565884717127823,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.50341642164544,
|
||||
"lat": 29.558842113740727,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.50065453145776,
|
||||
"lat": 29.567897073636868,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.49328990493458,
|
||||
"lat": 29.558741275828908,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.49363360765534,
|
||||
"lat": 29.57333026493932,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.51905977395505,
|
||||
"lat": 29.57828423907017,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.51145952743101,
|
||||
"lat": 29.584527208426245,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.49372239119027,
|
||||
"lat": 29.58774998459616,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.48214171543982,
|
||||
"lat": 29.580866974898736,
|
||||
"alt": 0.006089177027688381
|
||||
},
|
||||
{
|
||||
"lng": 106.48801515807557,
|
||||
"lat": 29.57049465877845,
|
||||
"alt": 0
|
||||
},
|
||||
{
|
||||
"lng": 106.47638485150803,
|
||||
"lat": 29.571501851940585,
|
||||
"alt": 0.0011061005102942808
|
||||
},
|
||||
{
|
||||
"lng": 106.47903303165843,
|
||||
"lat": 29.562542838689904,
|
||||
"alt": 0.0011137835517156711
|
||||
},
|
||||
{
|
||||
"lng": 106.4645244823306,
|
||||
"lat": 29.56868284644567,
|
||||
"alt": 0.00008251706068442191
|
||||
},
|
||||
{
|
||||
"lng": 106.47108853087332,
|
||||
"lat": 29.555194220499004,
|
||||
"alt": 0
|
||||
},
|
||||
]
|
||||
|
||||
// 返回上一页
|
||||
const handleGoBack = () => {
|
||||
router.go(-1);
|
||||
|
||||
// 创建地球
|
||||
const createEarth = () => {
|
||||
if (!window.YJ) {
|
||||
ElMessage.error('YJ库未加载，请检查依赖');
|
||||
return;
|
||||
}
|
||||
|
||||
window.YJ.on({
|
||||
ws: true,
|
||||
// host: getIP(), // 资源所在服务器地址
|
||||
// username: this.loginForm.username, // 用户名
|
||||
// password: md5pass, // 密码
|
||||
}).then((res) => {
|
||||
loading.value = false;
|
||||
// 创建地球实例
|
||||
earthInstance = new YJ.YJEarth('TrajectoryEarth');
|
||||
window.Earth3 = earthInstance;
|
||||
|
||||
// 开启右键和左键点击事件
|
||||
YJ.Global.openRightClick(window.Earth3);
|
||||
YJ.Global.openLeftClick(window.Earth3);
|
||||
|
||||
// 设置初始视角
|
||||
const view = {
|
||||
position: {
|
||||
lng: 102.03643298211526,
|
||||
lat: 34.393586474501,
|
||||
alt: 11298179.51993155
|
||||
},
|
||||
orientation: {
|
||||
heading: 360,
|
||||
pitch: -89.94481747201486,
|
||||
roll: 0
|
||||
}
|
||||
};
|
||||
|
||||
YJ.Global.CesiumContainer(window.Earth3, {
|
||||
compass: false, //罗盘
|
||||
});
|
||||
// 加载底图
|
||||
loadBaseMap(earthInstance.viewer);
|
||||
|
||||
// 可以取消注释以下代码来设置初始视角
|
||||
// YJ.Global.flyTo(earthInstance, view);
|
||||
// YJ.Global.setDefaultView(earthInstance.viewer, view)
|
||||
renderRange(data);
|
||||
}).catch((err) => {
|
||||
console.error('初始化地球失败:', err);
|
||||
ElMessage.error('初始化地球失败，请稍后重试');
|
||||
});
|
||||
};
|
||||
|
||||
// 加载底图
|
||||
const loadBaseMap = (viewer) => {
|
||||
if (!viewer || !Cesium) {
|
||||
ElMessage.error('Cesium库未加载，请检查依赖');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 创建瓦片提供器
|
||||
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||||
url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
fileExtension: 'png',
|
||||
minimumLevel: 0,
|
||||
maximumLevel: 18,
|
||||
projection: Cesium.WebMercatorProjection,
|
||||
credit: new Cesium.Credit('卫星图数据来源')
|
||||
});
|
||||
|
||||
// 添加图层到视图
|
||||
viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||||
} catch (err) {
|
||||
console.error('加载底图失败:', err);
|
||||
ElMessage.error('加载底图失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染轨迹
|
||||
const renderRange = (data) => {
|
||||
if (!data || data.length === 0) {
|
||||
ElMessage.warning('无轨迹数据可渲染');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!earthInstance || !earthInstance.viewer) {
|
||||
ElMessage.error('地球实例未初始化');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const positions = data.map((point) => {
|
||||
return Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.alt || 0);
|
||||
});
|
||||
|
||||
const entity = earthInstance.viewer.entities.add({
|
||||
polyline: {
|
||||
positions: positions,
|
||||
width: 5,
|
||||
material: Cesium.Color.RED,
|
||||
clampToGround: true
|
||||
}
|
||||
});
|
||||
|
||||
// 调整视角以适应轨迹
|
||||
earthInstance.viewer.flyTo(entity);
|
||||
} catch (err) {
|
||||
console.error('渲染轨迹失败:', err);
|
||||
ElMessage.error('渲染轨迹失败');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
onMounted(() => {
|
||||
createEarth();
|
||||
});
|
||||
|
||||
//
|
||||
onUnmounted(() => {
|
||||
if (earthInstance) {
|
||||
earthInstance.destroy();
|
||||
earthInstance = null;
|
||||
window.Earth3 = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user