增加 mapbox 初始化相关逻辑

src/utils/mapbox-utils.js

@@ -1,5 +1,96 @@
 import Vue from 'vue'
 
+export function initMapbox(mapId, options = {}) {
+    const map = new window.mapboxgl.Map({
+        container: mapId,
+        // style: 'mapbox://styles/mapbox/standard',
+        style: {
+            "version": 8,
+            "name": "default_style",
+            // mapbox地图使用的图标
+            "sprite": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/sprites/sprite`,
+            // 使用官方标注字体（需联网）
+            "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+            // 自部署标注字体（无需联网），glyphs 前有两个斜杠时，可能导致404
+            // "glyphs": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/glyphs/{fontstack}/{range}.pbf`,
+            "sources": {
+                "影像地图": {
+                    "type": "raster",
+                    "tiles": [
+                        Vue.config.tiles[options.tileKey || "gaode"]
+                    ],
+                    "tileSize": 256,
+                    // "minzoom": 0,
+                    // "maxzoom": baseMapMaxZoom
+                }
+            },
+            "layers": [
+                {
+                    "id": "影像地图",
+                    "type": "raster",
+                    "source": "影像地图",
+                    "layout": { visibility: "visible" },
+                    // "minzoom": 0,
+                    // "maxzoom": baseMapMaxZoom
+                }
+            ]
+        },
+        config: {
+            basemap: {
+                theme: 'monochrome',
+                lightPreset: 'night'
+            }
+        },
+        zoom: options.zoom || 5,
+        center: options.center || [112, 20],
+        minZoom: options.minZoom || 2,
+        maxZoom: options.maxZoom || 29,
+        trackResize: true,
+        scrollZoom: false, // 禁用滚轮缩放
+        // 地图默认字体
+        localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
+        pitch: 0,
+        bearing: 0,
+        // // 禁用所有旋转和俯仰角控制
+        // dragRotate: false,
+        // touchZoomRotate: false,
+        // pitchWithRotate: false,
+        // maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
+        antialias: true,
+        attributionControl: false,
+        boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
+        preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
+        projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
+    });
+    Vue.config.maps[mapId] = map;
+
+    // 确保窗口大小改变时，地图能正确铺满容器
+    window.addEventListener('resize', (event) => {
+        map.resize();
+        // // maps.forEach((key: string, value: any) => {
+        // //     console.log(`${key}: ${value}`);
+        // // });
+        // for (let [key, value] of Object.entries(maps)) {
+        //   // value.resize();
+        // }
+        // Object.values(maps).forEach((map) => {
+        //   map.resize();
+        // });
+    });
+
+    // handleWheel("voyageMap_ship");
+    Vue.config.maps[mapId].scrollZoom.enable();
+    initSprites(mapId)
+
+    map.on('load', () => {
+        // 加载海岸线
+        // loadVectorLayer("GSHHS_f_L1", ["line"], ["#5c71c3"], "visible", "workUnitMap_ship", 'ougp');
+        // 加载等深线
+        // loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
+        // loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
+    });
+}
+
 /**
  * 获取所有图层信息
  * @param {mapboxgl.Map} map - Mapbox 地图实例