test demo

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

@@ -1,5 +1,15 @@
 <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"
@@ -72,6 +82,7 @@ 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: {
@@ -102,6 +113,7 @@ export default {
       mapZoom: '7.5',   // 默认值'7.5'   String类型
       mapCenter: lnglat, //默认值[118.75, 36.46] Array类型
 
+      isShow: true,
     };
   },
   provide() {
@@ -128,6 +140,28 @@ 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;
 
@@ -273,4 +307,24 @@ 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>