Commit 6359692e by jlc

update:坐标轴案例的添加

parent ebd62502
// 测站
import vueCodeAddStation from '@/examples/measureStation/addStation/addStation.vue?raw'
import vueCodeStationCoordinate from '@/examples/measureStation/stationCoordinate/stationCoordinate.vue?raw'
// 动目标
import vueCodeAircraft from '@/examples/movingTarget/aircraft/aircraft.vue?raw'
import vueCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis.vue?raw'
import vueCodeRocket from '@/examples/movingTarget/rocket/rocket.vue?raw'
// 图元
import vueCodePoint from '@/examples/graphicElement/point/point.vue?raw'
import vueCodeLine from '@/examples/graphicElement/line/line.vue?raw'
import vueCodeMultiLine from '@/examples/graphicElement/multiLine/multiLine.vue?raw'
import vueCodePlane from '@/examples/graphicElement/plane/plane.vue?raw'
import vueCodeCirclesAndEllipses from '@/examples/graphicElement/circlesAndEllipses/circlesAndEllipses.vue?raw'
import vueCodeBox from '@/examples/graphicElement/box/box.vue?raw'
import vueCodeStraightArrow from '@/examples/graphicElement/straightArrow/straightArrow.vue?raw'
// 天气
import vueCodeRain from '@/examples/weather/rain/rain.vue?raw'
import vueCodeSnow from '@/examples/weather/snow/snow.vue?raw'
import vueCodeFog from '@/examples/weather/fog/fog.vue?raw'
import vueCodeWaterSurface from '@/examples/weather/waterSurface/waterSurface.vue?raw'
import vueCodeAddStation from '@/examples/measureStation/addStation/addStation.vue?raw'
import vueCodeStationCoordinate from '@/examples/measureStation/stationCoordinate/stationCoordinate.vue?raw'
import vueCodeAircraft from '@/examples/movingTarget/aircraft/aircraft.vue?raw'
import vueCodeRocket from '@/examples/movingTarget/rocket/rocket.vue?raw'
const vueCodeMap = {
// 测站
添加测站: vueCodeAddStation,
测站坐标系: vueCodeStationCoordinate,
// 动目标
飞机: vueCodeAircraft,
坐标轴: vueCodeCoordinateAxis,
火箭发射: vueCodeRocket,
// 图元
: vueCodePoint,
线: vueCodeLine,
多颜色线: vueCodeMultiLine,
......@@ -27,16 +42,11 @@ const vueCodeMap = {
盒子: vueCodeBox,
直线箭头: vueCodeStraightArrow,
// 天气
: vueCodeRain,
: vueCodeSnow,
: vueCodeFog,
水面: vueCodeWaterSurface,
添加测站: vueCodeAddStation,
测站坐标系: vueCodeStationCoordinate,
飞机: vueCodeAircraft,
火箭发射: vueCodeRocket
}
export function findVueCodeById(id){
......
// 测站
import functionCodeAddStation from '@/examples/measureStation/addStation/addStation-function.js?raw'
import functionCodeStationCoordinate from '@/examples/measureStation/stationCoordinate/stationCoordinate-function.js?raw'
// 动目标
import functionCodeAircraft from '@/examples/movingTarget/aircraft/aircraft-function.js?raw'
import functionCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis-function.js?raw'
import functionCodeRocket from '@/examples/movingTarget/rocket/rocket-function.js?raw'
// 图元
import functionCodePoint from '@/examples/graphicElement/point/point-function.js?raw'
import functionCodeLine from '@/examples/graphicElement/line/line-function.js?raw'
import functionCodeMultiLine from '@/examples/graphicElement/multiLine/multiLine-function.js?raw'
import functionCodePlane from '@/examples/graphicElement/plane/plane-function.js?raw'
import functionCodeCirclesAndEllipses from '@/examples/graphicElement/circlesAndEllipses/circlesAndEllipses-function.js?raw'
import functionBox from '@/examples/graphicElement/box/box-function.js?raw'
import functionStraightArrow from '@/examples/graphicElement/straightArrow/straightArrow-function.js?raw'
// 天气
import functionCodeRain from '@/examples/weather/rain/rain-function.js?raw'
import functionCodeSnow from '@/examples/weather/snow/snow-function.js?raw'
import functionCodeFog from '@/examples/weather/fog/fog-function.js?raw'
import functionCodeWaterSurface from '@/examples/weather/waterSurface/waterSurface-function.js?raw'
import functionCodeAddStation from '@/examples/measureStation/addStation/addStation-function.js?raw'
import functionCodeStationCoordinate from '@/examples/measureStation/stationCoordinate/stationCoordinate-function.js?raw'
import functionCodeAircraft from '@/examples/movingTarget/aircraft/aircraft-function.js?raw'
import functionCodeRocket from '@/examples/movingTarget/rocket/rocket-function.js?raw'
const functionCodeMap = {
// 测站
添加测站: functionCodeAddStation,
测站坐标系: functionCodeStationCoordinate,
// 动目标
飞机: functionCodeAircraft,
坐标轴: functionCodeCoordinateAxis,
火箭发射: functionCodeRocket,
// 图元
: functionCodePoint,
线: functionCodeLine,
多颜色线: functionCodeMultiLine,
......@@ -27,16 +42,11 @@ const functionCodeMap = {
盒子: functionBox,
直线箭头: functionStraightArrow,
// 天气
: functionCodeRain,
: functionCodeSnow,
: functionCodeFog,
水面: functionCodeWaterSurface,
添加测站: functionCodeAddStation,
测站坐标系: functionCodeStationCoordinate,
飞机: functionCodeAircraft,
火箭发射: functionCodeRocket
}
export function findFunctionCodeById(id){
......
export function addCoordinateAxis() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
shouldAnimate: true
});
const czml = [
{
id: "document",
name: "SpaceX",
version: "1.0",
clock: {
interval: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
currentTime: "2019-08-28T04:00:00.00Z",
multiplier: 1,
range: "LOOP_STOP",
step: "SYSTEM_CLOCK_MULTIPLIER"
}
},
{
id: "point",
name: "point",
position: {
cartographicDegrees: [120.0, 30.0, 0],
},
point: {
color: {
rgba: [255, 255, 255, 255],
},
outlineColor: {
rgba: [255, 0, 0, 255],
},
outlineWidth: 4,
pixelSize: 20,
},
},
];
var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
dataSourcePromise.then(function (dataSource) {
// 根据模型所在的实体去进行加载
viewer.trackedEntity = dataSource.entities.getById('point');
let matrix = viewer.trackedEntity?.computeModelMatrix(Cesium.JulianDate.fromIso8601('2019-08-28T04:00:00.00Z'))
// 通过调试的实体来绘制模型坐标轴
viewer.scene.primitives.add(
new Cesium.DebugModelMatrixPrimitive({ // 加载模型偏移矩阵的图元
modelMatrix: matrix, // 设置偏移矩阵
length: 100000,
width: 10
})
);
}).catch(function (error) {
console.error(error);
});
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
}
<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import { addCoordinateAxis } from './function';
onMounted(() => {
addCoordinateAxis()
});
</script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>
\ No newline at end of file
......@@ -17,10 +17,18 @@ export const elementStationMap = {
}
export const elementMovingMap = {
: {
title: '车',
pngUrl: '/src/assets/Aircraft.png'
},
飞机: {
title: '飞机',
pngUrl: '/src/assets/Aircraft.png'
},
坐标轴: {
title: '坐标轴',
pngUrl: '/src/assets/CoordinateAxis.png'
},
火箭发射: {
title: '火箭发射',
pngUrl: '/src/assets/Rocket.png'
......
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