Skip to content

C
cesium-frame
Commit 32729467 by jlc
Options

update：图元内容的添加

parent 6f8e2db5
Showing with 331 additions and 35 deletions
src/components/AsideMenuBar.vue
......@@ -9,7 +9,7 @@
<el-sub-menu index="1">
<template #title>
<el-icon><MapLocation /></el-icon>
<span>点的案例</span>
<span>图元</span>
</template>
<el-menu-item v-for="item in elementPointData" :key="item.id" :index="item.title" @click="goAnchor(item.title)">
<el-icon><View /></el-icon>
......
src/examples/CodeMap.js
import vueCodePointOne from '@/examples/point-one.vue?raw'
import vueCodePointTwo from '@/examples/point-two.vue?raw'
import vueCodePoint from '@/examples/point.vue?raw'
import vueCodeLine from '@/examples/line.vue?raw'
import vueCodePlane from '@/examples/plane.vue?raw'
const vueCodeMap = {
pointOne: vueCodePointOne,
pointTwo: vueCodePointTwo
点: vueCodePoint,
多线: vueCodeLine,
多面: vueCodePlane
}
export function findVueCodeById(id){
......
src/examples/FunctionMap.js 0 → 100644
import functionCodePoint from '@/examples/point-function.js?raw'
import functionCodeLine from '@/examples/line-function.js?raw'
import functionCodePlane from '@/examples/plane-function.js?raw'
const functionCodeMap = {
点: functionCodePoint,
多线: functionCodeLine,
多面: functionCodePlane
}
export function findFunctionCodeById(id){
if(!functionCodeMap.hasOwnProperty(id)){
throw new Error(`${id}不存在`);
}
return functionCodeMap[id]
}
\ No newline at end of file
src/examples/line-function.js 0 → 100644
export function addLine() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
const czml = [
{
id: "document",
name: "CZML Geometries: Polyline",
version: "1.0",
},
{
id: "redLine",
name: "Red line clamped to terain",
polyline: {
positions: {
cartographicDegrees: [-75, 35, 0, -125, 35, 0],
},
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 255],
},
},
},
width: 5,
clampToGround: true,
},
},
{
id: "blueLine",
name: "Glowing blue line on the surface",
polyline: {
positions: {
cartographicDegrees: [-75, 37, 0, -125, 37, 0],
},
material: {
polylineGlow: {
color: {
rgba: [100, 149, 237, 255],
},
glowPower: 0.2,
taperPower: 0.5,
},
},
width: 10,
},
},
{
id: "orangeLine",
name:
"Orange line with black outline at height and following the surface",
polyline: {
positions: {
cartographicDegrees: [-75, 39, 250000, -125, 39, 250000],
},
material: {
polylineOutline: {
color: {
rgba: [255, 165, 0, 255],
},
outlineColor: {
rgba: [0, 0, 0, 255],
},
outlineWidth: 2,
},
},
width: 5,
},
},
{
id: "purpleLine",
name: "Purple arrow at height",
polyline: {
positions: {
cartographicDegrees: [-75, 43, 500000, -125, 43, 500000],
},
material: {
polylineArrow: {
color: {
rgba: [148, 0, 211, 255],
},
},
},
arcType: "NONE",
width: 10,
},
},
{
id: "dashedLine",
name: "Blue dashed line",
polyline: {
positions: {
cartographicDegrees: [-75, 45, 500000, -125, 45, 500000],
},
material: {
polylineDash: {
color: {
rgba: [0, 255, 255, 255],
},
},
},
width: 4,
},
},
];
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
};
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);
}
src/examples/point-one.vue → src/examples/line.vue
<template>
<div id="cesiumContainer" class="cesium-container"></div>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import { addLine } from './function';
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
};
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);
addLine()
});
</script>
......
src/examples/plane-function.js 0 → 100644
export function addPlane() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
const czml = [
{
id: "document",
name: "CZML Geometries: Circles and Ellipses",
version: "1.0",
},
{
id: "shape1",
name: "Green circle at height",
position: {
cartographicDegrees: [-111.0, 40.0, 150000.0],
},
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 300000.0,
height: 200000.0,
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 255],
},
},
},
},
},
{
id: "shape2",
name: "Red ellipse with white outline on surface",
position: {
cartographicDegrees: [-103.0, 40.0, 0],
},
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
height: 0,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 127],
},
},
},
outline: true, // height must be set for outlines to display
outlineColor: {
rgba: [255, 255, 255, 255],
},
},
},
{
id: "shape3",
name:
"Blue translucent, rotated, and extruded ellipse with outline",
position: {
cartographicDegrees: [-95.0, 40.0, 100000.0],
},
ellipse: {
semiMinorAxis: 150000.0,
semiMajorAxis: 300000.0,
extrudedHeight: 200000.0,
rotation: 0.78539,
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 127],
},
},
},
outline: true,
},
},
];
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
};
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);
}
src/examples/point-two.vue → src/examples/plane.vue
<template>
<button @click="btn">点击按钮</button>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { ref } from 'vue';
function btn(){
console.log(111)
}
import { onMounted } from 'vue';
import { addPlane } from './function';
onMounted(() => {
addPlane()
});
</script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>
\ No newline at end of file
src/examples/point-function.js 0 → 100644
export function addPoint() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
const czml = [
{
id: "document",
name: "CZML Point",
version: "1.0",
},
{
id: "point 1",
name: "point",
position: {
cartographicDegrees: [-111.0, 40.0, 0],
},
point: {
color: {
rgba: [255, 255, 255, 255],
},
outlineColor: {
rgba: [255, 0, 0, 255],
},
outlineWidth: 4,
pixelSize: 20,
},
},
];
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
};
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);
}
src/examples/point.vue 0 → 100644
<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import { addPoint } from './function';
onMounted(() => {
addPoint()
});
</script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>
\ No newline at end of file
src/pages/CodeAndCesium.vue
......@@ -20,9 +20,12 @@ import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview,
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { findVueCodeById } from '@/examples/CodeMap.js';
import { findFunctionCodeById } from '@/examples/FunctionMap.js';
// import functionCode from '@/examples/point-one-function?raw'
const route = useRoute()
const vueCode = ref()
const functionCode = ref()
const files = ref({
"src/App.vue": {
code: vueCode,
......@@ -30,10 +33,14 @@ const files = ref({
active: true,
hidden: false
},
"src/function.js": {
code: functionCode,
}
});
onMounted(() =>{
vueCode.value = findVueCodeById(route.query.id)
functionCode.value = findFunctionCodeById(route.query.id)
})
</script>
......
src/views/ElementMap.js
export const elementPointMap = {
One: {
title: 'pointOne',
title: '点',
pngUrl: '/src/assets/PointOne.png'
},
Two: {
title: 'pointTwo',
pngUrl: '/src/assets/PointOne.png'
title: '多线',
pngUrl: '/src/assets/LineOne.png'
},
Three: {
title: 'pointThree',
pngUrl: '/src/assets/PointOne.png'
title: '多面',
pngUrl: '/src/assets/Plane.png'
},
Four: {
title: 'pointFour',
......
src/views/indexView.vue
<template>
<div class="app-continer">
<div class="mt-5">
<span class="text-base font-bold">点的案例</span>
<span class="text-base font-bold">图元</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementPointData" :key="item.id" @click="indexBtn(item.title)" class="item-container">
<div :id="item.title">{{item.title}}</div>
......
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