添加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;

src/views/skmh/scene/index.vue

@@ -1,110 +1,117 @@
 <template>
-    <div class="container">
-        <div style="padding: 20px;display: ruby-text;">
-            <div v-for="info in listData" :key="info" style="padding: 20px;">
-                <el-card style="border-radius: 10px !important;" @click="openVideo(info)">
-                    <div class="card picDiv"><img :src="info.img" ></div>
-                    <template #footer>
-                        <div style="width: 260px;">
-                            <div style="font-weight: bold;padding-bottom: 10px;">{{info.title}}</div>
-                            <div class="ellipsis3">
-                                <el-popover
-                                    title=""
-                                    width="300"
-                                    effect="dark"
-                                    :content="info.desc"
-                                    placement="top-start"
-                                >
-                                    <template #reference>
-                                        <div>{{info.desc}}</div>
-                                    </template>
-                                </el-popover>
-                            </div>
-                        </div>
-                    </template>
-                </el-card>
+  <div class="container">
+    <div style="padding: 20px; display: ruby-text">
+      <div v-for="info in listData" :key="info" style="padding: 20px">
+        <el-card style="border-radius: 10px !important" @click="openVideo(info)">
+          <div class="card picDiv"><img :src="info.img" /></div>
+          <template #footer>
+            <div style="width: 260px">
+              <div style="font-weight: bold; padding-bottom: 10px">{{ info.title }}</div>
+              <div class="ellipsis3">
+                <el-popover
+                  title=""
+                  width="300"
+                  effect="dark"
+                  :content="info.desc"
+                  placement="top-start"
+                >
+                  <template #reference>
+                    <div>{{ info.desc }}</div>
+                  </template>
+                </el-popover>
+              </div>
             </div>
-        </div>
-        <div>
-            <el-dialog v-model="centerDialogVisible" title="预览" width="800" center :before-close="closeDialog">
-                <video :src="videoUrl" controls style="width: 100%;"/>  
-            </el-dialog>
-        </div>
+          </template>
+        </el-card>
+      </div>
     </div>
+    <div>
+      <el-dialog
+        v-model="centerDialogVisible"
+        title="预览"
+        width="800"
+        center
+        :before-close="closeDialog"
+      >
+        <video :src="videoUrl" controls style="width: 100%" />
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "",
-    data() {
-        return {
-            listData:[],
-            centerDialogVisible:false,
-            videoUrl:''
-
+  name: "",
+  data() {
+    return {
+      listData: [],
+      centerDialogVisible: false,
+      videoUrl: "",
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      let that = this;
+      for (let i = 0; i < 10; i++) {
+        let str = {
+          url:
+            "https://realbot-oss.oss-accelerate.aliyuncs.com/scrm/2025/2025-05-21/659fa31d-dc87-4882-8be5-1fba8fb7e6ff/flower.mp4",
+          img: require("@static/images/u30.png"),
+          title: "无人机实时成图_" + i,
+          desc:
+            "无人机巡察场景可实时接入无人机视频画面，叠加到GIS场景中，实现边飞边出图的真实场景还原，并可将历史画面内容实现快速切图、上图展示，利用AI技术赋能无人机场景，实现无人机视频画面目标提取，实现关键目标要素点位标记及相关业务分析应用，可用于城市规划、应急、军用侦察等行业应用场景。",
         };
+        that.listData.push(str);
+      }
+    },
+    openVideo(param) {
+      this.videoUrl = param.url;
+      this.centerDialogVisible = true;
     },
-    mounted() {
-        this.initData()
+    closeDialog() {
+      this.videoUrl = "";
+      this.centerDialogVisible = false;
     },
-    methods: {
-        initData(){
-            let that = this;
-            for(let i=0; i<10; i++){
-                let str = {
-                    url:"https://realbot-oss.oss-accelerate.aliyuncs.com/scrm/2025/2025-05-21/659fa31d-dc87-4882-8be5-1fba8fb7e6ff/flower.mp4",
-                    img:require("@static/images/u30.png"),
-                    title:"无人机实时成图_"+i,
-                    desc:"无人机巡察场景可实时接入无人机视频画面，叠加到GIS场景中，实现边飞边出图的真实场景还原，并可将历史画面内容实现快速切图、上图展示，利用AI技术赋能无人机场景，实现无人机视频画面目标提取，实现关键目标要素点位标记及相关业务分析应用，可用于城市规划、应急、军用侦察等行业应用场景。"
-                }
-                that.listData.push(str);
-            }
-        },
-        openVideo(param){
-            this.videoUrl = param.url;
-            this.centerDialogVisible=true
-        },
-        closeDialog(){
-            this.videoUrl='';
-            this.centerDialogVisible=false
-        }
-    }
+  },
 };
 </script>
 
 <style lang="less" scoped>
-/deep/ .el-card__body{
-    padding: 0px !important;
-    height: 140px;
+:deep(.el-card__body) {
+  padding: 0px !important;
+  height: 140px;
 }
 .container {
-    width: 100%;
-    padding: 0px;
-    margin: 0 auto;
+  width: 100%;
+  padding: 0px;
+  margin: 0 auto;
 }
-.card{
-    float: left;
-    height: 150px;
-    width: 300px;
-    cursor: pointer;
-    box-sizing: border-box;
+.card {
+  float: left;
+  height: 150px;
+  width: 300px;
+  cursor: pointer;
+  box-sizing: border-box;
 }
-.picDiv{
-    overflow: hidden;
+.picDiv {
+  overflow: hidden;
 }
-.picDiv img{
-    width: 100%;
-    height: 100%;
-    transition: all 1s;
+.picDiv img {
+  width: 100%;
+  height: 100%;
+  transition: all 1s;
 }
-.picDiv img:hover{
-    transform:scale(1.2,1.2);
+.picDiv img:hover {
+  transform: scale(1.2, 1.2);
 }
-.ellipsis3{
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.ellipsis3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-</style>
+</style>