add ditect range

src/views/simulation/index.vue

@@ -94,18 +94,18 @@ export default {
       showLayers: null,
       timeDataArray: ['Time 1', 'Time 2', 'Time 3', 'Time 4'],
       jsonData: null,
-      mapNavOptions: {     
-            // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.     
-            defaultResetView: this.Cesium.Cartographic.fromDegrees(110, 30, 2000000),           
-            // 罗盘     
-            enableCompass: true,     
-            // 缩放控件     
-            enableZoomControls: false,     
-            // 距离图例     
-            enableDistanceLegend: true,     
-            // 指南针外环     
-            enableCompassOuterRing: true 
-        }
+      mapNavOptions: {
+        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.     
+        defaultResetView: this.Cesium.Cartographic.fromDegrees(110, 30, 2000000),
+        // 罗盘     
+        enableCompass: true,
+        // 缩放控件     
+        enableZoomControls: false,
+        // 距离图例     
+        enableDistanceLegend: true,
+        // 指南针外环     
+        enableCompassOuterRing: true
+      }
     };
   },
   watch: {
@@ -600,49 +600,118 @@ export default {
         color = 'Blue'
         modelUrl = satelliteModel
       }
-      this.viewer2D.entities.add({
-        id: this.id,
-        position: position,
-        point: {
-          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
-          color: this.Cesium.Color.fromCssColorString(color)
-        },
-        model: {
-          uri: modelUrl, // 替换为你的3D模型文件路径
-          scale: 1.0, // 调整3D模型的缩放大小
-          minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
-        },
-        label: {
-          text: type + ' ' + name,
-          show: true,
-          font: "18px Helvetica", // 调整标签的字体样式和大小
-          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
-        }
-      });
-      this.viewer3D.entities.add({
-        id: this.id,
-        position: position,
-        point: {
-          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
-          color: this.Cesium.Color.fromCssColorString(color)
-        },
-        model: {
-          uri: modelUrl, // 替换为你的3D模型文件路径
-          scale: 1.0, // 调整3D模型的缩放大小
-          minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
-        },
-        label: {
-          text: type + ' ' + name,
-          show: true,
-          font: "18px Helvetica", // 调整标签的字体样式和大小
-          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
-        }
-      });
-      this.nameIdList.push({
-        id: this.id,
-        name: name
-      })
-      this.id++;
+      if (type == 'blue') {
+        console.log(' radar!!!');
+        const range = 100000;
+        this.viewer2D.entities.add({
+          id: this.id,
+          position: position,
+          ellipsoid: {
+            radii: new this.Cesium.Cartesian3(range, range, range),
+            material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
+            outline: true,
+            outlineColor: this.Cesium.Color.GREEN,
+          },
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.viewer3D.entities.add({
+          id: this.id,
+          position: position,
+          //         cylinder: {
+          //   length: range * 2,
+          //   topRadius: 0,
+          //   bottomRadius: range,
+          //   material: this.Cesium.Color.RED.withAlpha(0.5), // 设置锥体的颜色和透明度
+          //   outline: true,
+          //   outlineColor: this.Cesium.Color.RED,
+          // },
+          ellipsoid: {
+            radii: new this.Cesium.Cartesian3(range, range, range),
+            material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
+            outline: true,
+            outlineColor: this.Cesium.Color.GREEN,
+          },
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.nameIdList.push({
+          id: this.id,
+          name: name
+        })
+        this.id++;
+      }
+      else {
+        this.viewer2D.entities.add({
+          id: this.id,
+          position: position,
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.viewer3D.entities.add({
+          id: this.id,
+          position: position,
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.nameIdList.push({
+          id: this.id,
+          name: name
+        })
+        this.id++;
+      }
     },
     // 从鼠标点击事件获取坐标
     getCoordinatesFromEvent(event) {
@@ -690,7 +759,7 @@ export default {
         }
       });
     },
-    markSatelliteLine(position1, position2, color,viewer) {
+    markSatelliteLine(position1, position2, color, viewer) {
 
       // 创建一个带有箭头图标的PolylineMaterial
       const material = new this.Cesium.PolylineArrowMaterialProperty(
@@ -766,10 +835,10 @@ export default {
       //     console.log('res :>> ', res);
       //   })
       const config = {
-  timeout: 0 // 设置超时时间为0，表示忽略超时问题
-};
+        timeout: 0 // 设置超时时间为0，表示忽略超时问题
+      };
       await axios
-        .post("/api/traj", this.jsonData,config).then(res => {
+        .post("/api/traj", this.jsonData, config).then(res => {
           console.log('res :>> ', res);
           let data = res.data[1].data[0]
           for (let key in data) {
@@ -783,6 +852,7 @@ export default {
             }
             // 新建卫星实体
             if (isSatellite) {
+              let range = 1200000
               console.log('key :>> ', key);
               let x = parseFloat(data[key].x) * 1000
               let y = parseFloat(data[key].y) * 1000
@@ -796,6 +866,14 @@ export default {
                   pixelSize: 12, // 调整点的大小，可以增大点的像素大小
                   color: this.Cesium.Color.fromCssColorString('Blue')
                 },
+                cylinder: {
+                  length: range, // 锥形的高度，可以根据需要调整
+                  topRadius: 0,
+                  bottomRadius: range / 2,
+                  material: this.Cesium.Color.BLUE.withAlpha(0.5), // 设置锥形的颜色和透明度
+                  outline: true,
+                  outlineColor: this.Cesium.Color.BLUE,
+                },
                 model: {
                   uri: satelliteModel, // 替换为你的3D模型文件路径
                   scale: 1.0, // 调整3D模型的缩放大小
@@ -808,6 +886,7 @@ export default {
                   pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
                 }
               });
+
               this.viewer3D.entities.add({
                 id: this.id,
                 position: position,
@@ -815,6 +894,14 @@ export default {
                   pixelSize: 12, // 调整点的大小，可以增大点的像素大小
                   color: this.Cesium.Color.fromCssColorString('Blue')
                 },
+                cylinder: {
+                  length: range, // 锥形的高度，可以根据需要调整
+                  topRadius: 0,
+                  bottomRadius: range / 2,
+                  material: this.Cesium.Color.BLUE.withAlpha(0.5), // 设置锥形的颜色和透明度
+                  outline: true,
+                  outlineColor: this.Cesium.Color.BLUE,
+                },
                 model: {
                   uri: satelliteModel, // 替换为你的3D模型文件路径
                   scale: 1.0, // 调整3D模型的缩放大小
@@ -825,7 +912,7 @@ export default {
                   show: true,
                   font: "18px Helvetica", // 调整标签的字体样式和大小
                   pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
-                }
+                },
               });
               this.nameIdList.push({
                 id: this.id,
@@ -896,7 +983,7 @@ export default {
       entity.orientation = new this.Cesium.VelocityOrientationProperty(entity.position);
       //设置实体位置
       entity.position.setValue(position)
-      this.markSatelliteLine(oldPosition,position,'Blue',viewer)
+      this.markSatelliteLine(oldPosition, position, 'Blue', viewer)
     }
   }
 };
@@ -1046,12 +1133,12 @@ export default {
 
 /* 罗盘样式 */
 /deep/.compass {
-    pointer-events: auto;
-    position: absolute;
-    right: 0px;
-    top: 280px;
-    width: 95px;
-    height: 95px;
-    overflow: hidden;
+  pointer-events: auto;
+  position: absolute;
+  right: 0px;
+  top: 280px;
+  width: 95px;
+  height: 95px;
+  overflow: hidden;
 }
 </style>

src/views/situation/index.vue

@@ -83,9 +83,9 @@ export default {
   },
   data() {
     return {
-      save : false,
+      save: false,
       situation: [],
-      nameIdList:[],
+      nameIdList: [],
       websocket: null,
       leftwidth: 12,
       unit: [],
@@ -112,18 +112,18 @@ export default {
       modeltooltip: null,
       id: 1,
       jsonData: null,
-      mapNavOptions: {     
-            // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.     
-            defaultResetView: this.Cesium.Cartographic.fromDegrees(110, 30, 2000000),           
-            // 罗盘     
-            enableCompass: true,     
-            // 缩放控件     
-            enableZoomControls: false,     
-            // 距离图例     
-            enableDistanceLegend: true,     
-            // 指南针外环     
-            enableCompassOuterRing: true 
-        }
+      mapNavOptions: {
+        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.     
+        defaultResetView: this.Cesium.Cartographic.fromDegrees(110, 30, 2000000),
+        // 罗盘     
+        enableCompass: true,
+        // 缩放控件     
+        enableZoomControls: false,
+        // 距离图例     
+        enableDistanceLegend: true,
+        // 指南针外环     
+        enableCompassOuterRing: true
+      }
     };
   },
   watch: {
@@ -182,22 +182,22 @@ export default {
       };
     },
     async saveJson() {
-      if(this.save){
+      if (this.save) {
         const jsonData = JSON.stringify(this.jsonData);
-            const blob = new Blob([jsonData], { type: 'application/json' });
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = this.jsonData.xdname + '.json';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+        const blob = new Blob([jsonData], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = this.jsonData.xdname + '.json';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
       }
-      else{
+      else {
         this.$message("请先导入想定文件！！！")
       }
-    
-   
+
+
       // await axios
       //   .post("http://localhost:8084/admin/online/onlineOperation/updateDatasource/main", {
       //     params: {
@@ -344,70 +344,70 @@ export default {
       //   satellite: satellite,
       //   center: center
       // };
-     let fileInfoStr = row.xdfile;
-     let fileInfoArr = JSON.parse(fileInfoStr);
+      let fileInfoStr = row.xdfile;
+      let fileInfoArr = JSON.parse(fileInfoStr);
       await axios
-          .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
-            params: {
-              datasourceId: "1656243335922192384",
-              fieldName: "xdfile",
-              asImage: false,
-              dataId: row.id,
-              filename: fileInfoArr[0].filename,
-              Authorization: getToken(),
-              MenuId: "1656244747347431424"
-            }
-          })
-          .then((response) => {
-            console.log('response.data :>> ', response.data);
-            // // 处理成功的响应
-            // jsonData = response.data
-            blueunit = response.data.blueunit
-            redunit = response.data.redunit
-            satellite = response.data.satellite
-            center = response.data.center
-            this.save = true
-                this.jsonData = {
-        id: row.id,
-        xdname: row.xdname,
-        type: row.type,
-        createtime: row.createtime,
-        bluecnt: row.bluecnt,
-        target: row.target,
-        starttime: row.starttime,
-        endtime: row.endtime,
-        steptime: row.steptime,
-        blueunit: blueunit,
-        redunit: redunit,
-        satellite: satellite,
-        center: center
-      }
-          })
-          .catch((error) => {
-            // 处理错误
-            console.error(error);
-          });
-      
-      for(let i =0;i<blueunit.length;i++){
-        this.markLocationbyJson(parseFloat(blueunit[i].pos.lat),parseFloat(blueunit[i].pos.lon),parseFloat(blueunit[i].pos.height),blueunit[i].name,"blue")
+        .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
+          params: {
+            datasourceId: "1656243335922192384",
+            fieldName: "xdfile",
+            asImage: false,
+            dataId: row.id,
+            filename: fileInfoArr[0].filename,
+            Authorization: getToken(),
+            MenuId: "1656244747347431424"
+          }
+        })
+        .then((response) => {
+          console.log('response.data :>> ', response.data);
+          // // 处理成功的响应
+          // jsonData = response.data
+          blueunit = response.data.blueunit
+          redunit = response.data.redunit
+          satellite = response.data.satellite
+          center = response.data.center
+          this.save = true
+          this.jsonData = {
+            id: row.id,
+            xdname: row.xdname,
+            type: row.type,
+            createtime: row.createtime,
+            bluecnt: row.bluecnt,
+            target: row.target,
+            starttime: row.starttime,
+            endtime: row.endtime,
+            steptime: row.steptime,
+            blueunit: blueunit,
+            redunit: redunit,
+            satellite: satellite,
+            center: center
+          }
+        })
+        .catch((error) => {
+          // 处理错误
+          console.error(error);
+        });
+
+      for (let i = 0; i < blueunit.length; i++) {
+        this.markLocationbyJson(parseFloat(blueunit[i].pos.lat), parseFloat(blueunit[i].pos.lon), parseFloat(blueunit[i].pos.height), blueunit[i].name, "blue")
       }
-      for(let i = 0;i<center.length;i++){
+      for (let i = 0; i < center.length; i++) {
         let item = center[i]
-        this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat),parseFloat(item[center[i].name].properties.lon),parseFloat(item[center[i].name].properties.h),item.name,"center")
+        this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat), parseFloat(item[center[i].name].properties.lon), parseFloat(item[center[i].name].properties.h), item.name, "center")
       }
-      for(let i = 0;i<redunit.length;i++){
-        this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat),parseFloat(redunit[i].component_movementjson.properties.launch_lon),parseFloat(redunit[i].component_movementjson.properties.launch_h),redunit[i].name,"red")
+      for (let i = 0; i < redunit.length; i++) {
+        this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat), parseFloat(redunit[i].component_movementjson.properties.launch_lon), parseFloat(redunit[i].component_movementjson.properties.launch_h), redunit[i].name, "red")
         let point1 = {
-          longitude : parseFloat(redunit[i].component_movementjson.properties.launch_lon),
-          latitude : parseFloat(redunit[i].component_movementjson.properties.launch_lat),
-          height :parseFloat(redunit[i].component_movementjson.properties.launch_h)
+          longitude: parseFloat(redunit[i].component_movementjson.properties.launch_lon),
+          latitude: parseFloat(redunit[i].component_movementjson.properties.launch_lat),
+          height: parseFloat(redunit[i].component_movementjson.properties.launch_h)
         }
         let point2 = {
-          longitude : parseFloat(redunit[i].component_movementjson.properties.target_lon),
-          latitude : parseFloat(redunit[i].component_movementjson.properties.target_lat),
-          height : parseFloat(redunit[i].component_movementjson.properties.target_h)
+          longitude: parseFloat(redunit[i].component_movementjson.properties.target_lon),
+          latitude: parseFloat(redunit[i].component_movementjson.properties.target_lat),
+          height: parseFloat(redunit[i].component_movementjson.properties.target_h)
         }
-        this.markLine(point1,point2,"red")
+        this.markLine(point1, point2, "red")
       }
     },
     //获取所有数据
@@ -650,7 +650,7 @@ export default {
     /* 地图放大 */
     big() {
       let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
-      let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
       // 镜头拉进
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height / 1.8),
@@ -668,7 +668,7 @@ export default {
       });
     },
     home() {
-      let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
         duration: 2.0
@@ -696,23 +696,23 @@ export default {
     },
     //显示鼠标经纬度
     getMouseLocation(event) {
-      let {longitude,latitude} = this.getCoordinatesFromEvent(event);
-      this.$store.commit("app/setMouseLocation",{longitude,latitude});
+      let { longitude, latitude } = this.getCoordinatesFromEvent(event);
+      this.$store.commit("app/setMouseLocation", { longitude, latitude });
     },
-    /*根据camera高度近似计算当前层级*/ 
-    heightToZoom(height){ 
-      var A = 40487.57; 
-      var B = 0.00007096758; 
-      var C = 91610.74; 
-      var D = -40467.74; 
-      return Math.round(D+(A-D)/(1+Math.pow(height/C, B))); 
+    /*根据camera高度近似计算当前层级*/
+    heightToZoom(height) {
+      var A = 40487.57;
+      var B = 0.00007096758;
+      var C = 91610.74;
+      var D = -40467.74;
+      return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
     },
-    getCammeraHeightAndZoom(){
+    getCammeraHeightAndZoom() {
       let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
       //获取当前相机高度 
-      let height = viewer.camera.positionCartographic.height; 
-      let zoom = this.heightToZoom(height); 
-      this.$store.commit("app/setCameraHeightAndZoom",{height,zoom});
+      let height = viewer.camera.positionCartographic.height;
+      let zoom = this.heightToZoom(height);
+      this.$store.commit("app/setCameraHeightAndZoom", { height, zoom });
     },
     selectModel(cursorStyle, image, info) {
       console.log('image :>> ', image);
@@ -780,66 +780,136 @@ export default {
       });
       this.id++;
     },
-    markLocationbyJson(latitude, longitude,height,name,type) {
-      const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude,height);
+    markLocationbyJson(latitude, longitude, height, name, type) {
+      const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
       console.log('position :>> ', position);
       let color = ''
       let modelUrl = ''
-      if(type=='red'){
+      if (type == 'red') {
         color = 'Red'
-        modelUrl= missileModel
+        modelUrl = missileModel
       }
-      else if(type=='blue'){
+      else if (type == 'blue') {
         color = 'Blue'
         modelUrl = radarModel
       }
-      else if(type=='center'){
+      else if (type == 'center') {
         color = 'Blue'
         modelUrl = centerModel
       }
-      this.viewer2D.entities.add({
-        id: this.id,
-        position: position,
-        point: {
-          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
-          color: this.Cesium.Color.fromCssColorString(color)
-        },
-        // model: {
-        //   uri: modelUrl, // 替换为你的3D模型文件路径
-        //   scale: 1.0, // 调整3D模型的缩放大小
-        //   minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
-        // },
-        label: {
-          text: type+' '+name,
-          show: true,
-          font: "18px Helvetica", // 调整标签的字体样式和大小
-          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
-        }
-      });
-      this.viewer3D.entities.add({
-        id: this.id,
-        position: position,
-        point: {
-          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
-          color: this.Cesium.Color.fromCssColorString(color)
-        },
-        model: {
-          uri: modelUrl, // 替换为你的3D模型文件路径
-          scale: 1.0, // 调整3D模型的缩放大小
-          minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
-        },
-        label: {
-          text: type+' '+name,
-          show: true,
-          font: "18px Helvetica", // 调整标签的字体样式和大小
-          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
-        }
-      });
-      this.nameIdList.push({
-        id: this.id,
-        name: name
-      })
-      this.id++;
+      if (type == 'blue') {
+        console.log(' radar!!!');
+        const range = 100000;
+        this.viewer2D.entities.add({
+          id: this.id,
+          position: position,
+          ellipsoid: {
+    radii: new this.Cesium.Cartesian3(range, range, range),
+    material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
+    outline: true,
+    outlineColor: this.Cesium.Color.GREEN,
+  },
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.viewer3D.entities.add({
+          id: this.id,
+          position: position,
+  //         cylinder: {
+  //   length: range * 2,
+  //   topRadius: 0,
+  //   bottomRadius: range,
+  //   material: this.Cesium.Color.RED.withAlpha(0.5), // 设置锥体的颜色和透明度
+  //   outline: true,
+  //   outlineColor: this.Cesium.Color.RED,
+  // },
+  ellipsoid: {
+    radii: new this.Cesium.Cartesian3(range, range, range),
+    material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
+    outline: true,
+    outlineColor: this.Cesium.Color.GREEN,
+  },
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.nameIdList.push({
+          id: this.id,
+          name: name
+        })
+        this.id++;
+      }
+      else {
+        this.viewer2D.entities.add({
+          id: this.id,
+          position: position,
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.viewer3D.entities.add({
+          id: this.id,
+          position: position,
+          point: {
+            pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+            color: this.Cesium.Color.fromCssColorString(color)
+          },
+          model: {
+            uri: modelUrl, // 替换为你的3D模型文件路径
+            scale: 1.0, // 调整3D模型的缩放大小
+            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          },
+          label: {
+            text: type + ' ' + name,
+            show: true,
+            font: "18px Helvetica", // 调整标签的字体样式和大小
+            pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+          }
+        });
+        this.nameIdList.push({
+          id: this.id,
+          name: name
+        })
+        this.id++;
+      }
+
       console.log('this.viewer3D.entities :>> ', this.viewer3D.entities);
     },
     // 从鼠标点击事件获取坐标
@@ -909,69 +979,69 @@ export default {
           // const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
           console.log('this.viewer2D.entities.values :>> ', this.viewer2D.entities.getById(this.selectedMarker.id).position._value);
           let position = this.convertWorldToCartographic(this.viewer2D.entities.getById(this.selectedMarker.id).position._value)
-        
+
           let name = ''
-          for(let i = 0;i<this.nameIdList.length;i++){
-          
-            if(this.nameIdList[i].id == this.selectedMarker.id){
+          for (let i = 0; i < this.nameIdList.length; i++) {
+
+            if (this.nameIdList[i].id == this.selectedMarker.id) {
               name = this.nameIdList[i].name
             }
           }
-          for(let i = 0;i<this.jsonData.blueunit.length;i++){
-            if(name == this.jsonData.blueunit[i].name){
+          for (let i = 0; i < this.jsonData.blueunit.length; i++) {
+            if (name == this.jsonData.blueunit[i].name) {
               this.jsonData.blueunit[i].pos.lat = position.latitude.toFixed(6)
               this.jsonData.blueunit[i].pos.lon = position.longitude.toFixed(6)
               this.jsonData.blueunit[i].pos.h = position.height.toFixed(2)
             }
           }
-          for(let i = 0;i<this.jsonData.redunit.length;i++){
-            if(name == this.jsonData.redunit.name){
+          for (let i = 0; i < this.jsonData.redunit.length; i++) {
+            if (name == this.jsonData.redunit.name) {
               this.jsonData.redunit.component_movementjson.properties.launch_lon = position.longitude.toFixed(6)
               this.jsonData.redunit.component_movementjson.properties.launch_lat = position.latitude.toFixed(6)
               this.jsonData.redunit.component_movementjson.properties.launch_h = position.height.toFixed(2)
             }
           }
-          for(let i = 0;i<this.jsonData.center.length;i++){
-            if(name == this.jsonData.center[i].name){
+          for (let i = 0; i < this.jsonData.center.length; i++) {
+            if (name == this.jsonData.center[i].name) {
               this.jsonData.center[i][name].properties.lon = position.longitude.toFixed(6)
               this.jsonData.center[i][name].properties.lat = position.latitude.toFixed(6)
               this.jsonData.center[i][name].properties.h = position.height.toFixed(2)
-              for(let j = 0;j<this.jsonData.redunit.length;j++){
-              this.jsonData.redunit[j].component_movementjson.properties.target_lon = position.longitude.toFixed(6)
-              this.jsonData.redunit[j].component_movementjson.properties.target_lat = position.latitude.toFixed(6)
-              this.jsonData.redunit[j].component_movementjson.properties.target_h = position.height.toFixed(2)
-          }
-// 新的终点坐标
-const newEndPoint = this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
-// 遍历所有的entity对象
-this.viewer2D.entities.values.forEach(entity => {
-  // 检查entity是否为Polyline类型
-  if (entity instanceof this.Cesium.Entity && entity.polyline) {
-    // 获取原始的Polyline坐标数组
-    const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
+              for (let j = 0; j < this.jsonData.redunit.length; j++) {
+                this.jsonData.redunit[j].component_movementjson.properties.target_lon = position.longitude.toFixed(6)
+                this.jsonData.redunit[j].component_movementjson.properties.target_lat = position.latitude.toFixed(6)
+                this.jsonData.redunit[j].component_movementjson.properties.target_h = position.height.toFixed(2)
+              }
+              // 新的终点坐标
+              const newEndPoint = this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
+              // 遍历所有的entity对象
+              this.viewer2D.entities.values.forEach(entity => {
+                // 检查entity是否为Polyline类型
+                if (entity instanceof this.Cesium.Entity && entity.polyline) {
+                  // 获取原始的Polyline坐标数组
+                  const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
 
-    // 修改终点坐标为新的坐标
-    positions[positions.length - 1] = newEndPoint;
+                  // 修改终点坐标为新的坐标
+                  positions[positions.length - 1] = newEndPoint;
 
-    // 更新entity的Polyline坐标
-    entity.polyline.positions = new this.Cesium.CallbackProperty(time => positions, false);
-  }
-});
-this.viewer3D.entities.values.forEach(entity => {
-  // 检查entity是否为Polyline类型
-  if (entity instanceof this.Cesium.Entity && entity.polyline) {
-    // 获取原始的Polyline坐标数组
-    const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
+                  // 更新entity的Polyline坐标
+                  entity.polyline.positions = new this.Cesium.CallbackProperty(time => positions, false);
+                }
+              });
+              this.viewer3D.entities.values.forEach(entity => {
+                // 检查entity是否为Polyline类型
+                if (entity instanceof this.Cesium.Entity && entity.polyline) {
+                  // 获取原始的Polyline坐标数组
+                  const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
 
-    // 修改终点坐标为新的坐标
-    positions[positions.length - 1] = newEndPoint;
+                  // 修改终点坐标为新的坐标
+                  positions[positions.length - 1] = newEndPoint;
 
-    // 更新entity的Polyline坐标
-    entity.polyline.positions = new this.Cesium.CallbackProperty(time => positions, false);
-  }
-});
+                  // 更新entity的Polyline坐标
+                  entity.polyline.positions = new this.Cesium.CallbackProperty(time => positions, false);
+                }
+              });
             }
-           
+
           }
 
           // this.viewer2D.entities.add({
@@ -1094,9 +1164,10 @@ this.viewer3D.entities.values.forEach(entity => {
   display: none !important;
 }
 
-.container{
+.container {
   height: 100%;
 }
+
 .modeltooltip {
   position: absolute;
   padding: 5px;
@@ -1175,7 +1246,7 @@ this.viewer3D.entities.values.forEach(entity => {
   width: 300px;
   /* display: none; */
   height: 100%;
-  overflow-y:visible;
+  overflow-y: visible;
 }
 
 .model {
@@ -1218,13 +1289,12 @@ this.viewer3D.entities.values.forEach(entity => {
 
 /* 罗盘样式 */
 /deep/.compass {
-    pointer-events: auto;
-    position: absolute;
-    right: 0px;
-    top: 280px;
-    width: 95px;
-    height: 95px;
-    overflow: hidden;
+  pointer-events: auto;
+  position: absolute;
+  right: 0px;
+  top: 280px;
+  width: 95px;
+  height: 95px;
+  overflow: hidden;
 }
-
 </style>