fix: 修复 Mapbox 组件设计调整后的相关使用变更

src/pages/business/monitor/rain/index.vue

@@ -14,7 +14,6 @@
     import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
     import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
     import { AffixFilterWidget, useAffixFilterWidget } from '@/components/Map/Widgets/AffixFilter'
-    import type { MapboxInstance } from '@/components/Map/Mapbox'
 
     useShare()
 
@@ -35,8 +34,8 @@
             // 说明: 根据每个页面的 widget 布局情况，可能需要适当调整地图的中心位置，让界面显示效果更好
             center: [111.6, 26.170844],
         },
-        onLoaded: (map: MapboxInstance, data: Recordable) => {
-            console.log('✨✨✨ Map Loaded', map, data)
+        onLoaded: (data: Recordable) => {
+            console.log('✨✨✨ Map Loaded', data)
             Message.alert(JSON.stringify(data), '地图加载完成')
         },
     })

src/pages/business/monitor/tem/index.vue

@@ -3,13 +3,13 @@
 <script setup lang="ts">
     import { hourTemLegendConfig } from './config'
     import { useShare } from '@/hooks/page/useShare'
-    import { buildGeoJSONSourceDataUrl, useMapbox } from '@/components/Map/Mapbox/hook'
+    import { useMapbox } from '@/components/Map/Mapbox/hook'
     import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
     import { SwitchWidget, useSwitchWidget } from '@/components/Map/Widgets/Switch'
     import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar'
     import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
     import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
-    import type { MapboxInstance, Station } from '@/components/Map/Mapbox'
+    import type { Station } from '@/components/Map/Mapbox'
     import { HandlerUtil } from '@/components/Map/Mapbox'
 
     useShare()
@@ -20,29 +20,25 @@
     //     filter: {},
     // })
 
-    const baseUrl = 'http://qks.straw.yiring.com:40051/tbm/api'
-    const token = `68b919d2-2ea0-4ad3-9521-9e624e1563ac`
-
     // 地图组件
     const [registerMap, map] = useMapbox({
         style: {
             center: [111.6, 26.170844],
         },
-        onLoaded: (map: MapboxInstance, data: Recordable) => {
-            console.log('✨✨✨ Map Loaded', map, data)
+        onLoaded: () => {
+            console.log('✨✨✨ Map Loaded')
 
             // 模拟色斑叠加数据源
             map.setGeoJSONSourceForRequest(
                 'tem-splot',
-                buildGeoJSONSourceDataUrl({
-                    url: `${baseUrl}/live/tem/getTemStain`,
+                {
+                    url: '/live/tem/getTemStain',
                     params: {
                         stationType: 1,
                         liveQueryType: 'ONE_HOUR_TEM',
-                        Authorization: token,
                     },
-                }),
-                (response) => response.body.jsonObject,
+                },
+                (body) => body.jsonObject,
             )
 
             // 模拟色斑叠加图层
@@ -65,17 +61,16 @@
             // 模拟数值叠加数据源
             map.setGeoJSONSourceForRequest(
                 'tem-text',
-                buildGeoJSONSourceDataUrl({
-                    url: `${baseUrl}/live/tem/getTemList`,
+                {
+                    url: '/live/tem/getTemList',
                     params: {
                         stationType: 1,
                         liveQueryType: 'ONE_HOUR_TEM',
-                        Authorization: token,
                     },
-                }),
+                },
                 // 此处使用
-                (response) => {
-                    const features = response.body.liveVos.map((item: Station) => {
+                (body) => {
+                    const features = body.liveVos.map((item: Station) => {
                         item.key = '气温'
                         item.suffix = '°C'
                         return HandlerUtil.createDefaultPointFeature(item)
@@ -107,6 +102,11 @@
             map.on('click', 'tem-text', function (e) {
                 console.log('🚀🚀🚀', e)
             })
+
+            console.log('✨✨✨ Map Loaded End')
+        },
+        onSourceRequestHandle: (data) => {
+            console.log('✨✨✨ Map onSourceRequestHandle', data)
         },
     })
 

src/pages/business/monitor/wind/index.vue

@@ -3,18 +3,16 @@
 <script setup lang="ts">
     import { hourTemLegendConfig, windheaderData, windtableData } from './config'
     import { useShare } from '@/hooks/page/useShare'
-    import { buildGeoJSONSourceDataUrl, useMapbox } from '@/components/Map/Mapbox/hook'
+    import { useMapbox } from '@/components/Map/Mapbox/hook'
     import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
     import { SwitchWidget, useSwitchWidget } from '@/components/Map/Widgets/Switch'
     import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar'
     import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
     import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
-    import type { MapboxInstance, Station } from '@/components/Map/Mapbox'
+    import type { Station } from '@/components/Map/Mapbox'
     import { HandlerUtil } from '@/components/Map/Mapbox'
-    import { useGlobSetting } from '/@/hooks/setting'
 
     useShare()
-    const globSetting = useGlobSetting()
     // 页面参数
     const param = reactive({
         query: {
@@ -67,31 +65,26 @@
         }
         return toRaw(params)
     } */
-    const baseUrl = `${globSetting.apiUrl}${globSetting.urlPrefix}`
-    // const token = `68b919d2-2ea0-4ad3-9521-9e624e1563ac`
-    const token = `8b218589-12cf-4de2-9f62-b00a5dfcab82`
     // 地图组件
     // const [registerMap, map] = useMapbox({
-    const [registerMap, { setGeoJSONSourceData }, map] = useMapbox({
+    const [registerMap, map] = useMapbox({
         style: {
             center: [111.6, 26.170844],
         },
-        onLoaded: (map: MapboxInstance, data: Recordable) => {
+        onLoaded: (data: Recordable) => {
             console.log('✨✨✨ Map Loaded', map, data)
 
             // 模拟色斑叠加数据源
             map.setGeoJSONSourceForRequest(
                 'wind-splot',
-                buildGeoJSONSourceDataUrl({
-                    // url: `${baseUrl}/live/tem/getTemStain`,
-                    url: `${baseUrl}/live/wind/getWindStain`,
+                {
+                    url: `/live/wind/getWindStain`,
                     params: {
                         stationType: 1,
                         liveQueryType: 'TWO_MINUTES_WIND',
-                        Authorization: token,
                     },
-                }),
-                (response) => response.body.jsonObject,
+                },
+                (body) => body.jsonObject,
             )
 
             // 模拟色斑叠加图层
@@ -114,17 +107,16 @@
             // 模拟数值叠加数据源
             map.setGeoJSONSourceForRequest(
                 'wind-text',
-                buildGeoJSONSourceDataUrl({
-                    url: `${baseUrl}/live/wind/getWindList`,
+                {
+                    url: `/live/wind/getWindList`,
                     params: {
                         stationType: 1,
                         liveQueryType: 'TWO_MINUTES_WIND',
-                        Authorization: token,
                     },
-                }),
+                },
                 // 此处使用
-                (response) => {
-                    const features = response.body.liveVos.map((item: Station) => {
+                (body) => {
+                    const features = body.liveVos.map((item: Station) => {
                         item.key = '风速'
                         item.suffix = 'm/s'
                         return HandlerUtil.createDefaultPointFeature(item)
@@ -159,12 +151,6 @@
         },
     })
     function clickTest() {
-        console.log('setGeoJSONSourceData', setGeoJSONSourceData)
-        setGeoJSONSourceData('wind-splot', {
-            type: 'FeatureCollection',
-            features: [],
-        })
-
         param.minmaxData = [
             { label: '最大风速', value: '99m/s' },
             { label: '平均风速', value: '28m/s' },
@@ -326,7 +312,7 @@
 
             // 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
             if (map?.isReady?.value) {
-                if (value === '210rpx') {
+                if (value === 220) {
                     map.flyTo({
                         center: [111.6, 26.770844],
                         speed: 0.2,