update：指定连接类型案例的修改

src/examples/visible/specifyConnectionType/specifyConnectionType-function.js

@@ -91,9 +91,153 @@ export class SpecifyConnectionType {
         });
     }
 
+    // 连接方式为圆锥
+    useCone() {
+        function createCone(viewer, satellitePositionProperty, stationPosition, color, maxDistance) {
+            return viewer.scene.primitives.add(new Cesium.Primitive({
+                geometryInstances: new Cesium.GeometryInstance({
+                    geometry: Cesium.EllipsoidGeometry.createGeometry(new Cesium.EllipsoidGeometry({
+                        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
+                        radii: new Cesium.Cartesian3(50000, 50000, 100000) // 圆锥的半径和长度
+                    })),
+                    modelMatrix: Cesium.Matrix4.IDENTITY,
+                    attributes: {
+                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(color)
+                    },
+                    id: 'Cone'
+                }),
+                appearance: new Cesium.PerInstanceColorAppearance({
+                    translucent: true,
+                    closed: false
+                }),
+                releaseGeometryInstances: false,
+                shadows: Cesium.ShadowMode.DISABLED
+            }));
+        }
+
+        // 获取测站位置
+        const stationOnePosition = Cesium.Cartesian3.fromDegrees(...this.stationOne.position);
+        const stationTwoPosition = Cesium.Cartesian3.fromDegrees(...this.stationTwo.position);
+        const stationThreePosition = Cesium.Cartesian3.fromDegrees(...this.stationThree.position);
+
+        // 最大连接显示距离
+        const maxDistance = 5000000;
+
+        // 创建圆锥
+        this.connections.push(createCone(this.viewer, this.satelliteEntity.position, stationOnePosition, Cesium.Color.BLUE, maxDistance));
+        this.connections.push(createCone(this.viewer, this.satelliteEntity.position, stationTwoPosition, Cesium.Color.GREEN, maxDistance));
+        this.connections.push(createCone(this.viewer, this.satelliteEntity.position, stationThreePosition, Cesium.Color.YELLOW, maxDistance));
+    }
+
+    // 切换圆锥的显示和隐藏
+    toggleCone() {
+        if (this.visible) {
+            this.connections.forEach(connection => {
+                this.viewer.scene.primitives.remove(connection);
+            });
+            this.connections = [];
+        } else {
+            this.useCone();
+        }
+        this.visible = !this.visible;
+    }
+
+    // 连接方式为脉冲线
+    useTransmitLine() {
+        function createConnection(viewer, satellitePositionProperty, stationPosition, color, maxDistance) {
+            const positions = new Cesium.CallbackProperty((time) => {
+                const satellitePosition = satellitePositionProperty.getValue(time);
+                const distance = Cesium.Cartesian3.distance(satellitePosition, stationPosition);
+                if (distance > maxDistance) {
+                    return []; // 返回空数组隐藏连线
+                }
+                return [satellitePosition, stationPosition];
+            }, false);
+
+            const FlowingLineMaterialGLSL =
+                "float SPEED_STEP = 0.01; \n" +
+                "vec4 drawLight(float xPos, vec2 st, float headOffset, float tailOffset, float widthOffset){ \n" +
+                "float lineLength = smoothstep(xPos + headOffset, xPos, st.x) - smoothstep(xPos, xPos - tailOffset, st.x); \n" +
+                "float lineWidth = smoothstep(widthOffset, 0.5, st.y) - smoothstep(0.5, 1.0 - widthOffset, st.y); \n" +
+                "return vec4(lineLength * lineWidth); \n" +
+                "}\n" +
+                "czm_material czm_getMaterial(czm_materialInput materialInput) \n" +
+                "{ \n" +
+                "czm_material m = czm_getDefaultMaterial(materialInput);\n" +
+                "float sinTime = sin(czm_frameNumber * SPEED_STEP * speed); \n" +
+                "vec4 v4_core;\n" +
+                "vec4 v4_color;\n" +
+                "float xPos = 0.0; \n" +
+                "if (sinTime < 0.0){ \n" +
+                "xPos = cos(czm_frameNumber * SPEED_STEP * speed)+ 1.0 - tailsize; \n" +
+                "}else{ \n" +
+                "xPos = -cos(czm_frameNumber * SPEED_STEP * speed)+ 1.0 - tailsize; \n" +
+                "} \n" +
+                "v4_color = drawLight(xPos, materialInput.st, headsize, tailsize, widthoffset);\n" +
+                "v4_core = drawLight(xPos, materialInput.st, coresize, coresize*2.0, widthoffset*2.0);\n" +
+                "m.diffuse = color.xyz + v4_core.xyz*v4_core.w*0.8; \n" +
+                "m.alpha = pow(v4_color.w, 3.0); \n" +
+                "return m; \n" +
+                "} \n";
+
+            const FlowingLineMaterial = new Cesium.Material({
+                fabric: {
+                    type: "FlowingLineMaterial",
+                    uniforms: {
+                        color: color,
+                        speed: 1.5,
+                        headsize: 0.05,
+                        tailsize: 0.5,
+                        widthoffset: 0.1,
+                        coresize: 0.05,
+                    },
+                    source: FlowingLineMaterialGLSL,
+                },
+            });
+
+            return viewer.scene.primitives.add(new Cesium.Primitive({
+                geometryInstances: new Cesium.GeometryInstance({
+                    geometry: new Cesium.PolylineGeometry({
+                        positions: positions,
+                        width: 20.0,
+                        vertexFormat: Cesium.VertexFormat.ALL,
+                    }),
+                }),
+                appearance: new Cesium.PolylineMaterialAppearance({
+                    material: FlowingLineMaterial,
+                }),
+            }));
+        }
+
+        // 获取测站位置
+        const stationOnePosition = Cesium.Cartesian3.fromDegrees(...this.stationOne.position);
+        const stationTwoPosition = Cesium.Cartesian3.fromDegrees(...this.stationTwo.position);
+        const stationThreePosition = Cesium.Cartesian3.fromDegrees(...this.stationThree.position);
+
+        // 最大连接显示距离
+        const maxDistance = 5000000;
+
+        // 创建连线
+        this.connections.push(createConnection(this.viewer, this.satelliteEntity.position, stationOnePosition, Cesium.Color.BLUE, maxDistance));
+        this.connections.push(createConnection(this.viewer, this.satelliteEntity.position, stationTwoPosition, Cesium.Color.GREEN, maxDistance));
+        this.connections.push(createConnection(this.viewer, this.satelliteEntity.position, stationThreePosition, Cesium.Color.YELLOW, maxDistance));
+    }
+
+    // 切换脉冲线的显示和隐藏
+    toggleTransmitLine() {
+        if (this.visible) {
+            this.connections.forEach(connection => {
+                this.viewer.scene.primitives.remove(connection);
+            });
+            this.connections = [];
+        } else {
+            this.useTransmitLine();
+        }
+        this.visible = !this.visible;
+    }
+
     // 连接方式为静态线
     useStaticLines() {
-        // 创建连线函数
         function createConnection(viewer, satellitePositionProperty, stationPosition, color, maxDistance) {
             return viewer.entities.add({
                 polyline: {
@@ -144,7 +288,6 @@ export class SpecifyConnectionType {
 
     // 连接方式为虚线
     useDashedLine() {
-        // 创建连线函数
         function createConnection(viewer, satellitePositionProperty, stationPosition, color, maxDistance) {
             return viewer.entities.add({
                 polyline: {

src/examples/visible/specifyConnectionType/specifyConnectionType.vue

@@ -2,11 +2,11 @@
     <div id="cesiumContainer" class="cesium-container"></div>
     <div class="btn-class">
         <button>多个起点的脉冲线</button>
-        <button>圆锥</button>
+        <button @click="cone">圆锥</button>
         <button>脉冲圆锥</button>
-        <button>一个脉冲的线</button>
-        <button @click="StaticLines">静态线</button>
-        <button @click="DashedLine">虚线</button>
+        <button @click="transmitLine">脉冲线</button>
+        <button @click="staticLines">静态线</button>
+        <button @click="dashedLine">虚线</button>
     </div>
 </template>
 
@@ -98,13 +98,23 @@ onMounted(() => {
     document.head.appendChild(link);
 });
 
+// 连接方式为脉冲圆锥类方法的调用
+function cone() {
+    satellite.toggleCone();
+}
+
+// 连接方式为脉冲线类方法的调用
+function transmitLine() {
+    satellite.toggleTransmitLine();
+}
+
 // 连接方式为静态线类方法的调用
-function StaticLines() {
+function staticLines() {
     satellite.toggleStaticLines();
 }
 
 // 连接方式为虚线类方法的调用
-function DashedLine() {
+function dashedLine() {
     satellite.toggleDashedLine();
 }
 </script>

src/views/ElementMap.js

@@ -90,7 +90,7 @@ export const elementMovingMap = {
 export const elementVisibleMap = {
     指定连接类型: {
         title: '指定连接类型',
-        pngUrl: '/src/assets/RocketLaunchIntoOrbit.png'
+        pngUrl: '/src/assets/SpecifyConnectionType.png'
     }
 }