12

src/App.vue

@@ -16,7 +16,10 @@ import qq from './components/qq.vue'
 import setl from './components/setl.vue'
 import xyz from './components/xyz.vue'
 import shiye from './components/shiye.vue'
-
+import jiguang from './components/jiguang.vue'
+import shiqushiti from './components/shiqushiti.vue'
+import kuosanquan from './components/kuosanyuan.vue'
+import relitu from './components/relitu.vue'
 
 
 //封装
@@ -26,10 +29,11 @@ import polygonq from './encapsulation/polygon.vue'
 // import station from './encapsulation/station.vue'
 import sensor from './encapsulation/sensor.vue'
 
+
 export default {
   name: 'app',
   components: {
-    boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye,
+    boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye,jiguang,shiqushiti,kuosanquan,relitu,
     point, lineq,polygonq,sensor
   }
 }
@@ -53,11 +57,15 @@ export default {
   <!-- <setl/> -->
   <!-- <shiye/> -->
   <!-- <lineq/> -->
+  <jiguang/>
+  <!-- <shiqushiti/> -->
+  <!-- <kuosanquan/> -->
+  <!-- <relitu/> -->
 
   <!-- <point/> -->
   <!-- <polygonq/> -->
   <!-- <station/> -->
-<sensor/>
+<!-- <sensor/> -->
 
 </template>
 

src/components/baozha.vue

@@ -7,65 +7,21 @@
 import { onMounted } from 'vue'
 import * as Cesium from 'cesium'
 import { ref } from 'vue'
+import ExplotEffect from '/src/js/explotEffect.js'
 
 onMounted(() => {
   Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
   const viewer = new Cesium.Viewer("cesiumContainer", {
+    terrainProvider: Cesium.createWorldTerrain()
   })
-  const modelUrl = '/src/model/卫星.gltf';
-  const modelEntity = viewer.entities.add({
-    name: "Cesium Air",
-    position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
-    model: {
-      uri: modelUrl,
-      scale: 2000.0
-    }
-  });
-
-  // Fly the camera to the model
-  viewer.flyTo(modelEntity);
-
-  // Helper function to generate a random direction vector
-  function getRandomDirection() {
-    const theta = Math.random() * 2 * Math.PI;
-    const phi = Math.acos(2 * Math.random() - 1);
-    return new Cesium.Cartesian3(
-      Math.sin(phi) * Math.cos(theta),
-      Math.sin(phi) * Math.sin(theta),
-      Math.cos(phi)
-    );
-  }
-
-  // Function to perform the explosion effect
-  function explodeModel(entity) {
-    const duration = 3000; // Explosion duration in milliseconds
-    const explosionDistance = 500; // Distance to move parts away from the center
-    const startTime = Cesium.JulianDate.now();
-    const endTime = Cesium.JulianDate.addSeconds(startTime, duration / 1000, new Cesium.JulianDate());
-
-    viewer.clock.shouldAnimate = true; // Ensure the clock is running
-
-    viewer.scene.preUpdate.addEventListener(function (scene, time) {
-      const t = Cesium.JulianDate.secondsDifference(time, startTime) / (duration / 1000);
-      if (t > 1.0) {
-        viewer.scene.preUpdate.removeEventListener(this);
-        return;
-      }
-      const distance = explosionDistance * t;
-      const direction = getRandomDirection();
-      const offset = Cesium.Cartesian3.multiplyByScalar(direction, distance, new Cesium.Cartesian3());
-      entity.position = Cesium.Cartesian3.add(
-        Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
-        offset,
-        new Cesium.Cartesian3()
-      );
-    });
-  }
-
-  // Add event listener to the explode button
-  document.getElementById('explodeButton').addEventListener('click', function () {
-    explodeModel(modelEntity);
-  });
+  let aaa = new ExplotEffect(viewer)
+  new aaa.constructor(viewer)
+
+
+
+
+
+
   // const modelUrl = '/src/model/卫星.gltf';
   // const model = viewer.entities.add({
   //   name: "Cesium Air",

src/components/boom.vue

@@ -7,9 +7,9 @@
 import { onMounted } from 'vue'
 import * as Cesium from 'cesium'
 import { ref } from 'vue'
-import { explotEffect } from '../js/explotEffect.js';
+// import { explotEffect } from '../js/explotEffect.js';
 import Entity from 'cesium/Source/DataSources/Entity';
-import { smokeEffect } from '../js/smokeEffect.js'
+// import { smokeEffect } from '../js/smokeEffect.js'
 
 onMounted(() => {
   Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'

src/components/jiguang.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+// import LineFlowMaterialProperty from '/src/js/lineFlowMaterialProperty.js'
+
+import PolylineTrailLinkMaterialProperty from '/src/js/PolylineTrailLinkMaterialProperty.js'
+
+let viewer;
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  viewer = new Cesium.Viewer("cesiumContainer", {
+  })
+  let line = viewer.entities.add({
+    name: 'PolylineTrailLink',
+    polyline: {
+      positions: Cesium.Cartesian3.fromDegreesArray([
+        120,
+        34.5,
+        121,
+        34.6,
+        113.5,
+        34.7,
+        113.5,
+        34.8,
+        113.5,
+        34.9,
+
+      ]),
+      width: 1,
+      material: new PolylineTrailLinkMaterialProperty(
+        '/src/image/流动.png', Cesium.Color.fromBytes(0, 255, 0).withAlpha(0.8),
+        1000
+      ),
+    },
+  });
+
+  viewer.flyTo(line);
+
+
+  // // 创建动态线
+  // var polyline = viewer.entities.add({
+  //   polyline: {
+  //     positions: Cesium.Cartesian3.fromDegreesArrayHeights([0, 0, 0, 10, 0, 10]), // 初始位置
+  //     width: 5,
+  //     material: Cesium.Color.YELLOW.withAlpha(0.1),
+  //     depthFailMaterial: Cesium.Color.YELLOW
+  //   }
+  // });
+
+//   // 随机竖直飞线
+//   lineFlowInit(viewer, [113.9236839, 22.528061], 120);
+
+
+//   /**
+//    * @description: 竖直随机飞线初始化
+//    * @param {*} _viewer
+//    * @param {*} _center ：中心点
+//    * @param {*} _num ：数量
+//    * @return {*}
+//    */
+//   function lineFlowInit(_viewer, _center, _num) {
+//     let _positions = generateRandomPosition(_center, _num);
+//     _positions.forEach(item => {
+//       // 经纬度
+//       let start_lon = item[0];
+//       let start_lat = item[1];
+
+//       let startPoint = new Cesium.Cartesian3.fromDegrees(start_lon, start_lat, 0);
+
+//       // 随机高度
+//       let height = 5000 * Math.random();
+//       let endPoint = new Cesium.Cartesian3.fromDegrees(start_lon, start_lat, height);
+//       let linePositions = [];
+//       linePositions.push(startPoint);
+//       linePositions.push(endPoint);
+//       _viewer.entities.add({
+//         polyline: {
+//           positions: linePositions,
+//           material: new LineFlowMaterialProperty({
+//             color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
+//             speed: 15 * Math.random(),
+//             percent: 0.1,
+//             gradient: 0.01
+//           })
+//         }
+//       })
+//     })
+//   }
+//   /**
+//  * @description: 产生随机点
+//  * @param {*} position：中心点坐标
+//  * @param {*} num：随机点数量
+//  * @return {*}
+//  */
+//   function generateRandomPosition(position, num) {
+//     let list = []
+//     for (let i = 0; i < num; i++) {
+//       // random产生的随机数范围是0-1，需要加上正负模拟
+//       let lon = position[0] + Math.random() * 0.04 * (i % 2 == 0 ? 1 : -1);
+//       let lat = position[1] + Math.random() * 0.04 * (i % 2 == 0 ? 1 : -1);
+//       list.push([lon, lat])
+//     }
+//     return list
+//   }
+
+
+
+})
+
+
+
+
+</script>
+
+
+
+<style></style>

src/components/kuosanyuan.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+
+
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+  })
+
+  let minR1 = 4000,
+    minR2 = 4000; // 最小半径
+  let maxR1 = 600000,
+    maxR2 = 600000; // 最大半径
+  let deviationR1 = 4000,
+    deviationR2 = 4000; // 每次增加的半径
+  const changeR1 = () => {
+    minR1 += deviationR1;
+    if (minR1 >= maxR1) {
+      minR1 = 4000;
+    }
+    return minR1;
+  };
+  const changeR2 = () => {
+    minR2 += deviationR2;
+    if (minR2 >= maxR2) {
+      minR2 = 4000;
+    }
+    return minR2;
+  };
+  viewer.entities.add({
+    position: Cesium.Cartesian3.fromDegrees(104, 31),
+    ellipse: {
+      semiMinorAxis: new Cesium.CallbackProperty(changeR1, false),
+      semiMajorAxis: new Cesium.CallbackProperty(changeR2, false),
+      outline: true,
+      outlineColor: new Cesium.CallbackProperty(() => {
+        let x = 1 - minR1 / maxR1;
+        return Cesium.Color.RED.withAlpha(x);
+      }, false),
+      material: new Cesium.ImageMaterialProperty({
+        image: "/src/image/redCircle.png",
+        repeat: new Cesium.Cartesian2(1.0, 1.0),
+        transparent: true,
+        color: new Cesium.CallbackProperty(function () {
+          var alp = 1;
+          alp = 1 - minR1 / maxR1;
+          return Cesium.Color.WHITESMOKE.withAlpha(alp);
+        }, false),
+      }),
+    },
+  });
+
+})
+
+
+
+
+</script>
+<style></style>

src/components/relitu.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+
+
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+  })
+
+  var gravityData = [
+    {
+      position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), // 示例坐标
+      value: 100.0 // 示例重力异常值
+    },
+    // ... 更多点
+  ];
+
+  var pointPrimitive = viewer.scene.primitives.add(Cesium.Primitive.createPoints({
+    attributes: new Cesium.BoundingSphereGeometryAttributes({
+      position: new Cesium.PositionPropertyCollection(gravityData)
+    }),
+    color: Cesium.Color.fromRandom(),
+    size: 10
+  }));
+
+  // 更新画面的渲染并添加图层
+  viewer.scene.requestRender();
+
+})
+
+
+
+
+</script>
+<style></style>

src/components/shiqushiti.vue

+<template>
+  <div id="cesiumContainer" class="all"></div>
+
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as Cesium from 'cesium'
+
+
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
+  const viewer = new Cesium.Viewer("cesiumContainer", {
+  })
+
+  const greenPoint = viewer.entities.add({
+    name: "Green point",
+    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0),
+    point: {
+      color: Cesium.Color.GREEN,
+      pixelSize: 10,
+    },
+  });
+
+  let pick = null;
+  let leftDownFlag = false;
+  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+
+  handler.setInputAction(e => {
+    pick = viewer.scene.pick(e.position);
+    // console.log("pick:", pick)
+    if (Cesium.defined(pick) && (pick.id.id)) {
+      leftDownFlag = true;
+
+      viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
+      viewer.scene.screenSpaceCameraController.enableZoom = false;//锁定缩放
+    }
+  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+  handler.setInputAction(e => {
+    if (Cesium.defined(pick) && leftDownFlag) {
+      let ray = viewer.camera.getPickRay(e.endPosition);
+      let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+      // console.log("cartesian:", cartesian)
+      pick.id.position = new Cesium.CallbackProperty(() => {
+        return cartesian
+      }, false);//防止移动闪烁;;
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+  handler.setInputAction(e => {
+    if (leftDownFlag && pick) {
+      leftDownFlag = false;
+      viewer.scene.screenSpaceCameraController.enableRotate = true;//解锁相机
+      viewer.scene.screenSpaceCameraController.enableZoom = true;//允许缩放
+
+    }
+  }, Cesium.ScreenSpaceEventType.LEFT_UP);
+
+})
+
+
+
+
+</script>
+<style></style>

src/js/PolylineTrailLinkMaterialProperty.js

+ 
+import { Color, defined, Event, Material, Property } from 'cesium'
+ 
+const PolylineTrailLinkType = 'PolylineTrailLink'
+//time用于控制时间，值越小，速度越快，colorImage控制纹理样式，
+// vec4 sampledColor = texture2D(image, vec2(fract(3.0*st.s - time), st.t));
+//3.0代表纹理个数，st.t纵向，st.s横向，-time代表逆时针，+time代表顺时针
+const PolylineTrailLinkSource = /* glsl */`
+czm_material czm_getMaterial(czm_materialInput materialInput) 
+{
+  czm_material material = czm_getDefaultMaterial(materialInput);
+  vec2 st = materialInput.st;
+  vec4 sampledColor = texture2D(image, vec2(fract(3.0*st.s - time), st.t));
+  material.alpha = sampledColor.a * color.a;
+  material.diffuse = (sampledColor.rgb + color.rgb) / 2.0;
+  return material;
+}
+`
+ 
+class PolylineTrailLinkMaterialProperty {
+  /**
+   * 构造方法
+   * @param {String} image 图片路径，确保为程序能访问到的正常 URL
+   * @param {Cesium.Color} [color] 颜色，默认白色
+   * @param {Number} [duration] 持续时间（毫秒），默认1000
+   */
+  constructor(image, color = Color.WHITE, duration = 1000) {
+    this._definitionChanged = new Event()
+    this._color = undefined
+    this._colorSubscription = undefined
+    this.color = color
+    this.duration = duration
+    this._time = new Date().getTime()
+    this.image = image
+ 
+    Material._materialCache.addMaterial(PolylineTrailLinkType, {
+      fabric: {
+        type: PolylineTrailLinkType,
+        uniforms: {
+          color: color.withAlpha(0.5), // 设为半透明
+          image: image,
+          time: 0
+        },
+        source: PolylineTrailLinkSource
+      },
+      translucent: () => true
+    })
+  }
+ 
+  get isConstant() {
+    return false
+  }
+ 
+  get definitionChanged() {
+    return this._definitionChanged
+  }
+ 
+  getType(_) {
+    return PolylineTrailLinkType
+  }
+ 
+  getValue(time, result) {
+    if (!defined(result)) {
+      result = {}
+    }
+    result.color = Property.getValueOrClonedDefault(this._color, time, Color.WHITE, result.color)
+    result.image = this.image
+    result.time = (new Date().getTime() - this._time) % this.duration / this.duration
+    return result
+  }
+ 
+  equals(other) {
+    return this === other ||
+      (other instanceof PolylineTrailLinkMaterialProperty && Property.equals(this._color, other._color))
+  }
+}
+ 
+export default PolylineTrailLinkMaterialProperty
\ No newline at end of file

src/js/explotEffect.js

 //爆炸特效
 import * as Cesium from 'cesium'
-export  class explotEffect{
+class ExplotEffect{
   constructor(viewer) {
     this.viewer=viewer
     this.viewModel={
@@ -130,3 +130,4 @@ export  class explotEffect{
   }
 
 }
+export default ExplotEffect;

src/js/lineFlowMaterialProperty.js

+import * as Cesium from 'cesium'
+/*
+ * @Description: 飞线效果（参考开源代码）
+ * @Version: 1.0
+ * @Author: Julian
+ * @Date: 2022-03-05 16:13:21
+ * @LastEditors: Julian
+ * @LastEditTime: 2022-03-05 17:39:38
+ */
+class LineFlowMaterialProperty {
+    constructor(options) {
+        this._definitionChanged = new Cesium.Event();
+        this._color = undefined;
+        this._speed = undefined;
+        this._percent = undefined;
+        this._gradient = undefined;
+        this.color = options.color;
+        this.speed = options.speed;
+        this.percent = options.percent;
+        this.gradient = options.gradient;
+    };
+
+    get isConstant() {
+        return false;
+    }
+
+    get definitionChanged() {
+        return this._definitionChanged;
+    }
+
+    getType(time) {
+        return Cesium.Material.LineFlowMaterialType;
+    }
+
+    getValue(time, result) {
+        if (!Cesium.defined(result)) {
+            result = {};
+        }
+
+        result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
+        result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 5.0, result.speed);
+        result.percent = Cesium.Property.getValueOrDefault(this._percent, time, 0.1, result.percent);
+        result.gradient = Cesium.Property.getValueOrDefault(this._gradient, time, 0.01, result.gradient);
+        return result
+    }
+
+    equals(other) {
+        return (this === other ||
+            (other instanceof LineFlowMaterialProperty &&
+                Cesium.Property.equals(this._color, other._color) &&
+                Cesium.Property.equals(this._speed, other._speed) &&
+                Cesium.Property.equals(this._percent, other._percent) &&
+                Cesium.Property.equals(this._gradient, other._gradient))
+        )
+    }
+}
+
+Object.defineProperties(LineFlowMaterialProperty.prototype, {
+    color: Cesium.createPropertyDescriptor('color'),
+    speed: Cesium.createPropertyDescriptor('speed'),
+    percent: Cesium.createPropertyDescriptor('percent'),
+    gradient: Cesium.createPropertyDescriptor('gradient'),
+})
+
+Cesium.LineFlowMaterialProperty = LineFlowMaterialProperty;
+Cesium.Material.LineFlowMaterialProperty = 'LineFlowMaterialProperty';
+Cesium.Material.LineFlowMaterialType = 'LineFlowMaterialType';
+Cesium.Material.LineFlowMaterialSource =
+    `
+    uniform vec4 color;
+    uniform float speed;
+    uniform float percent;
+    uniform float gradient;
+    
+    czm_material czm_getMaterial(czm_materialInput materialInput){
+      czm_material material = czm_getDefaultMaterial(materialInput);
+      vec2 st = materialInput.st;
+      float t =fract(czm_frameNumber * speed / 1000.0);
+      t *= (1.0 + percent);
+      float alpha = smoothstep(t- percent, t, st.s) * step(-t, -st.s);
+      alpha += gradient;
+      material.diffuse = color.rgb;
+      material.alpha = alpha;
+      return material;
+    }
+    `
+
+Cesium.Material._materialCache.addMaterial(Cesium.Material.LineFlowMaterialType, {
+    fabric: {
+        type: Cesium.Material.LineFlowMaterialType,
+        uniforms: {
+            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+            speed: 10.0,
+            percent: 0.1,
+            gradient: 0.01
+        },
+        source: Cesium.Material.LineFlowMaterialSource
+    },
+    translucent: function(material) {
+        return true;
+    }
+})
+export default LineFlowMaterialProperty;
\ No newline at end of file