update 地图样式

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -1,15 +1,5 @@
 <template>
   <div style="width: 100%;height: 100%;">
-    <div class="btnBox">
-      <div class="btnItem" @click="aaaaa">外层点击交互联动</div>
-      <div class="btnItem" @click="bbbbb">添加点位</div>
-      <div class="btnItem" @click="ccccc">删除图层</div>
-      <div class="btnItem" @click="ddddd">操作桩号</div>
-      <div class="btnItem" @click="eeeee">打开雷达云图</div>
-      <div class="btnItem" @click="fffff">关闭雷达云图</div>
-      <div class="btnItem" @click="ggggg">图层显示</div>
-      <div class="btnItem" @click="hhhhh">图层隐藏</div>
-    </div>
       <!-- <component :is="mapContainer" ref="MapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }"  /> -->
         <div class="BMapContainer">
           <gisMap2d ref="gisMap2d"
@@ -82,7 +72,6 @@ import BMapContainer from "./components/BMapContainer/index.vue";
 import { gisMap2d } from 'gis-map-universal'
 const lnglat = [117.16515148266497,35.2797674572588]
 
-import pointsObj_new from './assets/data'
 export default {
   name: "Home",
   components: {
@@ -113,7 +102,6 @@ export default {
       mapZoom: '7.5',   // 默认值'7.5'   String类型
       mapCenter: lnglat, //默认值[118.75, 36.46] Array类型
 
-      isShow: true,
     };
   },
   provide() {
@@ -140,28 +128,6 @@ export default {
     debug(){
       this.$refs.Thumbnail.debug()
     },
-    bbbbb() {
-      this.$refs.gisMap2d.addPointByArr(
-        // this.pointsObj,
-        pointsObj_new,
-        "customLayer111",
-        true
-      );
-      // this.$refs.gisMap2d.addPointByArr(
-      //  this.pointsObj2,
-      //  "customLayer222",
-      //  this.isCluster
-      //);
-      // this.$refs.gisMap2d.addLineByArr(this.lineArr);
-    },
-    ccccc() {
-      this.$refs.gisMap2d.removeLayerByName("customLayer111");
-    },
-    ddddd() {
-      this.$refs.gisMap2d.pileIsShow("customLayer111", this.isShow);
-      // this.$refs.gisMap2d.pileIsShow("customLayer222", this.isShow);
-      this.isShow = !this.isShow;
-    },
     handleShrink(e) {
       const translateXElement = e.target.parentElement.parentElement;
 
@@ -180,11 +146,62 @@ export default {
         translateXElement.style.position = `relative`;
       }
     },
+    
+    clickPointEvent(obj) {
+      if(obj && obj.otherInfo){
+        obj.otherInfo.config.markerClick?.(obj.otherInfo.extData, obj.otherInfo.config?.item);
+      }
+      // console.log(obj); //此处可以拿到点位的所有字段信息
+    },
+    setMapZoomAndCenter(zoom,lnglat){
+      this.$refs.gisMap2d.zoomInBylatlon(lnglat,zoom)
+    },
+    showRoadConditions(visible){
+      if(visible){
+        // TODO 展示云图
+      } else {
+        // TODO 隐藏云图
+      }
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.BMapContainer {
+  position: absolute;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: left top;
+  background-color: #103253 !important;
+  transition: all 0.15s linear;
+
+  ::v-deep {
+    .el-loading-mask {
+      user-select: none;
+
+      .el-loading-spinner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        .el-loading-text,
+        .el-icon-place {
+          color: #59d1fe;
+          font-size: 15px;
+        }
+
+        .el-icon-place {
+          font-size: 18px;
+          animation: 1.2s infinite jump;
+        }
+      }
+    }
+  }
+}
+
 .Home {
   width: 100%;
   height: 100%;
@@ -307,24 +324,4 @@ export default {
     }
   }
 }
-
-
-.btnBox {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 44%;
-  position: absolute;
-  z-index: 999999;
-  top: 5px;
-  left: 5px;
-}
-.btnItem {
-  border: 1px #fff solid;
-  padding: 3px;
-  border-radius: 3px;
-  color: #fff;
-  background: linear-gradient(to right, #237d9a, #074055);
-  cursor: pointer;
-}
 </style>