样式修改

src/components/gis-map/index.html

@@ -1,9 +1,7 @@
-<div class="map" id="map">
+<div class="map" id="map22222">
     <!--选择地址-->
     <div class="select_address">
-      <div class="dot left"></div>
-      <div class="dot right"></div>
-      <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader">
+      <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader2">
           <template slot-scope="{ node, data }">
               <span>{{ data.label }}</span>
               <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>

src/components/gis-map/index.js

@@ -68,7 +68,7 @@ export default {
       townBorderLayerName: "",        // 乡镇边界图层名称
       villageBorderLayerName: "",     // 村边界图层名称
       groupBorderLayerName: "",       // 组边界图层名称
-      addrOptions: [],
+      addrOptions: []
     };
   },
   computed: {
@@ -200,7 +200,7 @@ export default {
       } else {
         mapCenterLocation = [116.391461, 39.902359];
       }
-      gis = new GisUtils('map')
+      gis = new GisUtils('map22222')
       gis.addTianDiTuLayer()
       gis.addAnnotationLayer()
       if (dept.deptLevel === '5') {
@@ -229,7 +229,7 @@ export default {
       }
       // 添加坐标点图层
       if (dept.children) {
-        this.addDeptLayer(dept.children, 'yellow.png');
+        this.addDeptLayer(dept.children);
       }
       gis.getView().setCenter(fromLonLat(mapCenterLocation))
 
@@ -243,7 +243,6 @@ export default {
           // 镇级：加载村级坐标点
           if (feature.get('level') === 'deptPoint') {
             let parentIds = [];
-            console.log(feature.get('deptId'), 888);
             this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds);
             this.addrText = parentIds;
             this.selectAddress(parentIds);
@@ -313,7 +312,7 @@ export default {
     selectAddress (value, isLocated = true) {  // isLocated 控制地图是否跳转
       this.queryParams.deptId = value[value.length - 1];
       this.getData(DEPT_CHANGED);
-      let node = this.$refs["cascader"].panel.getNodeByValue(value);
+      let node = this.$refs["cascader2"].panel.getNodeByValue(value);
       this.drawMap(node, isLocated);
     },
 

src/components/gis-map/index.scss

@@ -4,21 +4,35 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: -2;
+  z-index: 1;
+}
+
+/deep/ .el-cascader {
+  .el-input {
+    background-color: transparent !important;
+
+    .el-input__inner {
+      border: 0;
+      background-color: transparent !important;
+      color: white;
+    }
+  }
 }
 
 .mask {
   z-index: 1;
   width: 100%;
   height: 100%;
-  box-shadow: inset 0px 0px 100px 100px rgba(0, 0, 0, 0.59);
+  box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左
   /* 四周黑色 */
-  pointer-events: none;
+  // pointer-events: none;
   /* 允许地图事件穿透 */
 }
 
 .select_address {
-  z-index: 10;
+  z-index: 22;
+  // cursor: pointer;
+  // pointer-events: none;
   position: absolute;
   left: 480px;
   top: 112px;

src/style/_base.scss

@@ -23,11 +23,12 @@ body {
 }
 
 .page {
+  overflow: hidden;
   position: relative;
   width: 100vw;
-  min-width: 1920px;
+  // min-width: 1920px;
   height: 100vh;
-  min-height: 1080px;
+  // min-height: 1080px;
 
   .left_side {
     position: absolute;

src/views/property/index.js

@@ -101,10 +101,6 @@ export default {
       return this.comps[this.tab]
     }
   },
-  created () {
-  },
-  mounted () {
-  },
   methods: {
     tabChange (info) {
       this.tab = info.id;

src/views/property/main-gis/index.scss

@@ -9,7 +9,7 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    box-shadow: inset 0px 0px 100px 100px rgba(0, 0, 0, 0.59);
+    box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左
     /* 四周黑色 */
     pointer-events: none;
     /* 允许地图事件穿透 */

src/views/resources/main-gis/index.scss

@@ -9,7 +9,7 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    box-shadow: inset 0px 0px 100px 100px rgba(0, 0, 0, 0.59);
+    box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左
     /* 四周黑色 */
     pointer-events: none;
     /* 允许地图事件穿透 */