Commit 089a1df6 by jlc

update:添加面的案例

parent 9ac34232
import vueCodePoint from '@/examples/point.vue?raw' import vueCodePoint from '@/examples/point.vue?raw'
import vueCodeLine from '@/examples/line.vue?raw' import vueCodeLine from '@/examples/line.vue?raw'
import vueCodeMultiLine from '@/examples/multiLine.vue?raw' import vueCodeMultiLine from '@/examples/multiLine.vue?raw'
import vueCodePlane from '@/examples/plane.vue?raw'
import vueCodeCodeCirclesAndEllipses from '@/examples/circlesAndEllipses.vue?raw' import vueCodeCodeCirclesAndEllipses from '@/examples/circlesAndEllipses.vue?raw'
import vueCodeRain from '@/examples/rain.vue?raw' import vueCodeRain from '@/examples/rain.vue?raw'
...@@ -12,6 +13,7 @@ const vueCodeMap = { ...@@ -12,6 +13,7 @@ const vueCodeMap = {
: vueCodePoint, : vueCodePoint,
线: vueCodeLine, 线: vueCodeLine,
多颜色线: vueCodeMultiLine, 多颜色线: vueCodeMultiLine,
: vueCodePlane,
椭圆: vueCodeCodeCirclesAndEllipses, 椭圆: vueCodeCodeCirclesAndEllipses,
: vueCodeRain, : vueCodeRain,
......
import functionCodePoint from '@/examples/point-function.js?raw' import functionCodePoint from '@/examples/point-function.js?raw'
import functionCodeLine from '@/examples/line-function.js?raw' import functionCodeLine from '@/examples/line-function.js?raw'
import functionCodeMultiLine from '@/examples/multiLine-function.js?raw' import functionCodeMultiLine from '@/examples/multiLine-function.js?raw'
import functionCodePlane from '@/examples/plane-function.js?raw'
import functionCodeCirclesAndEllipses from '@/examples/circlesAndEllipses-function.js?raw' import functionCodeCirclesAndEllipses from '@/examples/circlesAndEllipses-function.js?raw'
import functionCodeRain from '@/examples/rain-function.js?raw' import functionCodeRain from '@/examples/rain-function.js?raw'
...@@ -12,6 +13,7 @@ const functionCodeMap = { ...@@ -12,6 +13,7 @@ const functionCodeMap = {
: functionCodePoint, : functionCodePoint,
线: functionCodeLine, 线: functionCodeLine,
多颜色线: functionCodeMultiLine, 多颜色线: functionCodeMultiLine,
: functionCodePlane,
椭圆: functionCodeCirclesAndEllipses, 椭圆: functionCodeCirclesAndEllipses,
: functionCodeRain, : functionCodeRain,
......
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 Colors",
version: "1.0",
},
{
id: "rgba",
name: "Rectangle with outline using RGBA Colors",
rectangle: {
coordinates: {
wsenDegrees: [-120, 40, -110, 50],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 100],
},
},
},
height: 0, // disables ground clamping, needed for outlines
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "rgbaf",
name: "Rectangle using RGBAF Colors",
rectangle: {
coordinates: { wsenDegrees: [-100, 40, -90, 50] },
fill: true,
material: {
solidColor: {
color: {
rgbaf: [1, 0, 0, 0.39],
},
},
},
height: 0, // disables ground clamping, needed for outlines
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
];
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);
}
<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
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
...@@ -11,6 +11,10 @@ export const elementGraphicMap = { ...@@ -11,6 +11,10 @@ export const elementGraphicMap = {
title: '多颜色线', title: '多颜色线',
pngUrl: '/src/assets/MultiLine.png' pngUrl: '/src/assets/MultiLine.png'
}, },
: {
title: '面',
pngUrl: '/src/assets/Plane.png'
},
椭圆: { 椭圆: {
title: '椭圆', title: '椭圆',
pngUrl: '/src/assets/CirclesAndEllipses.png' pngUrl: '/src/assets/CirclesAndEllipses.png'
...@@ -47,26 +51,26 @@ export const elementWeatherMap = { ...@@ -47,26 +51,26 @@ export const elementWeatherMap = {
export const elementPlaneMap = { export const elementPlaneMap = {
One: { One: {
title: 'planeOne', title: 'planeOne',
pngUrl: '/src/assets/PlaneOne.png' pngUrl: '/src/assets/Plane.png'
}, },
Two: { Two: {
title: 'planeTwo', title: 'planeTwo',
pngUrl: '/src/assets/PlaneOne.png' pngUrl: '/src/assets/Plane.png'
}, },
Three: { Three: {
title: 'planeThree', title: 'planeThree',
pngUrl: '/src/assets/PlaneOne.png' pngUrl: '/src/assets/Plane.png'
}, },
Four: { Four: {
title: 'planeFour', title: 'planeFour',
pngUrl: '/src/assets/PlaneOne.png' pngUrl: '/src/assets/Plane.png'
}, },
Five: { Five: {
title: 'planeFive', title: 'planeFive',
pngUrl: '/src/assets/PlaneOne.png' pngUrl: '/src/assets/Plane.png'
}, },
Six: { Six: {
title: 'planeSix', title: 'planeSix',
pngUrl: '/src/assets/PlaneOne.png' pngUrl: '/src/assets/Plane.png'
} }
} }
\ No newline at end of file
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