feat: 实现气温模块的色斑和数值叠加显示效果

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

@@ -3,13 +3,14 @@
 <script setup lang="ts">
     import { hourTemLegendConfig } from './config'
     import { useShare } from '@/hooks/page/useShare'
-    import { useMapbox } from '@/components/Map/Mapbox/hook'
+    import { buildGeoJSONSourceDataUrl, 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 } from '@/components/Map/Mapbox'
+    import { HandlerUtil } from '@/components/Map/Mapbox'
 
     useShare()
 
@@ -19,13 +20,93 @@
     //     filter: {},
     // })
 
+    const baseUrl = 'http://qks.straw.yiring.com:40051/tbm/api'
+    const token = `68b919d2-2ea0-4ad3-9521-9e624e1563ac`
+
     // 地图组件
-    const [registerMap] = useMapbox({
+    const [registerMap, map] = useMapbox({
         style: {
             center: [111.6, 26.170844],
         },
         onLoaded: (map: MapboxInstance, data: Recordable) => {
             console.log('✨✨✨ Map Loaded', map, data)
+
+            // 模拟色斑叠加数据源
+            map.setGeoJSONSourceForRequest(
+                'tem-splot',
+                buildGeoJSONSourceDataUrl({
+                    url: `${baseUrl}/live/tem/getTemStain`,
+                    params: {
+                        stationType: 1,
+                        liveQueryType: 'ONE_HOUR_TEM',
+                        Authorization: token,
+                    },
+                }),
+                (response) => response.body.jsonObject,
+            )
+
+            // 模拟色斑叠加图层
+            map.addLayer(
+                {
+                    id: 'tem-splot',
+                    type: 'fill',
+                    source: 'tem-splot',
+                    paint: {
+                        'fill-color': {
+                            type: 'identity',
+                            property: 'color',
+                        },
+                        'fill-opacity': 1,
+                    },
+                },
+                'fill-placeholder',
+            )
+
+            // 模拟数值叠加数据源
+            map.setGeoJSONSourceForRequest(
+                'tem-text',
+                buildGeoJSONSourceDataUrl({
+                    url: `${baseUrl}/live/tem/getTemList`,
+                    params: {
+                        stationType: 1,
+                        liveQueryType: 'ONE_HOUR_TEM',
+                        Authorization: token,
+                    },
+                }),
+                // 此处使用
+                (response) => {
+                    const features = response.body.liveVos.map(function (item) {
+                        item.key = '气温'
+                        item.suffix = '°C'
+                        return HandlerUtil.createDefaultGeoJSONFeatureData(item)
+                    })
+                    return HandlerUtil.createDefaultGeoJSONSymbolSourceData(features)
+                },
+            )
+
+            // 模拟数值叠加图层
+            map.addLayer({
+                id: 'tem-text',
+                type: 'symbol',
+                source: 'tem-text',
+                layout: {
+                    'text-field': '{value}',
+                    'text-size': 14,
+                    'text-offset': [0, 1.2],
+                    'icon-image': 'point.normal',
+                    'icon-anchor': 'top',
+                    'icon-size': 0.4,
+                },
+                paint: {
+                    'text-color': '#3766fd',
+                    'text-halo-color': '#fff',
+                    'text-halo-width': 1,
+                },
+            })
+
+            map.on('click', 'tem-text', function (e) {
+                console.log('🚀🚀🚀', e)
+            })
         },
     })
 
@@ -167,6 +248,23 @@
             setSwitchProps({ bottom: value })
             setLegendProps({ bottom: value })
             setToolBoxProps({ bottom: value })
+
+            // 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
+            if (map.isReady.value) {
+                if (value === '210rpx') {
+                    map.flyTo({
+                        center: [111.6, 26.770844],
+                        speed: 0.2,
+                        essential: true,
+                    })
+                } else {
+                    map.flyTo({
+                        center: [111.6, 26.170844],
+                        speed: 0.2,
+                        essential: true,
+                    })
+                }
+            }
         },
     )
 </script>