色彩适配

src/components/wgn/controlPanel.vue

@@ -34,10 +34,19 @@
       </div>
       <el-divider></el-divider>
       <div>
-        元素个数：{{ SceneValue && dmsServerItem ? dmsServerItem.numberOf : "0" }}
+        元素个数：{{
+          SceneValue && SceneRule[SceneValue] ? SceneRule[SceneValue].numberOf : "0"
+        }}
       </div>
       <div>
-        参数类型：{{ SceneValue && dmsServerItem ? dmsServerItem.elementTypes : "[]" }}
+        参数类型：{{
+          SceneValue && SceneRule[SceneValue] ? SceneRule[SceneValue].elementTypes : "[]"
+        }}
+      </div>
+      <div>
+        接口地址：{{
+          SceneValue && SceneRule[SceneValue] ? SceneRule[SceneValue].apiUrl : "/"
+        }}
       </div>
       <div>接口地址：{{ SceneValue && dmsServerItem ? dmsServerItem.apiUrl : "/" }}</div>
     </div>
@@ -60,15 +69,15 @@
               <el-button type="primary">上传文件</el-button>
             </el-upload>
           </div>
-          <div v-if="SceneValue && dmsServerItem">
-            <div v-for="item in dmsServerItem.elementTypes" :key="item">
+          <div v-if="SceneValue && SceneRule[SceneValue]">
+            <div v-for="item in SceneRule[SceneValue].elementTypes" :key="item">
               <div
-                v-if="SceneValue && dmsServerItem && selectOptions[item]"
+                v-if="SceneValue && SceneRule[SceneValue] && SceneRule[SceneValue][item]"
                 style="margin: 0.5rem 0"
               >
                 {{ item }}：<el-select
                   @change="handleSelectChange(item, $event)"
-                  v-if="selectOptions[item]"
+                  v-if="SceneRule[SceneValue][item]"
                   v-model="params[item]"
                   :placeholder="'请选择' + item"
                   style="width: 240px"
@@ -100,11 +109,7 @@
             "
           >
             <div class="vueJsonEditor_tools">
-              <span
-                v-if="jsonData && (jsonData.features || jsonData.geometry)"
-                @click="showToMap(jsonData)"
-                >渲染到地图中</span
-              >
+              <!-- <span @click="showToMap(jsonData)">渲染到地图中</span> -->
               <span @click="copyJsonData(jsonData)">copy</span>
             </div>
             <vue-json-editor
@@ -113,7 +118,6 @@
               :show-btns="false"
               :mode="'code'"
               :lang="'zh'"
-              @json-change="handleJsonChange"
             >
             </vue-json-editor>
           </div>
@@ -135,19 +139,14 @@
             class="vueJsonEditor_box"
             v-show="
               SceneValue &&
-              dmsServerItem &&
-              (ifHasType('point') || ifHasType('polyline') || ifHasType('polygon'))
+              SceneRule[SceneValue] &&
+              (SceneRule[SceneValue].elementTypes.includes('point') ||
+                SceneRule[SceneValue].elementTypes.includes('polyline') ||
+                SceneRule[SceneValue].elementTypes.includes('polygon'))
             "
           >
             <div class="vueJsonEditor_tools">
-              <span
-                v-if="
-                  backData.content &&
-                  (backData.content.features || backData.content.geometry)
-                "
-                @click="showToMap(backData.content)"
-                >渲染到地图中</span
-              >
+              <!-- <span @click="showToMap(backData.content)">渲染到地图中</span> -->
               <span @click="copyJsonData(backData.content)">copy</span>
             </div>
             <vue-json-editor
@@ -634,7 +633,7 @@ export default {
           // 元素类型
           elementTypes: ["polygon"],
           // 元素个数
-          minNumberOf: 2,
+          numberOf: 2,
           // 后台接口路径
           apiUrl: "/geometry/union",
         },
@@ -645,7 +644,7 @@ export default {
           // 元素类型
           elementTypes: ["polygon"],
           // 元素个数
-          minNumberOf: 2,
+          numberOf: 2,
           // 后台接口路径
           apiUrl: "/geometry/intersection",
         },
@@ -656,7 +655,7 @@ export default {
           // 元素类型
           elementTypes: ["polygon"],
           // 元素个数
-          minNumberOf: 2,
+          numberOf: 2,
           // 后台接口路径
           apiUrl: "/geometry/difference",
         },
@@ -979,66 +978,6 @@ export default {
     },
   },
   methods: {
-    ifHasType(type) {
-      if (this.dmsServerItem.elementTypes && this.dmsServerItem.elementTypes.length > 0) {
-        return (
-          this.dmsServerItem.elementTypes.includes(type) ||
-          this.dmsServerItem.elementTypes.includes(type + "Z")
-        );
-      } else {
-        return false;
-      }
-    },
-    handleJsonChange(jsonStr) {
-      this.jsonData = jsonStr;
-    },
-    // 搜索微功能服务
-    searchServerList() {
-      let requestParams = {
-        columnId: 1651,
-        states: 0,
-        pageSize: 999,
-        page: 0,
-      };
-      if (this.SceneValue) {
-        requestParams.search = JSON.stringify([
-          {
-            field: "c_scene_name",
-            searchType: 1,
-            content: { value: this.SceneValue },
-          },
-        ]);
-        // 获取微功能服务列表
-        wgn
-          .getDmsData(requestParams)
-          .then((res) => {
-            if (res.code === 200 && res.content.data[0]) {
-              let dmsServiceData = res.content.data[0];
-              this.dmsServerItem = {
-                // 功能描述
-                functionalDefinition: dmsServiceData.content,
-                // 元素类型
-                elementTypes: JSON.parse(dmsServiceData.c_input_parameter_rules),
-                // 元素个数
-                numberOf: JSON.parse(dmsServiceData.c_number_of_elements),
-                // 后台接口路径
-                apiUrl: dmsServiceData.c_url,
-              };
-            } else {
-              this.$message({
-                message: "搜索微功能服务失败,请检查场景名称是否正确",
-                type: "warning",
-              });
-            }
-          })
-          .catch((e) => {
-            this.$message({
-              message: "搜索微功能服务失败" + e,
-              type: "error",
-            });
-          });
-      }
-    },
     // 将用户输入或后台返回的geojson渲染到地图中
     showToMap(geojson) {
       // 1. 清除所有地图中的元素
@@ -1093,149 +1032,58 @@ export default {
       setTimeout(() => {
         viewer.scene.requestRender();
       });
-    }, // 添加点到地图中
+    },
+    // 添加点到地图中
     addPoint(coordinates) {
       // 1. 解析点的坐标
       console.log("addPoint coordinates", coordinates);
       // 2. 创建点实体
-      const pointEntity = viewer.entities.add({
-        name: "point",
-        position:
-          coordinates.length > 2
-            ? SkyScenery.Cartesian3.fromDegrees(
-                coordinates[0],
-                coordinates[1],
-                coordinates[2]
-              )
-            : SkyScenery.Cartesian3.fromDegrees(coordinates[0], coordinates[1]),
-        point: {
-          show: true,
-          color: SkyScenery.Color.RED,
-          pixelSize: 10,
-          outlineColor: SkyScenery.Color.WHITE,
-          outlineWidth: 2,
-        },
-      });
+      const pointEntity = viewer.entities.add(
+        new SkyScenery.Entity({
+          name: "point",
+          position: SkyScenery.Cartesian3.fromDegrees(coordinates[0], coordinates[1]),
+          type: "point",
+        })
+      );
       // 3. 将点实体添加到drawnEntities中
       this.drawnEntities.push(pointEntity);
-    }, // 添加线到地图中
+    },
+    // 添加线到地图中
     addLine(coordinates) {
       // 1. 解析线的坐标
-      console.log("addLine coordinates", coordinates);
-
-      // 2. 处理坐标格式：如果是二维数组则取第一个元素，否则直接使用
-      const lineCoordinates =
-        Array.isArray(coordinates[0]) && Array.isArray(coordinates[0][0])
-          ? coordinates[0]
-          : coordinates;
-
-      // 3. 检测坐标是否包含Z值
-      const hasZValues = lineCoordinates.some(
-        (coord) => coord.length > 2 && typeof coord[2] === "number"
-      );
-
-      // 4. 根据是否有Z值选择合适的坐标转换方法
-      let positions;
-      if (hasZValues) {
-        // 包含Z值，使用带高度的坐标转换方法
-        const flatCoordinatesWithHeights = [];
-        lineCoordinates.forEach((coord) => {
-          flatCoordinatesWithHeights.push(coord[0], coord[1], coord[2] || 0);
-        });
-        positions = SkyScenery.Cartesian3.fromDegreesArrayHeights(
-          flatCoordinatesWithHeights
-        );
-      } else {
-        // 不包含Z值，使用普通坐标转换方法
-        const flatCoordinates = [];
-        lineCoordinates.forEach((coord) => {
-          flatCoordinates.push(coord[0], coord[1]);
-        });
-        positions = SkyScenery.Cartesian3.fromDegreesArray(flatCoordinates);
-      }
-
-      // 5. 创建线实体
+      console.log("addLine coordinates", [...coordinates]);
+      // 2. 创建线实体
       const lineEntity = viewer.entities.add({
         polyline: {
           show: true,
-          positions: positions,
-          material: SkyScenery.Color.BLUE.withAlpha(0.8),
+          positions: SkyScenery.Cartesian3.fromDegreesArray([...coordinates[0]]),
+          material: SkyScenery.Color.WHITE.withAlpha(0.5),
           width: 3,
         },
       });
-
-      // 6. 将线实体添加到drawnEntities中
+      // 3. 将线实体添加到drawnEntities中
       this.drawnEntities.push(lineEntity);
     },
     // 添加面到地图中
     addPolygon(coordinates) {
-      // 2. 处理坐标格式：确保获取外部环坐标
-      const outerRingCoordinates =
-        Array.isArray(coordinates[0]) && Array.isArray(coordinates[0][0])
-          ? coordinates[0]
-          : coordinates;
-
-      // 3. 检测坐标是否包含Z值
-      const hasZValues = outerRingCoordinates.some(
-        (coord) => coord.length > 2 && typeof coord[2] === "number"
-      );
-
-      // 4. 根据是否有Z值选择合适的坐标转换方法
-      let positions;
-      let baseHeight = 0;
-      let extrudedHeight = 100; // 默认挤压高度
-
-      if (hasZValues) {
-        // 包含Z值，使用带高度的坐标转换方法
-        const flatCoordinatesWithHeights = [];
-        let minZ = Infinity;
-        let maxZ = -Infinity;
-
-        // 计算Z值的范围
-        outerRingCoordinates.forEach((coord) => {
-          const z = coord[2] || 0;
-          minZ = Math.min(minZ, z);
-          maxZ = Math.max(maxZ, z);
-          flatCoordinatesWithHeights.push(coord[0], coord[1], minZ); // 使用最小Z值作为基础高度
-        });
-
-        positions = SkyScenery.Cartesian3.fromDegreesArrayHeights(
-          flatCoordinatesWithHeights
-        );
-        baseHeight = minZ;
-        extrudedHeight = maxZ;
-      } else {
-        // 不包含Z值，使用普通坐标转换方法
-        const flatCoordinates = [];
-        outerRingCoordinates.forEach((coord) => {
-          flatCoordinates.push(coord[0], coord[1]);
-        });
-        positions = SkyScenery.Cartesian3.fromDegreesArray(flatCoordinates);
-      }
-
-      // 5. 创建面实体
-      const polygonEntity = viewer.entities.add({
-        name: "polygon",
-        polygon: {
-          hierarchy: {
-            positions: positions,
+      // 1. 解析面的坐标
+      console.log("addPolygon coordinates", [...coordinates[0]]);
+      // 创建当前实体（实时渲染）
+      const polygonEntity = viewer.entities.add(
+        new SkyScenery.Entity({
+          name: " polygon",
+          polygon: {
+            hierarchy: {
+              positions: SkyScenery.Cartesian3.fromDegreesArray([...coordinates[0]]),
+            },
+            heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
+            material: SkyScenery.Color.CYAN.withAlpha(0.5),
           },
-          height: baseHeight, // 多边形底部高度
-          extrudedHeight: extrudedHeight, // 多边形顶部高度，实现3D挤压效果
-          heightReference: hasZValues
-            ? SkyScenery.HeightReference.NONE
-            : SkyScenery.HeightReference.CLAMP_TO_GROUND,
-          material: SkyScenery.Color.GREEN.withAlpha(0.5),
-          outline: true,
-          outlineColor: SkyScenery.Color.WHITE,
-          outlineWidth: 2,
-          // 设置侧面材质
-          extrudedMaterial: SkyScenery.Color.GREEN.withAlpha(0.8),
-        },
-      });
-
-      // 6. 将面实体添加到drawnEntities中
+        })
+      );
+      // 3. 将面实体添加到drawnEntities中
       this.drawnEntities.push(polygonEntity);
+      viewer.scene.requestRender();
     },
     handleSelectChange(item, value) {
       this.jsonData[item] = value;

src/views/Yxgl.vue

@@ -37,7 +37,7 @@
       class="viewBox"
       :style="{
         width: isCollapse ? 'calc(100vw - 60px)' : 'calc(100% - 200px)',
-        background: menuActive == 'StatisticalAnalysis' ? '#FFF' : '#FFF',
+        background: menuActive == 'StatisticalAnalysis' ? '#08224a' : '#08224a',
         overflowY: menuActive == 'StatisticalAnalysis' ? 'auto' : 'hidden',
       }"
     >
@@ -125,6 +125,6 @@ export default {
 iframe {
   width: 100%;
   height: calc(100% - 10px);
-  background: #fff;
+  background: #08224a;
 }
 </style>

src/views/yxgl/StatisticalAnalysis.vue

@@ -595,7 +595,7 @@ export default {
     width: calc(25% - 56px);
     border-radius: 5px;
     padding: 20px 18px;
-    background: #ffffff;
+    background: #00000032;
     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15);
   }
 
@@ -603,7 +603,7 @@ export default {
     width: 100%;
     border-radius: 5px;
     padding: 20px 18px;
-    background: #ffffff;
+    background: #00000032;
     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15);
   }