支持config.js中配置多层地图瓦片

web_src/src/components/common/MapComponent.vue

@@ -59,25 +59,28 @@ export default {
           maxZoom: mapParam.maxZoom || 19,
           minZoom: mapParam.minZoom || 1,
         });
-        let tileLayer = null;
+        let tileLayers = [];
         if (mapParam.tilesUrl) {
-          tileLayer = new Tile({
+          const tilesUrls = Array.isArray(mapParam.tilesUrl) ? mapParam.tilesUrl : [mapParam.tilesUrl]
-            source: new XYZ({
+          tilesUrls.forEach(tilesUrl => {
-              projection: getProj("EPSG:3857"),
+            tileLayers.push(new Tile({
-              wrapX: false,
+              source: new XYZ({
-              tileSize: 256 || mapParam.tileSize,
+                projection: getProj("EPSG:3857"),
-              url: mapParam.tilesUrl
+                wrapX: false,
-            })
+                tileSize: 256 || mapParam.tileSize,
+                url: tilesUrl
+              })
+            }))
           })
         }else {
-          tileLayer = new Tile({
+          tileLayers.push(new Tile({
-            preload: 4,
+              preload: 4,
-            source: new OSM(),
+              source: new OSM(),
-          })
+          }))
         }
         olMap = new Map({
           target: this.$refs.mapContainer, // 容器ID
-          layers:  [tileLayer], // 默认图层
+          layers: tileLayers, // 默认图层
           view: view,  // 视图
           controls:[   // 控件
             // new ZoomSlider(),

web_src/static/js/config.js

@@ -8,6 +8,7 @@ window.mapParam = {
   // 坐标系 GCJ-02 WGS-84,
   coordinateSystem: "GCJ-02",
   // 地图瓦片地址
+  // 地图瓦片地址 , 支持string[]类型作为多层地图瓦片
   tilesUrl: "http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
   // 瓦片大小
   tileSize: 256,