Merge branch 'lmx' of http://47.103.92.60:3003/skyversation/xujingtown_irflcmp_ui

# Conflicts:
#	src/components/Edge.vue

src/components/Edge.vue

@@ -6,7 +6,8 @@
         :key="index"
         :value="'' + index + 1"
         @change="change(item)"
-      >{{ item.label }}</el-radio>
+        >{{ item.label }}</el-radio
+      >
     </el-radio-group>
     <el-switch
       v-model="elSwitchValue"
@@ -14,7 +15,12 @@
       style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949"
       @change="elSwitchChange"
     />
-    <el-dialog v-if="from!=null" v-model="dialogFormVisible" title="详细信息" width="500">
+    <el-dialog
+      v-if="from != null"
+      v-model="dialogFormVisible"
+      title="详细信息"
+      width="500"
+    >
       <div class="info_container">
         <el-form :model="form">
           <el-form-item
@@ -22,13 +28,20 @@
             :key="key"
             :label="key"
             :label-width="'120px'"
-          >{{ value }}</el-form-item>
+            >{{ value }}</el-form-item
+          >
         </el-form>
       </div>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="dialogFormVisible = false;from=null">关闭</el-button>
+          <el-button
+            @click="
+              dialogFormVisible = false;
+              from = null;
+            "
+            >关闭</el-button
+          >
         </div>
       </template>
     </el-dialog>
@@ -49,9 +62,9 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 5,
               innerColor: "#00c4ff",
-              alpha: 0.5
-            }
-          }
+              alpha: 0.5,
+            },
+          },
         },
         {
           label: "村居",
@@ -61,9 +74,9 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 3,
               innerColor: "#00c4ff",
-              alpha: 0.5
-            }
-          }
+              alpha: 0.5,
+            },
+          },
         },
         {
           label: "责任网格",
@@ -73,9 +86,9 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 3,
               innerColor: "#00c4ff",
-              alpha: 0.5
-            }
-          }
+              alpha: 0.5,
+            },
+          },
         },
         {
           label: "微网格",
@@ -85,21 +98,21 @@ export default {
               outerColor: "#ffee00",
               outerWidth: 3,
               innerColor: "#00c4ff",
-              alpha: 0.5
-            }
-          }
-        }
+              alpha: 0.5,
+            },
+          },
+        },
       ],
       elSwitchValue: false,
 
       from: null,
-      dialogFormVisible: false
+      dialogFormVisible: false,
     };
   },
   mounted() {
     window.edgeQJ = {
       geojsonDataSource: null,
-      edgeEntity: null
+      edgeEntity: null,
     };
   },
   methods: {
@@ -149,7 +162,7 @@ export default {
       if (edgeQJ.handler) return;
       // 绑定点击事件
       edgeQJ.handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
-      edgeQJ.handler.setInputAction(function(movement) {
+      edgeQJ.handler.setInputAction(function (movement) {
         var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
         if (SkyScenery.defined(pick)) {
           let entity = pick.id;
@@ -166,9 +179,7 @@ export default {
     },
     closeClick() {
       if (edgeQJ.handler) {
-        edgeQJ.handler.removeInputAction(
-          SkyScenery.ScreenSpaceEventType.LEFT_CLICK
-        );
+        edgeQJ.handler.removeInputAction(SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
         edgeQJ.handler = null;
       }
       this.dialogFormVisible = false;
@@ -258,13 +269,13 @@ export default {
     addWall() {
       let that = this;
       fetch("./static/data/bianjie/西虹桥边界数据.geojson")
-        .then(resp => resp.json())
-        .then(data => {
+        .then((resp) => resp.json())
+        .then((data) => {
           let positions = data.features[0].geometry.coordinates[0];
           edgeQJ.edgeEntity = that.addDynamicWall(positions, {
             maxH: 150,
             color: "#0060fc",
-            duration: 3000
+            duration: 3000,
           });
         });
     },
@@ -281,7 +292,7 @@ export default {
       return viewer.entities.add({
         name: "立体墙效果",
         wall: {
-          positions: positions.map(function(item) {
+          positions: positions.map(function (item) {
             return SkyScenery.Cartesian3.fromDegrees(item[0], item[1]);
           }),
           // 设置高度
@@ -290,12 +301,12 @@ export default {
           material: new SkyScenery.DynamicWallMaterialProperty({
             color: SkyScenery.Color.fromCssColorString(options.color), // "#"
             trailImage: "/static/image/color.png",
-            duration: options.duration || 3000 // 3000
-          })
-        }
+            duration: options.duration || 3000, // 3000
+          }),
+        },
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -321,4 +332,4 @@ export default {
     overflow-y: auto;
   }
 }
-</style>
+</style>

src/components/Header.vue

@@ -33,7 +33,7 @@ export default {
       systemName: "",
       temperature: "", // 天气
       tq_text: "",
-      tq_imgsrc: ""
+      tq_imgsrc: "",
     };
   },
   created() {
@@ -69,11 +69,10 @@ export default {
             ":" +
             loc.lon
         )
-        .then(data => {
+        .then((data) => {
           //解析 {data}
           let result = data.data.results[0];
-          that.tq_imgsrc =
-            "./static/image/tianqi/" + result.now.code + "@1x.png";
+          that.tq_imgsrc = "./static/image/tianqi/" + result.now.code + "@1x.png";
           that.tq_text = result.now.text;
           that.temperature = result.now.temperature;
         });
@@ -86,27 +85,25 @@ export default {
           viewer.canvas.clientHeight / 2
         )
       );
-      let curPosition = SkyScenery.Ellipsoid.WGS84.cartesianToCartographic(
-        centerResult
-      );
+      let curPosition = SkyScenery.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
       let curLongitude = (curPosition.longitude * 180) / Math.PI;
       let curLatitude = (curPosition.latitude * 180) / Math.PI;
       return {
         lon: curLongitude,
-        lat: curLatitude
+        lat: curLatitude,
       };
-    }
+    },
   },
   computed: {
     mapStatus() {
       return this.$store.state.initMap;
-    }
+    },
   },
   watch: {
     mapStatus(newVal, oldVal) {
       if (newVal) this.tqRefresh();
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -117,7 +114,7 @@ export default {
   left: 0;
   width: 100%;
   background: #fff0;
-  z-index: 9999;
+  z-index: 1;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;

src/components/Layers.vue

@@ -2,8 +2,12 @@
   <div class="layer">
     <div class="title">重点图层</div>
     <div>
-      <el-row v-for="(item,index) in arr" :key="index">
-        <el-checkbox v-model="item.added" :label="item.label" @change="addedChange(item)" />
+      <el-row v-for="(item, index) in arr" :key="index">
+        <el-checkbox
+          v-model="item.added"
+          :label="item.label"
+          @change="addedChange(item)"
+        />
         <el-switch
           v-model="item.show"
           class="ml-2"
@@ -13,7 +17,13 @@
         />
       </el-row>
     </div>
-    <el-dialog v-if="from!=null" v-model="dialogFormVisible" title="详细信息" width="500">
+    <el-dialog
+      v-if="from != null"
+      append-to-body
+      v-model="dialogFormVisible"
+      title="详细信息"
+      width="500"
+    >
       <div class="info_container">
         <el-form :model="form">
           <el-form-item
@@ -21,19 +31,26 @@
             :key="key"
             :label="key"
             :label-width="'120px'"
-          >{{ value }}</el-form-item>
+            >{{ value }}</el-form-item
+          >
         </el-form>
       </div>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="dialogFormVisible = false;from=null">关闭</el-button>
+          <el-button
+            @click="
+              dialogFormVisible = false;
+              from = null;
+            "
+            >关闭</el-button
+          >
         </div>
       </template>
     </el-dialog>
   </div>
 </template>
-  
+
 <script>
 export default {
   data() {
@@ -43,48 +60,48 @@ export default {
         url: "./static/data/西虹桥公立学校.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png"
-          }
-        }
+            imgUrl: "/static/image/layer/point.png",
+          },
+        },
       },
       {
         label: "私立学校",
         url: "./static/data/西虹桥私立学校.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png"
-          }
-        }
+            imgUrl: "/static/image/layer/point.png",
+          },
+        },
       },
       {
         label: "公立医院",
         url: "./static/data/西虹桥公立医疗.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png"
-          }
-        }
+            imgUrl: "/static/image/layer/point.png",
+          },
+        },
       },
       {
         label: "私立医院",
         url: "./static/data/西虹区民营医疗.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png"
-          }
-        }
+            imgUrl: "/static/image/layer/point.png",
+          },
+        },
       },
       {
         label: "养老机构",
         url: "./static/data/西虹桥养老机构.geojson",
         style: {
           point: {
-            imgUrl: "/static/image/layer/point.png"
-          }
-        }
-      }
+            imgUrl: "/static/image/layer/point.png",
+          },
+        },
+      },
     ];
-    arr = arr.map(function(item, index) {
+    arr = arr.map(function (item, index) {
       item.id = "layer" + index;
       item.added = false;
       item.show = true;
@@ -93,12 +110,12 @@ export default {
     return {
       arr: arr,
       from: null,
-      dialogFormVisible: false
+      dialogFormVisible: false,
     };
   },
   mounted() {
     window.layerQJ = {
-      geojsonDataSource: {}
+      geojsonDataSource: {},
     };
   },
   methods: {
@@ -133,7 +150,7 @@ export default {
       if (layerQJ.handler) return;
       // 绑定点击事件
       layerQJ.handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
-      layerQJ.handler.setInputAction(function(movement) {
+      layerQJ.handler.setInputAction(function (movement) {
         var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
         if (SkyScenery.defined(pick)) {
           let entity = pick.id;
@@ -178,7 +195,7 @@ export default {
       //     alpha: 0.7
       //   }
       // };
-      SkyScenery.GeoJsonDataSource.load(url).then(function(dataSource) {
+      SkyScenery.GeoJsonDataSource.load(url).then(function (dataSource) {
         viewer.dataSources.add(dataSource);
         layerQJ.geojsonDataSource[id] = dataSource;
         var entities = dataSource.entities.values;
@@ -191,7 +208,7 @@ export default {
               width: 48,
               height: 48,
               pixelOffset: new SkyScenery.Cartesian2(0, -25),
-              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND
+              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
             });
           }
           if (entity.polyline) {
@@ -215,28 +232,28 @@ export default {
             entity.polygon.height = 5;
             entity.polygon.material = new SkyScenery.ImageMaterialProperty({
               image: "/static/image/b2.png", // 图片路径
-              transparent: true // 是否透明
+              transparent: true, // 是否透明
             });
           }
           entity.type = "layers";
         }
       });
-    }
+    },
   },
   computed: {
     mapStatus() {
       return this.$store.state.initMap;
-    }
+    },
   },
   watch: {
     mapStatus(newVal, oldVal) {
       if (newVal) this.openClick();
-    }
-  }
+    },
+  },
 };
 </script>
-  
-  <style lang="less" scoped>
+
+<style lang="less" scoped>
 .layer {
   position: absolute;
   left: 520px;
@@ -257,4 +274,4 @@ export default {
     overflow-y: auto;
   }
 }
-</style>
+</style>

src/views/HomeView.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="home">
     <Header />
-    <Edge />
-    <Layers />
     <Map ref="map" />
     <!-- 左侧图片区 -->
     <div class="home_LeftMainBox">
@@ -21,7 +19,15 @@
         @change="handleChangeCascader"
         :options="options"
         :props="props"
-      ></el-cascader>
+      >
+        <!-- <template v-slot:default="{ node, data }">
+          <span style="float: left">{{ data.label }}</span>
+          <span style="float: right; color: #8492a6; font-size: 13px" v-if="node.isLeaf">
+            <i class="el-icon-setting"></i>
+            <i class="el-icon-map-location"></i>
+          </span>
+        </template> -->
+      </el-cascader>
     </div>
     <!-- 中下部分3DTiles偏移调试工具 LiuMengxiang  2024/09/11-->
     <div class="home_CentralRBMainBox" v-if="false">
@@ -84,6 +90,8 @@
       <img style="width: 450px; height: 50px" src="../assets/images/RT3.png" />
       <img style="width: 450px; height: 246px" src="../assets/images/RM3.png" />
     </div>
+    <Layers />
+    <Edge />
   </div>
 </template>
 
@@ -195,7 +203,6 @@ export default {
   }
   &_CentralMainBox {
     position: fixed;
-    z-index: 1;
     left: 520px;
     top: 100px;
     width: 350px;