底图

src/components/easyMap/index.vue

@@ -130,7 +130,29 @@
         </template>
       </div>
     </template>
-    <div></div>
+    <div class="base-switch">
+      <el-popover
+          placement="left"
+          trigger="hover"
+          popper-class="easy-map-base-switch"
+      >
+        <template #reference>
+          <div style="width: 200px; height: 200px; background-color: red;"/>
+        </template>
+        <div class="base-switch-item" v-if="ref_olMap">
+          <template v-for="[k, v] in ref_olMap.baseLayersMap">
+            <div
+                class="base-item __hover"
+                :class="{active: judgeBaseLayerActive(k)}"
+                @click="ref_olMap.switchBaseLayer(k)"
+            >
+              <div class="label">{{ v.get("_label") }}</div>
+              <img :src="v.get('_img')" />
+            </div>
+          </template>
+        </div>
+      </el-popover>
+    </div>
   </div>
   <ToolsLocationCom v-model:show="toolsShow.location" :mapFuncToLocation="toLocation"/>
 </template>
@@ -403,4 +425,11 @@ export default defineComponent({
     }
   }
 }
+
+
+.base-switch {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
 </style>

src/components/easyMap/initMapInfo.ts

@@ -5,7 +5,7 @@ import LutuImg from './images/bg-land.png'
 import WeixingImg from './images/bg-sky.png'
 import store from '@/store/index'
 
-const isInternet = true
+const isInternet = false
 
 const baseMapView = {
   center: [109.6915958479584, 19.111636735969318],
@@ -13,20 +13,38 @@ const baseMapView = {
   zoom: 9
   // extent: [120.8953306326286,31.3667480047968,121.37735577911297,31.692561298253832]
 }
-const initBaseLayer = (obj) => {
-  const _layer = new layer.Tile({
-    source: new source.XYZ({
+const initBaseLayer = (obj: any) => {
+  const layers: any = []
+  obj.layersUrl.forEach((v: any) => {
+
+    const s = new source.XYZ({
       projection: "EPSG:4326",
-      url: `/${store.state.app.apiProxy.EzServer6Api}/EzServer6/Maps/${obj.key}/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={x}&Row={y}&Zoom={z}&V=0.3`,
-    }),
+      url: v.url,
+    })
+    const l = new layer.Tile({
+      source: s
+    })
+    if (v.extent?.length > 0) {
+      l.setExtent(v.extent)
+    }
+    if (v.maxZoom) {
+      l.setMaxZoom(v.maxZoom)
+    }
+    if (v.minZoom) {
+      l.setMinZoom(v.minZoom)
+    }
+    layers.push(l)
+  })
+  const layerGroup = new layer.Group({
+    layers: layers,
     visible: obj.visible,
   })
-  _layer.set('_maxZoom', obj.maxZoom)
-  _layer.set('_minZoom', obj.minZoom)
-  _layer.set('_easyMapOl_layerName', obj.name)
-  _layer.set('_label', obj.label)
-  _layer.set('_img', obj.img)
-  return _layer
+  layerGroup.set('_maxZoom', obj.maxZoom)
+  layerGroup.set('_minZoom', obj.minZoom)
+  layerGroup.set('_easyMapOl_layerName', obj.name)
+  layerGroup.set('_label', obj.label)
+  layerGroup.set('_img', obj.img)
+  return layerGroup
 }
 const initInternet = (obj) => {
   const _layer = new layer.Tile({
@@ -45,31 +63,86 @@ const initInternet = (obj) => {
 
 const baseMapLayers = [
   {
-    key: 'sea',
-    name: 'base_haitu',
-    label: '海图',
-    maxZoom: 14,
-    minZoom: 5,
+    key: 'key1',
+    name: 'base_key1',
+    label: 'key1',
+    maxZoom: 18,
+    minZoom: 1,
+    visible: true,
+    img: HaituImg,
+    layersUrl: [
+      {
+        url: `/${store.state.app.apiProxy.BaseMap1Api}/vec_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=vec&style=default&opacity=1&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
+      },
+      {
+        url: `/${store.state.app.apiProxy.BaseMap2Api}/mapserver/vmap/hn_bigdata_2018dt/getMAP?x={x}&y={y}&l={z}&styleId=hn_bigdata_2018dtys1&ratio=1&tilesize=256&clientVersion=jssdk_bate@%20leaflet%202.1.5`,
+        extent: [108.50508936658522, 18.127326424708514, 111.09756659719326, 20.163718157197533]
+      },
+      {
+        url: `/${store.state.app.apiProxy.BaseMap1Api}/cva_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=cva&style=default&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`
+      },
+    ]
+  },
+  {
+    key: 'key2',
+    name: 'base_key2',
+    label: 'key2',
+    maxZoom: 18,
+    minZoom: 1,
     visible: false,
-    img: HaituImg
+    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.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}/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: 'tdtsl',
-    name: 'base_tianditu',
-    label: '陆图',
-    maxZoom: 20,
-    minZoom: 8,
-    visible: true,
-    img: LutuImg
+    key: 'key3',
+    name: 'base_key3',
+    label: 'key3',
+    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.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}/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: 'hnimg',
-    name: 'base_weixingtu',
-    label: '卫星图',
-    maxZoom: 19,
-    minZoom: 8,
+    key: 'key4',
+    name: 'base_key4',
+    label: 'key4',
+    maxZoom: 18,
+    minZoom: 1,
     visible: false,
-    img: WeixingImg
+    img: HaituImg,
+    layersUrl: [
+      {
+        url: `/${store.state.app.apiProxy.BaseMap2Api}/mapserver/vmap/hn_bigdata_2018dt/getMAP?x={x}&y={y}&l={z}&styleId=hn_bigdata_2018dtys2&ratio=1&tilesize=256&clientVersion=jssdk_bate@%20leaflet%202.1.5`,
+      },
+      {
+        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}`,
+      },
+    ]
   },
 ]
 

src/store/modules/app.ts

@@ -3,7 +3,9 @@ import * as api from '@/api/index'
 
 const state = {
 	apiProxy: {
-		EzServer6Api: 'EzServer6-api',	// 地图底图代理
+		BaseMap1Api: 'BaseMap1-api',	// 地图底图代理1 http://59.255.48.160:81
+		BaseMap2Api: 'BaseMap2-api',	// 地图底图代理2 http://59.212.37.22
+		BaseMap3Api: 'BaseMap3-api',	// 地图底图代理3 http://59.212.146.170
 	},
 	userInfo: <any>{},
 }

src/views/gis/business/enterprise/index.vue

@@ -1,8 +1,8 @@
 <template>
   企业一张图
-  <div class="main">
-
-  </div>
+<!--  <div class="main">-->
+<!---->
+<!--  </div>-->
 </template>
 
 <script lang="ts">

src/views/gis/layout/index.vue

@@ -60,25 +60,29 @@ export default defineComponent({
     const mapLoad = (map, func) => {
       state.map = map
       state.mapFunc = func
-      initWMSElement()
+      // initWMSElement3()
     }
     const initWMSElement = () => {
+      const p = 'EPSG:4326'
       // 切片方案（0-18级
-      const projection = proj.get('EPSG:4326');
+      const projection = proj.get(p);
       const projectionExtent = projection.getExtent();
       const size = extent.getWidth(projectionExtent) / 256;
       const resolutions = new Array(19);
       const matrixIds = new Array(19);
       for (let z = 0; z < 19; ++z) {
         resolutions[z] = size / Math.pow(2, z);
-        matrixIds[z] = "EPSG:4326:" + z;
+        matrixIds[z] = z;
       }
       const _tileWMS = new WMTSSource({
-        url: 'http://192.168.31.19:8082/poiwmts/color/getTile2', // 这里需要替换成你的 WMTS 服务的 URL
-        layer: 'your_layer_name', // 替换为你的图层名称
-        matrixSet: 'EPSG:4326',
-        format: 'image/png',
-        projection: 'EPSG:4326',
+        // url: 'http://192.168.31.19:8082/poiwmts/color/getTile2', // 这里需要替换成你的 WMTS 服务的 URL
+        url: 'https://t4.tianditu.gov.cn/cva_w/wmts?tk=3cac3e6d53faf0377fa96bad29f03d2d', // 这里需要替换成你的 WMTS 服务的 URL
+        // layer: 'your_layer_name', // 替换为你的图层名称
+        layer: 'cva', // 替换为你的图层名称
+        matrixSet: 'w',
+        format: 'tiles',
+        // format: 'image/png',
+        projection: p,
         tileGrid: new WMTSTileGrid({
           origin: extent.getTopLeft(projectionExtent),
           resolutions: resolutions, // 这里填写你的分辨率数组
@@ -94,12 +98,37 @@ export default defineComponent({
         }),
         zIndex: 3
       })
-      const wmts = new layer.VectorTile({
+      const wmts = new layer.Tile({
         source: _tileWMS,
         zIndex: 2,
       })
       state.map.addLayer(wmts)
-      state.map.addLayer(layer_Debug)
+      // state.map.addLayer(layer_Debug)
+    }
+    const initWMSElement3 = () => {
+      const wmts = new layer.Tile({
+        source: new source.XYZ({
+          projection: "EPSG:4326",
+          url: `http://59.255.48.160:81/vec_c/wmts?tk=您的密钥&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=vec&style=default&opacity=1&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}
+`,
+        }),
+      })
+      const wmts2 = new layer.Tile({
+        source: new source.XYZ({
+          projection: "EPSG:4326",
+          url: `http://59.212.37.22/mapserver/vmap/hn_bigdata_2018dt/getMAP?x={x}&y={y}&l={z}&styleId=hn_bigdata_2018dtys1&ratio=1&tilesize=256&clientVersion=jssdk_bate@%20leaflet%202.1.5`,
+        }),
+        // extent: [109.04065590655215,18.651584245734945,110.3178165510834,19.541476823859945]
+      })
+      const wmts3 = new layer.Tile({
+        source: new source.XYZ({
+          projection: "EPSG:4326",
+          url: `http://59.255.48.160:81/cva_c/wmts?tk=您的密钥&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=cva&style=default&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
+        }),
+      })
+      state.map.addLayer(wmts)
+      // state.map.addLayer(wmts2)
+      state.map.addLayer(wmts3)
     }
     const menuCpt = computed(() => {
       return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children

vite.config.ts

@@ -39,19 +39,28 @@ export default defineConfig({
     host: '0.0.0.0',
     strictPort: false,
     proxy: {
-      '/api-ztpt/': {
-        target: 'http://127.0.0.1:3001/',
-        // target: 'http://10.110.35.47/',
+      '/BaseMap1-api/': {
+        // target: 'http://59.255.48.160:81/',
+        target: 'http://127.0.0.1:3999/',
         changeOrigin: true,
         rewrite: path => {
-          return path.replace(/^\/api-ztpt/, '')
+          return path.replace(/^\/BaseMap1-api/, '')
         }
       },
-      '/api/': {
-        target: 'http://8.140.240.182:18091/',
+      '/BaseMap2-api/': {
+        // target: 'http://59.212.37.22/',
+        target: 'http://127.0.0.1:3998/',
         changeOrigin: true,
         rewrite: path => {
-          return path.replace(/^\/api/, '')
+          return path.replace(/^\/BaseMap2-api/, '')
+        }
+      },
+      '/BaseMap3-api/': {
+        // target: 'http://59.212.146.170/',
+        target: 'http://127.0.0.1:3997/',
+        changeOrigin: true,
+        rewrite: path => {
+          return path.replace(/^\/BaseMap3-api/, '')
         }
       },
     }