添加geojson数据渲染和传参数据绑定

src/components/wgn/controlPanel.vue

@@ -5,7 +5,7 @@
         <div class="">
           场景名称：
           <el-cascader
-            :disabled="$route.query.sceneId || SceneValue"
+            :disabled="$route.query.sceneId"
             v-model="SceneValue"
             placeholder="试试搜索：距离"
             :options="SceneList"
@@ -100,7 +100,11 @@
             "
           >
             <div class="vueJsonEditor_tools">
-              <!-- <span @click="showToMap(jsonData)">渲染到地图中</span> -->
+              <span
+                v-if="jsonData && (jsonData.features || jsonData.geometry)"
+                @click="showToMap(jsonData)"
+                >渲染到地图中</span
+              >
               <span @click="copyJsonData(jsonData)">copy</span>
             </div>
             <vue-json-editor
@@ -109,6 +113,7 @@
               :show-btns="false"
               :mode="'code'"
               :lang="'zh'"
+              @json-change="handleJsonChange"
             >
             </vue-json-editor>
           </div>
@@ -135,7 +140,14 @@
             "
           >
             <div class="vueJsonEditor_tools">
-              <!-- <span @click="showToMap(backData.content)">渲染到地图中</span> -->
+              <span
+                v-if="
+                  backData.content &&
+                  (backData.content.features || backData.content.geometry)
+                "
+                @click="showToMap(backData.content)"
+                >渲染到地图中</span
+              >
               <span @click="copyJsonData(backData.content)">copy</span>
             </div>
             <vue-json-editor
@@ -394,7 +406,7 @@ export default {
             },
             {
               value: "1.2.5.3",
-              label: "判断点线面体的相互状态（待测试）",
+              label: "点线面体的相互状态",
             },
             {
               value: "1.2.5.4",
@@ -515,11 +527,17 @@ export default {
   methods: {
     ifHasType(type) {
       if (this.dmsServerItem.elementTypes && this.dmsServerItem.elementTypes.length > 0) {
-        return this.dmsServerItem.elementTypes.includes(type);
+        return (
+          this.dmsServerItem.elementTypes.includes(type) ||
+          this.dmsServerItem.elementTypes.includes(type + "Z")
+        );
       } else {
         return false;
       }
     },
+    handleJsonChange(jsonStr) {
+      this.jsonData = jsonStr;
+    },
     // 搜索微功能服务
     searchServerList() {
       let requestParams = {
@@ -621,58 +639,149 @@ export default {
       setTimeout(() => {
         viewer.scene.requestRender();
       });
-    },
-    // 添加点到地图中
+    }, // 添加点到地图中
     addPoint(coordinates) {
       // 1. 解析点的坐标
       console.log("addPoint coordinates", coordinates);
       // 2. 创建点实体
-      const pointEntity = viewer.entities.add(
-        new SkyScenery.Entity({
-          name: "point",
-          position: SkyScenery.Cartesian3.fromDegrees(coordinates[0], coordinates[1]),
-          type: "point",
-        })
-      );
+      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,
+        },
+      });
       // 3. 将点实体添加到drawnEntities中
       this.drawnEntities.push(pointEntity);
-    },
-    // 添加线到地图中
+    }, // 添加线到地图中
     addLine(coordinates) {
       // 1. 解析线的坐标
-      console.log("addLine coordinates", [...coordinates]);
-      // 2. 创建线实体
+      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. 创建线实体
       const lineEntity = viewer.entities.add({
         polyline: {
           show: true,
-          positions: SkyScenery.Cartesian3.fromDegreesArray([...coordinates[0]]),
-          material: SkyScenery.Color.WHITE.withAlpha(0.5),
+          positions: positions,
+          material: SkyScenery.Color.BLUE.withAlpha(0.8),
           width: 3,
         },
       });
-      // 3. 将线实体添加到drawnEntities中
+
+      // 6. 将线实体添加到drawnEntities中
       this.drawnEntities.push(lineEntity);
     },
     // 添加面到地图中
     addPolygon(coordinates) {
-      // 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),
-          },
-        })
+      // 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"
       );
-      // 3. 将面实体添加到drawnEntities中
+
+      // 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,
+          },
+          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中
       this.drawnEntities.push(polygonEntity);
-      viewer.scene.requestRender();
     },
     handleSelectChange(item, value) {
       this.jsonData[item] = value;