底图

src/components/easyMap/initMapInfo.ts

@@ -4,7 +4,7 @@ import * as source from 'ol/source'
 import HaituImg from './images/bg-ocean.png'
 import store from '@/store/index'
 
-const isInternet = true
+const isInternet = false
 
 const baseMapView = {
   center: [109.6915958479584, 19.111636735969318],
@@ -61,9 +61,9 @@ const initInternet = (obj) => {
 
 const baseMapLayers = [
   {
-    key: 'key1',
-    name: 'base_key1',
-    label: 'key1',
+    key: 'LT',
+    name: 'base_LT',
+    label: '陆图',
     maxZoom: 18,
     minZoom: 1,
     visible: true,
@@ -82,53 +82,53 @@ const baseMapLayers = [
     ]
   },
   {
-    key: 'key2',
-    name: 'base_key2',
-    label: 'key2',
+    key: 'HT',
+    name: 'base_HT',
+    label: '海图',
     maxZoom: 18,
     minZoom: 1,
     visible: false,
     img: HaituImg,
     layersUrl: [
       {
-        url: `/${store.state.app.apiProxy.BaseMap1Api}/img_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=img&style=default&opacity=0.6&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
+        url: `/${store.state.app.apiProxy.BaseMap1Api}/ter_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=ter&style=default&tilematrix={z}&tilerow={y}&tilecol={x}`,
       },
       {
-        url: `/${store.state.app.apiProxy.BaseMap3Api}/ime-cloud/rest/hainan_img_2018/wmts?service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=default028mm&format=image%2Fjpgpng&height=256&width=256&layer=hainan_img_2018&style=default&minZoom=8&maxZoom=18&zIndex=4&bounds=13.257020557028%2C103.34794430865948%2C23.46552385201528%2C114.30558768331025&tilematrix={z}&tilerow={y}&tilecol={x}`,
-        extent: [103.34794430865948, 13.257020557028, 114.30558768331025, 23.46552385201528]
+        url: `/${store.state.app.apiProxy.BaseMap3Api}/ime-cloud/rest/hainan_dem/wmts?service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=default028mm&format=image%2Fjpgpng&height=256&width=256&layer=hainan_dem&style=default&minZoom=8&maxZoom=18&zIndex=4&bounds=17.17616389817063%2C106.9017014531631%2C21.04474386095089%2C113.04819115525501&tilematrix={z}&tilerow={y}&tilecol={x}`,
+        maxZoom: 18,
+        minZoom: 8,
+        extent: [106.9017014531631, 17.17616389817063, 113.04819115525501, 21.04474386095089]
       },
       {
-        url: `/${store.state.app.apiProxy.BaseMap1Api}/cia_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=cia&style=default&zIndex=4&tilematrix={z}&tilerow={y}&tilecol={x}`,
+        url: `/${store.state.app.apiProxy.BaseMap1Api}/cta_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=cta&style=default&tilematrix={z}&tilerow={y}&tilecol={x}`,
       },
     ]
   },
   {
-    key: 'key3',
-    name: 'base_key3',
-    label: 'key3',
+    key: 'WXT',
+    name: 'base_WXT',
+    label: '卫星图',
     maxZoom: 18,
     minZoom: 1,
     visible: false,
     img: HaituImg,
     layersUrl: [
       {
-        url: `/${store.state.app.apiProxy.BaseMap1Api}/ter_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=ter&style=default&tilematrix={z}&tilerow={y}&tilecol={x}`,
+        url: `/${store.state.app.apiProxy.BaseMap1Api}/img_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=img&style=default&opacity=0.6&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
       },
       {
-        url: `/${store.state.app.apiProxy.BaseMap3Api}/ime-cloud/rest/hainan_dem/wmts?service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=default028mm&format=image%2Fjpgpng&height=256&width=256&layer=hainan_dem&style=default&minZoom=8&maxZoom=18&zIndex=4&bounds=17.17616389817063%2C106.9017014531631%2C21.04474386095089%2C113.04819115525501&tilematrix={z}&tilerow={y}&tilecol={x}`,
-        maxZoom: 18,
-        minZoom: 8,
-        extent: [106.9017014531631, 17.17616389817063, 113.04819115525501, 21.04474386095089]
+        url: `/${store.state.app.apiProxy.BaseMap3Api}/ime-cloud/rest/hainan_img_2018/wmts?service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=default028mm&format=image%2Fjpgpng&height=256&width=256&layer=hainan_img_2018&style=default&minZoom=8&maxZoom=18&zIndex=4&bounds=13.257020557028%2C103.34794430865948%2C23.46552385201528%2C114.30558768331025&tilematrix={z}&tilerow={y}&tilecol={x}`,
+        extent: [103.34794430865948, 13.257020557028, 114.30558768331025, 23.46552385201528]
       },
       {
-        url: `/${store.state.app.apiProxy.BaseMap1Api}/cta_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=cta&style=default&tilematrix={z}&tilerow={y}&tilecol={x}`,
+        url: `/${store.state.app.apiProxy.BaseMap1Api}/cia_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=cia&style=default&zIndex=4&tilematrix={z}&tilerow={y}&tilecol={x}`,
       },
     ]
   },
   {
-    key: 'key4',
-    name: 'base_key4',
-    label: 'key4',
+    key: 'HYS',
+    name: 'base_HYS',
+    label: '黑元素',
     maxZoom: 18,
     minZoom: 1,
     visible: false,

src/views/gis/layout/tools/base.vue

@@ -1,6 +1,15 @@
 <template>
-  <div class="base-com">
-    底图
+  <div class="base-com __box-shadow">
+    <template v-for="[k, v] in mapFunc?.baseLayer?.switchMapper">
+      <div
+          class="base-item __hover"
+          :class="{active: mapFunc.baseLayer.judgeActive(k)}"
+          @click="mapFunc.baseLayer.switchLayer(k)"
+      >
+        <div class="label">{{ v.get("_label") }}</div>
+        <img :src="v.get('_img')" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -48,4 +57,36 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.base-com {
+  background-color: #FFFFFF;
+  padding: 12px 14px;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 10px;
+  .base-item {
+    height: 54px;
+    position: relative;
+    &.active {
+      border: 2px solid #1174DB;
+    }
+    .label {
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.2);
+      width: 100%;
+      height: 16px;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #FFFFFF;
+    }
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>