低空经济AI决策

This commit is contained in:
jiawanlong 2025-05-17 19:30:00 +08:00
parent bd338905af
commit f669039611
41 changed files with 40338 additions and 87 deletions

1
.gitignore vendored
View File

@ -1 +1,2 @@
examples/cesiumEx/真实道路2.html
examples/cesiumEx/templates/1_uav/index-2.html

View File

@ -26,115 +26,82 @@
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjM2EzNGJmNy02N2RmLTQ0MDMtYjI2MS1hZTJiMTIwZGYwMTYiLCJpZCI6MzA0MzEyLCJpYXQiOjE3NDc3MjM3MTV9.ePQNhuoVuDsi_z00lTm5W26wyW1Adcr1AWetGM6WSXI";
const viewer = new Cesium.Viewer("map", {});
viewer.scene.debugShowFramesPerSecond = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
// 地图视野定位
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(120, 30, 3000),
// 地图视野定位
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 3000),
});
// 视锥体位置
let qd = Cesium.Cartesian3.fromDegrees(120, 30, 1000);
let zd = Cesium.Cartesian3.fromDegrees(125, 30, 0);
let primitive;
const fov = 30; //上下角度
const near = 10; // 进距离
const far = 5000; //远距离
const aspectRatio = 1.4; //横向比例
let positions = {
x: -75.59777,
y: 40.03883,
z: 3000
}
initFrustum();
// 绘制
addFrustum(
qd,
_getOrientation(qd, zd),
fov,
near,
far,
aspectRatio
);
function initFrustum() {
// 初始参数
const fov = 45;
const aspectRatio = 1920 / 1080;
const near = 1.0;
const far = 2000.0;
// 创建视锥体及轮廓线
function addFrustum(position, orientation, fov, near, far, aspectRatio) {
let frustum = new Cesium.PerspectiveFrustum({
var position = Cesium.Cartesian3.fromDegrees(positions.x, positions.y, positions.z);
var heading = Cesium.Math.toRadians(0);
var pitch = Cesium.Math.toRadians(0);
var roll = Cesium.Math.toRadians(135);
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
const frustum = new Cesium.PerspectiveFrustum({
fov: Cesium.Math.toRadians(fov),
aspectRatio: aspectRatio,
near: near,
far: far,
far: far
});
let instanceGeo = new Cesium.GeometryInstance({
const instanceGeo = new Cesium.GeometryInstance({
geometry: new Cesium.FrustumGeometry({
frustum: frustum,
origin: position,
origin: Cesium.Cartesian3.ZERO, // 原点
// orientation: Cesium.Quaternion.IDENTITY, // 初始无旋转
orientation: orientation,
vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
vertexFormat: Cesium.VertexFormat.POSITION_ONLY
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
new Cesium.Color(1.0, 0.0, 0.0, 0.3)
),
},
});
let instanceGeoLine = new Cesium.GeometryInstance({
geometry: new Cesium.FrustumOutlineGeometry({
frustum: frustum,
origin: position,
orientation: orientation,
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
new Cesium.Color(1.0, 1.0, 1.0, 1)
),
},
)
}
});
let primitive = new Cesium.Primitive({
geometryInstances: [instanceGeo],
appearance: new Cesium.PerInstanceColorAppearance({
closed: true,
flat: true,
}),
asynchronous: false,
});
const initialModelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
let primitive1 = new Cesium.Primitive({
geometryInstances: [instanceGeoLine],
primitive = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instanceGeo,
appearance: new Cesium.PerInstanceColorAppearance({
closed: true,
flat: true,
translucent: true,
closed: true
}),
asynchronous: false,
});
// viewer.scene.primitives.add(primitive);
// viewer.scene.primitives.add(primitive1);
return [primitive,primitive1];
modelMatrix: initialModelMatrix // 初始位置矩阵
}));
animate();
}
function _getOrientation(cameraPosition, position) {
var e = cameraPosition,
t = position,
i = Cesium.Cartesian3.normalize(
Cesium.Cartesian3.subtract(t, e, new Cesium.Cartesian3()),
new Cesium.Cartesian3()
),
a = Cesium.Cartesian3.normalize(e, new Cesium.Cartesian3()),
n = new Cesium.Camera(viewer.scene);
(n.position = e),
(n.direction = i),
(n.up = a),
(i = n.directionWC),
(a = n.upWC);
var r = n.rightWC,
o = new Cesium.Cartesian3(),
l = new Cesium.Matrix3(),
u = new Cesium.Quaternion();
r = Cesium.Cartesian3.negate(r, o);
var d = l;
Cesium.Matrix3.setColumn(d, 0, r, d),
Cesium.Matrix3.setColumn(d, 1, a, d),
Cesium.Matrix3.setColumn(d, 2, i, d);
var c = Cesium.Quaternion.fromRotationMatrix(d, u);
return (this.orientation = c), c;
function animate() {
positions.y += 0.0001;
var newPosition = Cesium.Cartesian3.fromDegrees(positions.x, positions.y, positions.z);
primitive.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(newPosition);
requestAnimationFrame(animate);
}
</script>
</body>

View File

@ -0,0 +1,416 @@
const Common = `
uniform sampler2D heightMap;
uniform float heightScale;
uniform float maxElevation;
uniform float minElevation;
uniform sampler2D iChannel0;
uniform float iTime;
uniform float coast2water_fadedepth;
uniform float large_waveheight; // change to adjust the "heavy" waves
uniform float large_wavesize; // factor to adjust the large wave size
uniform float small_waveheight; // change to adjust the small random waves
uniform float small_wavesize; // factor to ajust the small wave size
uniform float water_softlight_fact; // range [1..200] (should be << smaller than glossy-fact)
uniform float water_glossylight_fact; // range [1..200]
uniform float particle_amount;
uniform float WATER_LEVEL; // Water level (range: 0.0 - 2.0)
vec3 watercolor = vec3(0.0, 0.60, 0.66); // 'transparent' low-water color (RGB)
vec3 watercolor2 = vec3(0.0,0.0,0.5); // deep-water color (RGB, should be darker than the low-water color)
vec3 water_specularcolor = vec3(1.3, 1.3, 0.9); // specular Color (RGB) of the water-highlights
vec3 light;
// calculate random value
float hash(float n) {
return fract(sin(n) * 43758.5453123);
}
// 2d noise function
float noise1(in vec2 x) {
vec2 p = floor(x);
vec2 f = smoothstep(0.0, 1.0, fract(x));
float n = p.x + p.y * 57.0;
return mix(mix(hash(n + 0.0), hash(n + 1.0), f.x), mix(hash(n + 57.0), hash(n + 58.0), f.x), f.y);
}
float noise(vec2 p) {
return textureLod(iChannel0, p * vec2(1. / 256.), 0.0).x;
}
float height_map(vec2 p) {
float f = texture(heightMap,p).r;
return clamp(f, 0., 10.);
}
const mat2 m = mat2(0.72, -1.60, 1.60, 0.72);
float water_map(vec2 p, float height) {
vec2 p2 = p * large_wavesize;
vec2 shift1 = 0.001 * vec2(iTime * 160.0 * 2.0, iTime * 120.0 * 2.0);
vec2 shift2 = 0.001 * vec2(iTime * 190.0 * 2.0, -iTime * 130.0 * 2.0);
// coarse crossing 'ocean' waves...
float f = 0.6000 * noise(p);
f += 0.2500 * noise(p * m);
f += 0.1666 * noise(p * m * m);
float wave = sin(p2.x * 0.622 + p2.y * 0.622 + shift2.x * 4.269) * large_waveheight * f * height * height;
p *= small_wavesize;
f = 0.;
float amp = 1.0, s = .5;
for(int i = 0; i < 9; i++) {
p = m * p * .947;
f -= amp * abs(sin((noise(p + shift1 * s) - .5) * 2.));
amp = amp * .59;
s *= -1.329;
}
return wave + f * small_waveheight;
}
float nautic(vec2 p) {
p *= 18.;
float f = 0.;
float amp = 1.0, s = .5;
for(int i = 0; i < 3; i++) {
p = m * p * 1.2;
f += amp * abs(smoothstep(0., 1., noise(p + iTime * s)) - .5);
amp = amp * .5;
s *= -1.227;
}
return pow(1. - f, 5.);
}
float particles(vec2 p) {
p *= 200.;
float f = 0.;
float amp = 1.0, s = 1.5;
for(int i = 0; i < 3; i++) {
p = m * p * 1.2;
f += amp * noise(p + iTime * s);
amp = amp * .5;
s *= -1.227;
}
return pow(f * .35, 7.) * particle_amount;
}
float test_shadow(vec2 xy, float height) {
vec3 r0 = vec3(xy, height);
vec3 rd = normalize(light - r0);
float hit = 1.0;
float t = 0.001;
for(int j = 1; j < 25; j++) {
vec3 p = r0 + t * rd;
float h = height_map(p.xy);
float height_diff = p.z - h;
if(height_diff < 0.0) {
return 0.0;
}
t += 0.01 + height_diff * .02;
hit = min(hit, 2. * height_diff / t); // soft shaddow
}
return hit;
}
`;
export default class Erosion extends Cesium.Primitive {
constructor(options) {
super();
this.viewer = options.viewer;
this.extent = options.extent;
this.maxElevation = options.maxElevation;
this.minElevation = options.minElevation;
this.heightMap = options.canvas;
this.noise = options.noise;
this.coast2water_fadedepth = 0.1;
this.large_waveheight = 0.5; // change to adjust the "heavy" waves
this.large_wavesize = 4; // factor to adjust the large wave size
this.small_waveheight = 0.9; // change to adjust the small random waves
this.small_wavesize = 0.12; // factor to ajust the small wave size
this.water_softlight_fact = 36; // range [1..200] (should be << smaller than glossy-fact)
this.water_glossylight_fact = 120; // range [1..200]
this.particle_amount = 70;
this.WATER_LEVEL = 0.34;
this._showLines = false;
this.resolution = Cesium.defaultValue(
options.resolution,
new Cesium.Cartesian2(1024, 1024)
);
}
createCommand(context) {
const rectangle = new Cesium.RectangleGeometry({
ellipsoid: Cesium.Ellipsoid.WGS84,
rectangle: Cesium.Rectangle.fromDegrees(...this.extent),
vertexFormat: Cesium.VertexFormat.POSITION_AND_ST,
granularity: Cesium.Math.toRadians(0.0001), // 调整这个参数以增加顶点密度
height: this.minElevation,
});
const geometry = Cesium.RectangleGeometry.createGeometry(rectangle);
const attributeLocations =
Cesium.GeometryPipeline.createAttributeLocations(geometry);
const va = Cesium.VertexArray.fromGeometry({
context: context,
geometry: geometry,
attributeLocations: attributeLocations,
});
const vs = `
in vec4 position;
in vec2 st;
out vec2 v_st;
const float PI = 3.141592653589793;
const float earthRadius = 6378137.0; // WGS84 椭球体的平均半径
const float angularVelocity = 180.0 / PI;
const float RADII_X = 6378137.0;
const float RADII_Y = 6378137.0;
const float RADII_Z = 6356752.314245;
vec3 worldToGeographic(vec3 worldPosition) {
// 步骤1: 世界坐标到ECEF坐标
vec3 ecef = worldPosition; // 假设世界坐标已经是ECEF
// 步骤2: ECEF到地理坐标
float l = length(ecef.xy);
float e2 = 1.0 - (RADII_Z * RADII_Z) / (RADII_X * RADII_X);
float u = atan(ecef.z * RADII_X / (l * RADII_Z));
float lat = atan((ecef.z + e2 * RADII_Z * pow(sin(u), 3.0)) /
(l - e2 * RADII_X * pow(cos(u), 3.0)));
float lon = atan(ecef.y, ecef.x);
float N = RADII_X / sqrt(1.0 - e2 * sin(lat) * sin(lat));
float alt = l / cos(lat) - N;
// 将弧度转换为度
lat = degrees(lat);
lon = degrees(lon);
return vec3(lon, lat, alt);
}
vec3 geo2cartesian(vec3 geo){
float cosLat=cos(geo.y);
float snX=cosLat*cos(geo.x);
float snY=cosLat*sin(geo.x);
float snZ=sin(geo.y);
vec3 sn=normalize(vec3(snX,snY,snZ));
vec3 radiiSquared=vec3(40680631.59076899*1000000.,40680631.59076899*1000000.,40408299.98466144*1000000.);
vec3 sk=radiiSquared*sn;
float gamma=sqrt(dot(sn,sk));
sk=sk/gamma;
sn=sn*geo.z;
return sk+sn;
}
vec3 deg2cartesian(vec3 deg) {
vec2 radGeo=radians(deg.xy);
vec3 geo=vec3(radGeo.xy,deg.z);
return geo2cartesian(geo);
}
void main() {
float normalizedHeight = 0.0;
vec2 uv = st;
float deepwater_fadedepth = 0.5 + coast2water_fadedepth;
float height = height_map(uv);
vec3 col;
float waveheight = clamp(WATER_LEVEL * 3. - 1.5, 0., 1.);
float level = WATER_LEVEL + .2 * water_map(uv * 15. + vec2(iTime * .1), waveheight);
if(height <= level) {
normalizedHeight = level;
}else{
normalizedHeight = height; // 减少边缘拉伸的割裂感
}
float heightOffset = (maxElevation - minElevation) * normalizedHeight;
// 将顶点位置从模型空间转换到世界空间
vec4 worldPosition = czm_model * position;
// 将世界坐标转换为经纬度和高度
vec3 llh = worldToGeographic(worldPosition.xyz);
// 将调整后的经纬度和高度转换回笛卡尔坐标
vec3 adjustedCartesian = deg2cartesian(vec3(llh.xy,minElevation+heightOffset));
gl_Position = czm_projection * czm_view * vec4(adjustedCartesian,1.0);
v_st = st;
}
`;
const fs = `
in vec2 v_st;
void main(){
light = vec3(-0., .0, 2.8); // position of the sun
vec2 uv = v_st;
float deepwater_fadedepth = 0.5 + coast2water_fadedepth;
float height = height_map(uv);
vec3 col;
float waveheight = clamp(WATER_LEVEL * 3. - 1.5, 0., 1.);
float level = WATER_LEVEL + .2 * water_map(uv * 15. + vec2(iTime * .1), waveheight);
if(height <= level) {
vec2 dif = vec2(.0, .01);
vec2 pos = uv * 15. + vec2(iTime * .01);
float h1 = water_map(pos - dif, waveheight);
float h2 = water_map(pos + dif, waveheight);
float h3 = water_map(pos - dif.yx, waveheight);
float h4 = water_map(pos + dif.yx, waveheight);
vec3 normwater = normalize(vec3(h3 - h4, h1 - h2, .125)); // norm-vector of the 'bumpy' water-plane
uv += normwater.xy * .002 * (level - height);
col = vec3(1.0);
float coastfade = clamp((level - height) / coast2water_fadedepth, 0., 1.);
float coastfade2 = clamp((level - height) / deepwater_fadedepth, 0., 1.);
float intensity = col.r * .2126 + col.g * .7152 + col.b * .0722;
watercolor = mix(watercolor * intensity, watercolor2, smoothstep(0., 1., coastfade2));
vec3 r0 = vec3(uv, WATER_LEVEL);
vec3 rd = normalize(light - r0); // ray-direction to the light from water-position
float grad = dot(normwater, rd); // dot-product of norm-vector and light-direction
float specular = pow(grad, water_softlight_fact); // used for soft highlights
float specular2 = pow(grad, water_glossylight_fact); // used for glossy highlights
float gradpos = dot(vec3(0., 0., 1.), rd);
float specular1 = smoothstep(0., 1., pow(gradpos, 5.)); // used for diffusity (some darker corona around light's specular reflections...)
float watershade = test_shadow(uv, level);
watercolor *= 2.2 + watershade;
watercolor += (.2 + .8 * watershade) * ((grad - 1.0) * .5 + specular) * .25;
watercolor /= (1. + specular1 * 1.25);
watercolor += watershade * specular2 * water_specularcolor;
watercolor += watershade * coastfade * (1. - coastfade2) * (vec3(.5, .6, .7) * nautic(uv) + vec3(1., 1., 1.) * particles(uv));
col = mix(col, watercolor, coastfade);
float alpha = clamp(coastfade,0.1,0.6);
out_FragColor = vec4(col,1.0);
return;
}
}
`;
const shaderProgram = Cesium.ShaderProgram.fromCache({
context: context,
vertexShaderSource: Common + vs,
fragmentShaderSource: Common + fs,
attributeLocations: attributeLocations,
});
const texture = new Cesium.Texture({
context: context,
width: 2048.0,
height: 2048.0,
pixelFormat: Cesium.PixelFormat.RGBA,
pixelDatatype: Cesium.PixelDatatype.UNSIGNED_BYTE,
flipY: true,
sampler: new Cesium.Sampler({
minificationFilter: Cesium.TextureMinificationFilter.LINEAR,
magnificationFilter: Cesium.TextureMagnificationFilter.LINEAR,
wrapS: Cesium.TextureWrap.REPEAT,
wrapT: Cesium.TextureWrap.REPEAT,
}),
source: this.heightMap,
});
const noise = new Cesium.Texture({
context: context,
width: 512.0,
height: 512.0,
pixelFormat: Cesium.PixelFormat.RGBA,
pixelDatatype: Cesium.PixelDatatype.UNSIGNED_BYTE,
flipY: true,
sampler: new Cesium.Sampler({
minificationFilter: Cesium.TextureMinificationFilter.LINEAR,
magnificationFilter: Cesium.TextureMagnificationFilter.LINEAR,
wrapS: Cesium.TextureWrap.REPEAT,
wrapT: Cesium.TextureWrap.REPEAT,
}),
source: this.noise,
});
const uniformMap = {
heightMap: () => {
return texture;
},
heightScale: () => 1.0,
minElevation: () => this.minElevation,
maxElevation: () => this.maxElevation,
iTime: () => this.time,
iChannel0: () => noise,
coast2water_fadedepth: () => this.coast2water_fadedepth,
large_waveheight: () => this.large_waveheight, // change to adjust the "heavy" waves
large_wavesize: () => this.large_wavesize, // factor to adjust the large wave size
small_waveheight: () => this.small_waveheight, // change to adjust the small random waves
small_wavesize: () => this.small_wavesize, // factor to ajust the small wave size
water_softlight_fact: () => this.water_softlight_fact, // range [1..200] (should be << smaller than glossy-fact)
water_glossylight_fact: () => this.water_glossylight_fact, // range [1..200]
particle_amount: () => this.particle_amount,
WATER_LEVEL: () => this.WATER_LEVEL,
};
const renderState = Cesium.RenderState.fromCache({
depthTest: { enabled: true },
depthMask: { enabled: true },
blending: Cesium.BlendingState.ALPHA_BLEND,
cull: {
enabled: false,
},
});
this.drawCommand = new Cesium.DrawCommand({
modelMatrix: this.modelMatrix,
vertexArray: va,
primitiveType: Cesium.PrimitiveType.TRIANGLES, //TRIANGLES LINES
shaderProgram: shaderProgram,
uniformMap: uniformMap,
renderState: renderState,
pass: Cesium.Pass.OPAQUE,
});
}
set showLines(value) {
this._showLines = value;
this.drawCommand.primitiveType = this._showLines
? Cesium.PrimitiveType.LINES
: Cesium.PrimitiveType.TRIANGLES;
}
get showLines() {
return this._showLines;
}
async update(frameState) {
const now = performance.now();
this.deltaTime = (now - this.lastUpdateTime) / 1000.0; // 转换为秒
this.lastUpdateTime = now;
this.time = now / 1000;
this.frame += 0.02;
if (!this.drawCommand) {
this.createCommand(frameState.context);
}
frameState.commandList.push(this.drawCommand);
}
destroy() {
super.destroy();
const commondList = [this.drawCommand];
commondList.forEach((drawCommand) => {
if (drawCommand) {
const va = drawCommand.vertexArray,
sp = drawCommand.shaderProgram;
if (!va.isDestroyed()) va.destroy();
if (!sp.isDestroyed || !sp.isDestroyed()) {
sp.destroy();
}
drawCommand.isDestroyed = function returnTrue() {
return true;
};
drawCommand.uniformMap = undefined;
drawCommand.renderState = Cesium.RenderState.removeFromCache(
drawCommand.renderState
);
}
});
this.drawCommand = null;
}
}

View File

@ -14,6 +14,12 @@ var exampleConfig = {
name_en: "ba222212se",
content: [
{
name: "低空经济AI决策",
name_en: "低空经济AI决策",
thumbnail: "低空经济.jpg",
fileName: "./templates/1_uav/index.html"
},
{
name: "智慧交通",
name_en: "智慧交通",

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -0,0 +1,853 @@
/* 左侧第一个盒子start--- */
.firstBox {
width: 90%;
margin-left: 6%;
height: 90%;
}
.firstBox .pic {
width: 100%;
height: 25%;
}
.pic img {
display: inline-block;
width: 40%;
height: 80%;
margin-top: 1vw;
}
.first_top1 {
margin-left: 1vw;
}
.first_top2 {
margin-left: 1vw;
}
.picText {
color: #0EFCFF;
margin-left: 1vw;
}
.picText .text_second {
margin-left: 6vw;
}
/* 声波动画start--- */
.voice_animation {
width: 100%;
height: 20%;
margin-top: 1vw;
background-image: url(../img/voice_pic.png);
background-size: 90% 90%;
background-repeat: no-repeat;
background-position: center;
}
/* 声波动画over--- */
/* 进度条start--- */
.progress {
width: 93%;
height: 10%;
margin-top: 1vw;
margin-left: .6vw;
background-image: url(../img/progress_pic.png);
background-size: 100% 100%;
}
/* 进度条over--- */
.about_illness {
width: 100%;
height: 25%;
margin-top: 1.5vw;
margin-left: .6vw;
color: #fff;
font-size: .6vw;
}
.about_illness>div {
display: inline-block;
width: 45%;
height: 100%;
background-image: url(../img/illness_pic.png);
background-size: 100% 100%;
}
.prevent {
margin-left: .5vw;
text-indent: .2vw;
}
.symptom {
/* text-indent: .2vw; */
/* font-size: .5vw; */
}
.symptom_content,
.prevent_content {
color: #0EFCFF;
margin-top: .5vw;
margin: .6vw .2vw .2vw .5vw;
}
.symptom_title .prevent_title {
font-size: .1vw;
color: red;
}
/* 左侧第一个盒子over--- */
/* center部分start--- */
.maps {
position: relative;
width: 100%;
height: 95%;
margin-top: 2%;
/* background: pink; */
/* background-image: url(../img/landLevel.png); */
/* background-size: 95% 100%; */
/* background-repeat: no-repeat; */
/* background-position: center; */
}
.maps .land_level {
width: 95%;
height: 100%;
margin-left: 2.5%;
}
.maps .wifi_gif {
position: absolute;
right: 27%;
top: -3.5%;
width: 5%;
height: 10%;
}
.maps .sun_pic {
position: absolute;
top: -5%;
left: 18%;
width: 10%;
height: 15%;
animation: mymove 3s infinite;
-webkit-animation: mymove 3s infinite;
/*Safari and Chrome*/
animation-direction: alternate;
/*轮流反向播放动画。*/
animation-timing-function: ease-in-out;
/*动画的速度曲线*/
/* Safari 和 Chrome */
-webkit-animation: mymove 3s infinite;
-webkit-animation-direction: alternate;
/*轮流反向播放动画。*/
-webkit-animation-timing-function: ease-in-out;
}
@keyframes mymove {
0% {
transform: scale(1);
/*开始为原始大小*/
}
25% {
transform: scale(1.1);
/*放大1.1倍*/
}
50% {
transform: scale(1.05);
}
75% {
transform: scale(1);
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
0% {
transform: scale(1);
/*开始为原始大小*/
}
25% {
transform: scale(1.1);
/*放大1.1倍*/
}
50% {
transform: scale(1.05);
}
75% {
transform: scale(1);
}
}
.maps .wrj_pic {
position: absolute;
width: 8%;
height: 8%;
left: 30%;
animation: myfirst 5s infinite;
-moz-animation: myfirst 5s infinite;
/* Firefox */
-webkit-animation: myfirst 5s infinite;
/* Safari 和 Chrome */
-o-animation: myfirst 5s infinite;
/* Opera */
/* animation: btn-load-loop 1s linear infinite; */
}
@keyframes myfirst {
0% {
left: 250px;
top: 0px;
}
25% {
left: 300px;
top: 0px;
}
50% {
left: 150px;
top: 300px;
}
75% {
left: 250px;
top: 200px;
}
100% {
left: 250px;
top: 0px;
}
}
@-moz-keyframes myfirst
/* Firefox */
{
0% {
left: 250px;
top: 0px;
}
25% {
left: 300px;
top: 0px;
}
50% {
left: 500px;
top: 200px;
}
75% {
left: 250px;
top: 200px;
}
100% {
left: 250px;
top: 0px;
}
}
@-webkit-keyframes myfirst
/* Safari 和 Chrome */
{
0% {
left: 250px;
top: 0px;
}
25% {
left: 300px;
top: 0px;
}
50% {
left: 500px;
top: 200px;
}
75% {
left: 250px;
top: 200px;
}
100% {
left: 250px;
top: 0px;
}
}
@-o-keyframes myfirst
/* Opera */
{
0% {
left: 250px;
top: 0px;
}
25% {
left: 300px;
top: 0px;
}
50% {
left: 500px;
top: 200px;
}
75% {
left: 250px;
top: 200px;
}
100% {
left: 250px;
top: 0px;
}
}
.wind_gif {
position: absolute;
top: 25%;
left: 5%;
width: 10%;
height: 19%;
}
.plant_pic {
position: absolute;
top: 40%;
left: 60%;
width: 8%;
height: 10%;
}
.windows,
.window_two,
.window_three,
.window_four,
.window_five,
.window_six {
padding: 1.5%;
color: #0EFCFF;
background: rgba(40, 229, 233, .2);
}
.windows {
position: absolute;
bottom: 0;
left: 3%;
}
.windows li:nth-of-type(1) {
font-size: .9vw;
}
.windows li {
margin-bottom: .2vw;
}
.window_two {
position: absolute;
right: 5%;
/* right: 1%; */
top: 5%;
}
.window_two li:nth-of-type(1) {
font-size: .9vw;
}
.window_three {
position: absolute;
bottom: 5%;
left: 60%;
}
.window_four {
position: absolute;
top: 7%;
left: 10%;
}
.window_five {
position: absolute;
bottom: 15%;
left: 20%;
}
.window_six {
position: absolute;
/* border: 1px solid red; */
right: 40%;
top: 0%;
}
.peasant {
position: absolute;
right: 17%;
top: 27%;
width: 5.5%;
height: 9%;
cursor: pointer;
/* background-color: #fff; */
}
.display_box {
display: none;
}
.land_box1 {
position: absolute;
left: 13%;
top: 32%;
width: 13%;
height: 30%;
cursor: pointer;
}
.land_box2 {
position: absolute;
left: 45%;
top: 65%;
width: 20%;
height: 15%;
transform: rotate(150deg);
cursor: pointer;
}
.land_box3 {
position: absolute;
right: 5%;
top: 40%;
width: 20%;
height: 15%;
transform: rotate(150deg);
cursor: pointer;
}
.land_box4 {
position: absolute;
right: 41%;
top: 0%;
width: 10%;
height: 25%;
transform: rotate(140deg);
cursor: pointer;
}
.plant {
position: absolute;
top: 30%;
left: 35%;
width: 25%;
height: 30%;
cursor: pointer;
/* border: 1px solid red; */
}
.soil_data {
position: absolute;
bottom: 23%;
left: 45%;
width: 55%;
height: 10%;
transform: rotate(150deg);
}
.weather_info {
position: absolute;
top: -5%;
left: 18%;
width: 10%;
height: 15%;
}
/* center部分over--- */
/* left bottom start--- */
.leftBottom {
display: inline-block;
position: relative;
width: 32%;
height: 80%;
font-size: .6vw;
color: #0EFCFF;
}
.leftBottom .land_data p {
position: absolute;
left: 52%;
top: 14%;
}
.land_data p:nth-child(2) {
top: 24%;
left: 57%;
}
.land_data p:nth-child(3) {
top: 32%;
left: 67%;
}
.right_box {
float: right;
width: 65%;
height: 70%;
/* margin: 2%; */
margin-top: 1%;
margin-right: 1%;
/* background-color: red; */
}
.grow_data {
position: relative;
display: inline-block;
float: left;
width: 45%;
height: 100%;
/* background-color: pink; */
}
.grow_data img {
display: inline-block;
width: 20%;
height: 80%;
margin-top: .8vw;
}
.grow_data p {
color: #0EFCFF;
position: absolute;
}
.grow_data p:nth-of-type(1) {
top: 3%;
left: 5%;
}
.grow_data p:nth-of-type(2) {
top: 47%;
left: 22%;
}
.grow_data p:nth-of-type(3) {
top: 80%;
left: 5%;
}
.grow_data span {
position: absolute;
top: 18%;
left: 13%;
padding: .15vw .6vw;
border-radius: 1vw;
display: inline-block;
color: #0EFCFF;
background: rgba(40, 229, 233, .2);
}
.specialistSuggest {
position: absolute;
left: 50%;
top: -15%;
display: inline-block;
width: 30%;
padding: 1vw;
color: #0EFCFF;
font-size: .6vw;
}
.specialistSuggest div:nth-of-type(1) {
font-size: .7vw;
}
.fertilizationSuggest {
position: absolute;
left: 50%;
top: 55%;
display: inline-block;
width: 35%;
padding: 1vw;
color: #0EFCFF;
font-size: .6vw;
}
.fertilizationSuggest div:nth-of-type(1) {
font-size: .7vw;
}
.weather_data {
position: relative;
display: inline-block;
width: 50%;
height: 100%;
margin-left: 3%;
margin-top: .5%;
font-size: .6vw;
/* background-color: yellow; */
background-image: url(../img/bottom_icons.png);
background-size: 90% 80%;
background-repeat: no-repeat;
}
.weather_text {
color: #0EFCFF;
}
.weather_text span {
position: absolute;
top: 35%;
}
.weather_text span:nth-of-type(1) {
left: -5%;
}
.weather_text span:nth-of-type(2) {
left: 24%;
}
.weather_text span:nth-of-type(3) {
left: 50%;
}
.weather_text span:nth-of-type(4) {
left: 75%;
}
.text_two span {
top: 85%;
}
.text_two span:nth-of-type(1) {
left: 0%;
}
.text_two span:nth-of-type(2) {
left: 30%;
}
.text_two span:nth-of-type(3) {
left: 65%;
}
/* .text_one {
margin-top: 14%;
}
.text_two {
margin-top: 18%;
} */
/* left bottom over--- */
/* 右侧三个内容框start--- */
/* 硬件设备展示start--- */
.boxLis {
width: 68%;
z-index: 9999;
height: 1.5vw;
margin-left: 3.5vw;
margin-top: 1vw;
font-size: .6vw;
/* background-color: pink; */
border-bottom: .02vw solid rgb(40, 229, 233);
}
.boxLis>li {
/* width: 21.1%; */
/* height: 1.4vw; */
z-index: 9999;
padding: .1vw;
display: block;
background: rgba(40, 229, 233, .5);
margin-right: 2.5%;
line-height: 1.4vw;
text-align: center;
cursor: pointer;
color: #fff;
/* border-bottom: .02vw solid rgb(40, 229, 233); */
}
.boxLis li:nth-child(4) {
margin-right: 0;
}
.boxLis>.active {
/* border-bottom: none; */
/* color: #0EFCFF; */
border-top: .02vw solid rgb(40, 229, 233);
border-right: .02vw solid rgb(40, 229, 233);
border-left: .02vw solid rgb(40, 229, 233);
}
.equipment_pic {
position: relative;
width: 100%;
height: 100%;
background-color: #031426;
}
.equipment_pic img {
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 80%;
height: 80%;
}
.equipment_pic img:nth-child(2) {
display: none;
width: 45%;
height: 50%;
}
.equipment_pic img:nth-child(3) {
width: 40%;
height: 65%;
display: none;
}
.equipment_pic img:nth-child(4) {
width: 50%;
height: 70%;
display: none;
}
.liSpan {
width: 100%;
margin-top: -1%;
text-align: center;
color: rgb(40, 229, 233);
}
.liP {
width: 66%;
margin: .3vw auto 0;
text-align: left;
font-size: .6vw;
color: rgb(40, 229, 233);
}
/* 硬件设备展示over--- */
/* 灌溉数据start--- */
.irrigate_data {
width: 100%;
height: 100%;
/* background-color: yellow; */
}
.centerList {
/* float: left; */
display: inline-block;
width: 37%;
height: 80%;
padding-top: 3%;
text-align: center;
margin-left: 2vw;
}
.centerListFont {
font-size: .8vw;
color: #0EFCFF;
}
.centerListNum {
font-size: 1.5vw;
color: white;
margin-top: .2vw;
}
.irrigate_bottom {
width: 100%;
height: 40%;
margin-top: .2vw;
}
.irrigate_bottom .every_line {
width: 90%;
height: 25%;
margin-left: 5%;
margin-bottom: 3%;
background-color: rgba(14, 252, 255, .2);
}
.every_line span {
color: #0EFCFF;
margin-left: .7vw;
font-size: .7vw;
}
.every_line i {
color: #fff;
float: right;
margin-right: .8vw;
font-size: 1vw;
}
/* 灌溉数据over--- */
/* 数据日志start--- */
.data_day {
width: 100%;
height: 100%;
font-size: .55vw;
color: #fff;
}
.data_day table {
height: 10%;
width: 100%;
overflow: hidden;
text-align: center;
margin: auto;
margin-left: 5%;
}
.data_day .head {
color: #0EFCFF;
}
.data_day ul {
display: inline-block;
}
/* 数据日志over--- */
/* 右侧三个内容框over--- */

View File

@ -0,0 +1,394 @@
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
input,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
textarea,
article,
aside,
audio,
canvas,
figure,
footer,
header,
mark,
menu,
nav,
section,
time,
video {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
blockquote {
display: block;
}
ul,
ol {
list-style: none;
}
img {
border: 0 none;
vertical-align: top;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
strong,
em,
i {
font-style: normal;
font-weight: normal;
}
ins {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
mark {
background: none;
}
input::-ms-clear {
display: none !important;
}
body {
font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif;
background: #fff;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
body,
html,
.main {
width: 100%;
height: 100%
}
.main {
position: relative;
background: url(../img/bg.jpg) no-repeat;
background-size: cover;
}
.nav {
position: relative;
top: .5vw;
width: 100%;
height: 5vw;
background: url(../img/top.png) no-repeat;
background-size: 100%;
text-align: center;
line-height: 4vw;
color: #0efcff;
font-size: 1.4vw;
letter-spacing: .4vw;
}
.nav_btn {
position: absolute;
top: 1.5vw;
width: 100%;
height: 2vw;
}
.btn_left {
float: left;
width: 25%;
margin-left: 5%;
height: 100%;
}
.btn_right {
float: right;
width: 25%;
margin-right: 5%;
height: 100%;
}
.btn_list {
position: relative;
float: left;
width: 5.5vw;
height: 1.6vw;
text-align: center;
line-height: 1.6vw;
font-size: .9vw;
color: #0efcff;
letter-spacing: .1vw;
cursor: pointer;
}
.btn_left a,
.btn_right a {
display: inline-block;
}
.btn_left a:nth-child(2) {
margin: 0 .6vw;
}
.btn_left a:nth-child(4) {
margin-left: .6vw;
}
.btn_right a:nth-child(2) {
margin: 0 .6vw;
}
.btn_right a:nth-child(4) {
margin-left: .6vw;
}
.btn_list:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid #6176AF;
transform: skewX(-38deg);
}
.btn_list:hover::before {
border-color: #0efcff;
box-shadow: 1px 1px 3px 1px #0efcff inset;
}
.listActive:before {
border-color: #0efcff;
box-shadow: 1px 1px 3px 1px #0efcff inset;
}
.content {
position: relative;
width: 97%;
height: 87%;
margin: auto;
/* background: white; */
}
.baseBox {
position: relative;
float: left;
width: 48.8%;
height: 32.3%;
border: 1px solid #6176AF;
background: rgba(11, 21, 44, 0.60);
border-radius: 5px;
}
.baseHeightBox {
height: 100%;
}
.baseCenterBox {
margin: 1.5% 0;
}
.leftBox {
float: left;
height: 100%;
width: 34.5%;
/* background: yellow; */
}
.rightBox {
float: left;
height: 100%;
width: 34.5%;
}
.centerBox {
position: relative;
float: left;
width: 30%;
height: 100%;
margin: 0 .5%;
/* background: red; */
}
.marginLeft {
margin-left: 1.5%;
}
/* 边框描边 */
.leftTopLine1 {
position: absolute;
top: 0;
left: -1px;
height: 1vw;
width: 2px;
background: #0efcff;
}
.leftTopLine2 {
position: absolute;
top: -1px;
left: 0;
height: 2px;
width: 1vw;
background: #0efcff;
}
.rightTopLine1 {
position: absolute;
top: 0;
right: -1px;
height: 1vw;
width: 2px;
background: #0efcff;
}
.rightTopLine2 {
position: absolute;
top: -1px;
right: 0;
height: 2px;
width: 1vw;
background: #0efcff;
}
.leftBottomLine1 {
position: absolute;
bottom: 0;
left: -1px;
height: 1vw;
width: 2px;
background: #0efcff;
}
.leftBottomLine2 {
position: absolute;
bottom: -1px;
left: 0;
height: 2px;
width: 1vw;
background: #0efcff;
}
.rightBottomLine1 {
position: absolute;
bottom: 0;
right: -1px;
height: 1vw;
width: 2px;
background: #0efcff;
}
.rightBottomLine2 {
position: absolute;
bottom: -1px;
right: 0;
height: 2px;
width: 1vw;
background: #0efcff;
}
.boxTitle {
font-size: 1vw;
color: #0efcff;
width: 80%;
margin-left: .8vw;
margin-top: .5vw;
}
.left {
float: left;
}
.right {
font: right;
}
/* 视频新加 */
.video-js .vjs-control {
width: 1vw !important;
}
.vjs-volume-panel {
display: none !important;
}
.vjs-live-display {
display: none !important;
}
.vjs-audio-button {
display: none !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,45 @@
// 数字滚动
function numInit() {
$('.counter-value').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2500,
easing: 'swing',
step: function(now) {
$(this).text(now.toFixed(0));
}
});
});
}
function numInit1() {
$('.counter-value1').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2500,
easing: 'swing',
step: function(now) {
$(this).text(now.toFixed(1));
}
});
});
}
function numInit2() {
$('.counter-value2').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2500,
easing: 'swing',
step: function(now) {
$(this).text(now.toFixed(2));
}
});
});
}
numInit();
numInit1();
numInit2();

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

View File

@ -3,7 +3,7 @@
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css" />
@ -27,7 +27,7 @@
viewer = new Cesium.Viewer("map", {});
}
</script>
</body>