网格标绘增加图层切换

examples/router/axios.js

@@ -1,5 +1,5 @@
-import instance from '../../ui/lib/js/request'
 import {Message} from 'element-ui'
+import instance from '../../ui/lib/js/request'
 
 let baseURLs = {
   production: "/",
@@ -21,8 +21,8 @@ instance.interceptors.request.use(config => {
     config.baseURL = "/qxn"
   } else if (/\/xiushan/.test(location.pathname)) {
     config.baseURL = "/xsjr"
-  // } else if (/project\/oms/.test(location.pathname)) {
-  //   config.baseURL = "/omsapi"
+  } else if (/project\/oms/.test(location.pathname)) {
+    config.baseURL = "/omsapi"
   } else if (/#url-/.test(location.hash)) {
     config.baseURL = location.hash.replace(/#url-/, '/')
   }

packages/grid/AppGridBlock/components/mapPlotting.vue

@@ -36,6 +36,10 @@
             <el-button @click="clear()">清除绘制</el-button>
           </el-button-group>
         </div>
+        <div class="mapLayerSwitcher" flex>
+          <div class="item" :class="{current:mapType=='vector'}" @click="mapType='vector'"/>
+          <div class="item satellite" :class="{current:mapType=='satellite'}" @click="mapType='satellite'"/>
+        </div>
       </div>
     </ai-dialog>
   </section>
@@ -58,6 +62,19 @@ export default {
   computed: {
     ...mapState(['user']),
   },
+  watch: {
+    mapType(v) {
+      if (v == 'satellite') {
+        for (const k in this.layers) {
+          this.layers[k].show()
+        }
+      } else {
+        for (const k in this.layers) {
+          this.layers[k].hide()
+        }
+      }
+    }
+  },
   data() {
     return {
       map: null,
@@ -66,7 +83,9 @@ export default {
       searchAddress: "",
       overlays: [],
       points: [],
-      dialog: false
+      dialog: false,
+      mapType: "vector",
+      layers: {},
     }
   },
   methods: {
@@ -100,6 +119,14 @@ export default {
         this.map = new AMap.Map("container", {
           resizeEnable: true,
         });
+        /* 添加卫星图层*/
+        this.layers.roadNet = new AMap.TileLayer.RoadNet({zIndex: 11})
+        this.layers.satellite = new AMap.TileLayer.Satellite({zIndex: 10})
+        this.map.addLayer(this.layers.roadNet)
+        this.map.addLayer(this.layers.satellite)
+        this.layers.roadNet.hide()
+        this.layers.satellite.hide()
+        /*end*/
         this.placeSearch = new AMap.PlaceSearch({
           pageSize: 5, // 单页显示结果条数
           pageIndex: 1, // 页码
@@ -197,9 +224,76 @@ export default {
       bottom: 20px;
       z-index: 10000;
     }
+
+    .mapLayerSwitcher {
+      position: absolute;
+      z-index: 202304061607;
+      bottom: 20px;
+      right: 12px;
+      background-color: #fff;
+      padding: 5px;
+      width: fit-content;
+      height: 56px;
+      box-sizing: content-box;
+      overflow: hidden;
+      transition: width 2s ease;
+      gap: 10px;
+
+      &:hover {
+        .item {
+          display: block;
+        }
+      }
+
+      .item {
+        position: relative;
+        width: 80px;
+        height: 56px;
+        border: 1px dashed #ddd;
+        cursor: pointer;
+        flex-shrink: 0;
+        background-image: url("https://cdn.cunwuyun.cn/map/defaultMap.png");
+        box-sizing: border-box;
+        color: #fff;
+        background-size: 100%;
+        display: none;
+
+        &.current {
+          border: 1px solid #366FFF;
+          display: block !important;
+
+          &:before {
+            background-color: #366FFF;
+          }
+        }
+
+        &:hover {
+          border-color: #333;
+        }
+
+        &:before {
+          font-size: 12px;
+          line-height: 18px;
+          padding: 0 3px;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          content: "地图";
+          user-select: none;
+        }
+
+        &.satellite {
+          background-image: url("https://cdn.cunwuyun.cn/map/satelliteMap.png");
+
+          &:before {
+            content: "卫星"
+          }
+        }
+      }
+    }
   }
 
-  :deep(.fullscreenMap ){
+  :deep(.fullscreenMap ) {
     .el-dialog {
       display: flex;
       flex-direction: column;
@@ -222,11 +316,11 @@ export default {
     }
   }
 
-  :deep( .amap-copyright ){
+  :deep( .amap-copyright ) {
     display: none !important;
   }
 
-  :deep( .amap-logo ){
+  :deep( .amap-logo ) {
     display: none !important;
   }
 }

packages/grid/AppGridBlock/index.js

@@ -1,6 +0,0 @@
-import component from './AppGridBlock.vue'
-
-component.install = function (Vue) {
-  Vue.component(component.name, component)
-}
-export default component