feat: 降水模块新增 AffixFilterWidget 示例

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

@@ -13,6 +13,7 @@
     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 { AffixFilterWidget, useAffixFilterWidget } from '@/components/Map/Widgets/AffixFilter'
     import type { MapboxInstance } from '@/components/Map/Mapbox'
 
     useShare()
@@ -104,6 +105,49 @@
         ],
     })
 
+    // 吸附过滤小部件
+    const [registerAffixFilterWidget] = useAffixFilterWidget({
+        show: true,
+        // layout: 'horizontal',
+        // style: 'bar',
+        options: [
+            {
+                key: 'area',
+                items: [
+                    {
+                        text: '大河流域',
+                        value: 'big',
+                        checked: true,
+                    },
+                    {
+                        text: '中小河流域',
+                        value: 'medium',
+                    },
+                ],
+                onChange: (option, options) => {
+                    console.log('[AffixFilterWidget] ChangeOption', option, options)
+                },
+            },
+            {
+                key: 'area2',
+                items: [
+                    {
+                        text: '大河流域2',
+                        value: 'big',
+                        checked: true,
+                    },
+                    {
+                        text: '中小河流域2',
+                        value: 'medium',
+                    },
+                ],
+                onChange: (option, options) => {
+                    console.log('[AffixFilterWidget] ChangeOption', option, options)
+                },
+            },
+        ],
+    })
+
     // 左侧工具栏小部件
     const [registerToolBoxWidget, { setProps: setToolBoxProps }] = useToolBoxWidget({
         show: true,
@@ -270,6 +314,9 @@
             <!-- 时间栏小部件 -->
             <TimeBarWidget @register="registerTimeBarWidget" />
 
+            <!-- 吸附过滤小部件 -->
+            <AffixFilterWidget @register="registerAffixFilterWidget" />
+
             <!-- 左侧工具栏小部件 -->
             <ToolBoxWidget @register="registerToolBoxWidget" />