Skip to content

C
cesium-frame
Commit 03e3fda2 by jlc
Options

update：将cesium的在线版本都变为1.99

parent b07184be
Showing with 162 additions and 107 deletions
src/assets/MultiLine.png
src/assets/MultiLine.png

139 KB | W: | H:

src/assets/MultiLine.png

622 KB | W: | H:

src/assets/MultiLine.png
src/assets/MultiLine.png
src/assets/MultiLine.png
src/assets/MultiLine.png
  • 2-up
  • Swipe
  • Onion skin
src/examples/CodeMap.js
......@@ -5,6 +5,7 @@ import vueCodePlane from '@/examples/plane.vue?raw'
import vueCodeCirclesAndEllipses from '@/examples/circlesAndEllipses.vue?raw'
import vueCodeBox from '@/examples/box.vue?raw'
import vueCodeStraightArrow from '@/examples/straightArrow.vue?raw'
import vueCodeRain from '@/examples/rain.vue?raw'
import vueCodeSnow from '@/examples/snow.vue?raw'
......@@ -18,6 +19,7 @@ const vueCodeMap = {
面: vueCodePlane,
椭圆: vueCodeCirclesAndEllipses,
盒子: vueCodeBox,
直线箭头: vueCodeStraightArrow,
雨: vueCodeRain,
雪: vueCodeSnow,
......
src/examples/FunctionMap.js
......@@ -5,6 +5,7 @@ import functionCodePlane from '@/examples/plane-function.js?raw'
import functionCodeCirclesAndEllipses from '@/examples/circlesAndEllipses-function.js?raw'
import functionBox from '@/examples/box-function.js?raw'
import functionStraightArrow from '@/examples/straightArrow-function.js?raw'
import functionCodeRain from '@/examples/rain-function.js?raw'
import functionCodeSnow from '@/examples/snow-function.js?raw'
......@@ -18,6 +19,7 @@ const functionCodeMap = {
面: functionCodePlane,
椭圆: functionCodeCirclesAndEllipses,
盒子: functionBox,
直线箭头: functionStraightArrow,
雨: functionCodeRain,
雪: functionCodeSnow,
......
src/examples/box-function.js
export function addBox() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......
src/examples/circlesAndEllipses-function.js
export function addCirclesAndEllipses() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......
src/examples/fog-function.js
export function addFog() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......@@ -10,28 +10,28 @@ export function addFog() {
viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
fragmentShader: `
uniform sampler2D colorTexture;
uniform sampler2D depthTexture;
uniform float visibility;
uniform vec4 fogColor;
in vec2 v_textureCoordinates;
out vec4 fragColor;
void main(void)
{
vec4 origcolor = texture(colorTexture, v_textureCoordinates);
float depth = czm_readDepth(depthTexture, v_textureCoordinates);
vec4 depthcolor = texture(depthTexture, v_textureCoordinates);
float f = visibility * (depthcolor.r - 0.3) / 0.2;
if (f < 0.0) f = 0.0;
else if (f > 1.0) f = 1.0;
fragColor = mix(origcolor, fogColor, f);
}
`,
uniform sampler2D colorTexture;
uniform sampler2D depthTexture;
uniform float visibility;
uniform vec4 fogColor;
varying vec2 v_textureCoordinates;
varying vec4 fragColor;
void main(void)
{
vec4 origcolor = texture2D(colorTexture, v_textureCoordinates);
float depth = czm_readDepth(depthTexture, v_textureCoordinates);
vec4 depthcolor = texture2D(depthTexture, v_textureCoordinates);
float f = visibility * (depthcolor.r - 0.3) / 0.2;
if (f < 0.0) f = 0.0;
else if (f > 1.0) f = 1.0;
gl_FragColor = mix(origcolor, fogColor, f);
}
`,
uniforms: {
visibility: 0.1,
fogColor: new Cesium.Color(0.8, 0.8, 0.8, 0.8),
},
}));
}));
};
document.head.appendChild(script);
......
src/examples/line-function.js
export function addLine() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......
src/examples/multiLine-function.js
export function addMultiLine() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......@@ -74,24 +74,6 @@ export function addMultiLine() {
},
},
{
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: {
......
src/examples/plane-function.js
export function addPlane() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......
src/examples/point-function.js
export function addPoint() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......
src/examples/rain-function.js
export function addRain() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......@@ -10,30 +10,30 @@ export function addRain() {
viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
fragmentShader: `
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
uniform float tiltAngle;
uniform float rainSize;
uniform float rainSpeed;
float hash(float x) {
return fract(sin(x * 133.3) * 13.13);
}
out vec4 fragColor;
void main(void) {
float time = czm_frameNumber / rainSpeed;
vec2 resolution = czm_viewport.zw;
vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);
vec3 c = vec3(.6, .7, .8);
float a = tiltAngle;
float si = sin(a), co = cos(a);
uv *= mat2(co, -si, si, co);
uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;
float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);
float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;
c *= v * b;
fragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), .5);
}
`,
uniform sampler2D colorTexture;
varying vec2 v_textureCoordinates;
uniform float tiltAngle;
uniform float rainSize;
uniform float rainSpeed;
float hash(float x) {
return fract(sin(x * 133.3) * 13.13);
}
varying vec4 fragColor;
void main(void) {
float time = czm_frameNumber / rainSpeed;
vec2 resolution = czm_viewport.zw;
vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);
vec3 c = vec3(.6, .7, .8);
float a = tiltAngle;
float si = sin(a), co = cos(a);
uv *= mat2(co, -si, si, co);
uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;
float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);
float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;
c *= v * b;
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1.0), 0.5);
}
`,
uniforms: {
tiltAngle: -0.2, //倾斜角度
rainSize: 0.8, // 雨大小
......
src/examples/snow-function.js
export function addSnow() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......@@ -9,43 +9,43 @@ export function addSnow() {
});
viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
fragmentShader: `
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
uniform float snowSpeed;
uniform float snowSize;
float snow(vec2 uv,float scale)
{
float time=czm_frameNumber*snowSpeed;
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);
return k*w;
}
out vec4 fragColor;
void main(void){
vec2 resolution=czm_viewport.zw;
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
vec3 finalColor=vec3(0);
float c=0.;
c+=snow(uv,30.)*.0;
c+=snow(uv,20.)*.0;
c+=snow(uv,15.)*.0;
c+=snow(uv,10.);
c+=snow(uv,8.);
c+=snow(uv,6.);
c+=snow(uv,5.);
finalColor=(vec3(c));
fragColor=mix(texture(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);
}
`,
uniforms: {
snowSize: 0.02,
snowSpeed: 0.005
},
}));
fragmentShader: `
uniform sampler2D colorTexture;
varying vec2 v_textureCoordinates;
uniform float snowSpeed;
uniform float snowSize;
float snow(vec2 uv,float scale)
{
float time=czm_frameNumber*snowSpeed;
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);
return k*w;
}
varying vec4 fragColor;
void main(void){
vec2 resolution=czm_viewport.zw;
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
vec3 finalColor=vec3(0);
float c=0.;
c+=snow(uv,30.)*.0;
c+=snow(uv,20.)*.0;
c+=snow(uv,15.)*.0;
c+=snow(uv,10.);
c+=snow(uv,8.);
c+=snow(uv,6.);
c+=snow(uv,5.);
finalColor=(vec3(c));
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor, 1.0), 0.5);
}
`,
uniforms: {
snowSize: 0.02,
snowSpeed: 0.005
},
}));
};
document.head.appendChild(script);
......
src/examples/straightArrow-function.js 0 → 100644
export function addStraightArrow() {
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,
});
const czml = [
{
id: "document",
name: "CZML Geometries: Polyline",
version: "1.0",
},
{
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,
},
},
];
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/straightArrow.vue 0 → 100644
<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import { addStraightArrow } from './function';
onMounted(() => {
addStraightArrow()
});
</script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>
\ No newline at end of file
src/examples/waterSurface-function.js
export function addWaterSurface() {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
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'
......
src/views/ElementMap.js
......@@ -22,6 +22,10 @@ export const elementGraphicMap = {
盒子: {
title: '盒子',
pngUrl: '/src/assets/ColumnBody.png'
},
直线箭头: {
title: '直线箭头',
pngUrl: '/src/assets/StraightArrow.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