1

src/components/myMarsmap.vue

@@ -29,7 +29,7 @@
         </div> -->
       </div>
       <div class="toolbar" v-if="typeOf === 'pointP'">
-        <div class="drawPolygon" @click="lineClick('pointP')">
+        <div class="drawPolygon" @click="lineClicks('pointP')">
           <div class="drawpointIcon"></div>
         </div>
       </div>
@@ -127,11 +127,9 @@ export default {
           { duration: 0 }
         );
         if (lon[0] && lon[1]) {
-          if (this.typeOf === "pointP") {
           this.deviceDrid(lon[0], lon[1]);
         }
       }
-      }
     },
     getMapJson() {
       // eslint-disable-next-line no-undef
@@ -210,14 +208,57 @@ export default {
         this.deviceDrid(this.lon, this.lat);
       }
     },
+    lineClicks(val) {
+      this.clearDraw();
+      this.graphicLayer.eachGraphic((item) => {
+        if (item.id === "pointP") {
+          this.graphicLayer.removeGraphic(item);
+        }
+      });
+      let style = {};
+      style = {
+        color: "#ffff00",
+        pixelSize: 10,
+        clampToGround: true,
+        outlineWidth: 0
+      };
+
+      Drawarectangle(val, this.graphicLayer, style);
+    },
     lineClick(val) {
-      console.log(val, this.graphicLayer, "val");
+      if (this.typeOf === "polygon") {
-      if (this.graphicLayer._graphicList._array.length < 1) {
         this.attrType = val;
+
+        // 检查 graphicLayer 中的图形
+        const graphicsArray = this.graphicLayer._graphicList._array || [];
+        let hasPolygon = false;
+        let hasCircle = false;
+
+        // 遍历检查是否有 polygon 或 circle
+        graphicsArray.forEach((graphic) => {
+          if (graphic.type === "polygon") {
+            hasPolygon = true;
+          } else if (graphic.type === "circle") {
+            hasCircle = true;
+          }
+        });
+
         let style = {};
         if (val === "polygon") {
+          // 如果已有 polygon 或 circle，限制只能绘制一个 polygon
+          if (hasPolygon) {
+            this.$message.error("已存在，请先清空");
+            return; // 阻止继续执行
+          }
+          if (hasCircle) {
+            // 清除已有 circle
+            this.graphicLayer.eachGraphic((item) => {
+              if (item.type === "circle") {
+                this.graphicLayer.removeGraphic(item);
+              }
+            });
+          }
           style = {
-            // eslint-disable-next-line no-undef
             materialType: mars3d.MaterialType.PolyGradient,
             materialOptions: {
               color: "#3388cc",
@@ -226,7 +267,7 @@ export default {
             }
           };
         } else if (val === "pointP") {
-          this.clearDraw();
+          // pointP 可以与 polygon 或 circle 共存，仅清除已有 pointP
           this.graphicLayer.eachGraphic((item) => {
             if (item.id === "pointP") {
               this.graphicLayer.removeGraphic(item);
@@ -239,8 +280,20 @@ export default {
             outlineWidth: 0
           };
         } else if (val === "circle") {
+          // 如果已有 circle 或 polygon，限制只能绘制一个 circle
+          if (hasCircle) {
+            this.$message.error("已存在，请先清空");
+            return; // 阻止继续执行
+          }
+          if (hasPolygon) {
+            // 清除已有 polygon
+            this.graphicLayer.eachGraphic((item) => {
+              if (item.type === "polygon") {
+                this.graphicLayer.removeGraphic(item);
+              }
+            });
+          }
           style = {
-            // eslint-disable-next-line no-undef
             materialType: mars3d.MaterialType.PolyGradient,
             materialOptions: {
               color: "#3388cc",
@@ -249,9 +302,18 @@ export default {
             }
           };
         }
+
+        // 如果 val 是 polygon 或 circle，且已有另一种类型，则提示并阻止
+        if (
+          (hasPolygon && val === "circle") ||
+          (hasCircle && val === "polygon")
+        ) {
+          this.$message.error("只能显示一种类型，已清空");
+          return; // 阻止继续执行
+        }
+
+        // 绘制新图形
         Drawarectangle(val, this.graphicLayer, style);
-      } else {
-        this.$message.error("请先清空数据在添加");
       }
     },
     clearDraw() {
@@ -260,7 +322,17 @@ export default {
       }
     },
     toGeoJSON() {
+      console.log(this.graphicLayer, this.typeOf, "this.graphicLayer");
+      if (this.typeOf === "pointP") {
         return this.graphicLayer.toGeoJSON({ noAlt: true });
+      } else {
+        this.graphicLayer._graphicList._array.forEach((item) => {
+          if (item.type === "pointP") {
+            this.graphicLayer.removeGraphic(item);
+          }
+        });
+        return this.graphicLayer.toGeoJSON({ noAlt: true });
+      }
     },
     showRegion(value, type) {
       let geojson = {};

src/views/contentData/index.js

@@ -15,14 +15,15 @@ export function allPositions(options, show) {
           type: "diffuseWall",
           merge: true,
           styleOptions: {
-            color: "#3388cc",
+            color: "#0066cc", // 较深的蓝色（顶部）
-            opacity: 1,
+            baseColor: "#002244", // 更深的蓝色（底部），增强对比
+            opacity: 0.7, // 顶部略透明，突出渐变
+            diffHeight: 120, // 高度适中，扩散明显
+            speed: 5, // 中等速度
             outline: true,
-            outlineColor: "#3388cc",
+            outlineColor: "#0066cc", // 轮廓使用较深蓝色
             outlineOpacity: 1,
-            outlineWidth: 2.0,
+            outlineWidth: 3.0 // 加粗轮廓，边界清晰
-            diffHeight: 70, // 高度
-            speed: 5 // 速度
           }
         },
         show,
@@ -221,6 +222,7 @@ function bindLayerPopup(graphicLayer, graphic) {
     });
   } else if (graphic.name === "飞手") {
   } else {
+    console.log(attr, "attr");
     let wPath = window.document.location.href;
     let pathName = route.path;
     let pos = wPath.indexOf(pathName);
@@ -252,7 +254,7 @@ function bindLayerPopup(graphicLayer, graphic) {
             </div>
             <div class="txt">
               <p class="p1">状态</p>
-              <p class="p2">${attr.state ? "在线" : "离线"}</p>
+              <p class="p2">${attr.isOnline ? "在线" : "离线"}</p>
             </div>
           </div>
         </div>