低空经济AI决策

.gitignore

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

examples/cesiumEx/5.3.3、移动的视锥体.html

@@ -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),
+            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;
+
+            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
             );
 
-        // 创建视锥体及轮廓线
-        function addFrustum(position, orientation, fov, near, far, aspectRatio) {
-            let frustum = new Cesium.PerspectiveFrustum({
+            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>
 

examples/cesiumEx/Erosion.js

@@ -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;
+  }
+}

examples/cesiumEx/config.js

@@ -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: "智慧交通",

examples/cesiumEx/templates/1_uav/css/new_index.css

@@ -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--- */

examples/cesiumEx/templates/1_uav/css/reset.css

@@ -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;
+}

examples/cesiumEx/templates/1_uav/js/dataScoll.js

@@ -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();