Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 f1bd35cd 作者: 方治民
操作

feat: 优化降水气温模块的测试效果

上级 37a646cd
正在显示 包含 127 行增加 和 145 行删除
src/pages/business/monitor/rain/index.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
// filter: {}, // filter: {},
// }) // })
// 地图配置 // 地图组件
const [registerMap, { isReady }] = useMapbox({ const [registerMap, { isReady }] = useMapbox({
// 说明: 地图数据来源标注展示 // 说明: 地图数据来源标注展示
attribution: { attribution: {
......
src/pages/business/monitor/tem/config.ts
// 页面通用配置信息或一些抽象方法 // 页面通用配置信息或一些抽象方法
// 单色块图例配置 // 单色块图例配置
// export const defaultLegendConfig = { export const defaultLegendConfig = {
// expand: false, expand: false,
// title: '单位: mm', title: '单位: mm',
// option: { option: {
// blockStyle: { blockStyle: {
// border: '1px solid #ccc', border: '1px solid #ccc',
// }, },
// items: [ items: [
// { {
// color: '#FFFFFF', color: '#FFFFFF',
// label: '0-0.1', label: '0-0.1',
// }, },
// { {
// color: '#A3F48A', color: '#A3F48A',
// label: '0.1-9.0', label: '0.1-9.0',
// }, },
// { {
// color: '#35AB02', color: '#35AB02',
// label: '10-24.9', label: '10-24.9',
// }, },
// { {
// color: '#61B9F9', color: '#61B9F9',
// label: '25-49.9', label: '25-49.9',
// }, },
// { {
// color: '#0403FF', color: '#0403FF',
// label: '50-99.9', label: '50-99.9',
// }, },
// { {
// color: '#FA02FA', color: '#FA02FA',
// label: '100-249.9', label: '100-249.9',
// }, },
// { {
// color: '#810042', color: '#810042',
// label: '>=250', label: '>=250',
// }, },
// ], ],
// }, },
// } }
// 多色块图例配置 // 多色块图例配置
// export const defaultLegendConfig = { // export const defaultLegendConfig = {
...@@ -145,81 +145,81 @@ ...@@ -145,81 +145,81 @@
// } // }
// 单边多图标图例 // 单边多图标图例
export const defaultLegendConfig = { // export const defaultLegendConfig = {
expand: true, // expand: true,
title: '', // title: '',
option: { // option: {
labelStyle: { // labelStyle: {
width: '85rpx', // width: '85rpx',
}, // },
items: [ // items: [
{ // {
label: '闪电', // label: '闪电',
items: [ // items: [
{ // {
icon: '/static/icons/legend/strong-convection/lightning.png', // icon: '/static/icons/legend/strong-convection/lightning.png',
}, // },
], // ],
}, // },
{ // {
label: '冰雹\n(mm)', // label: '冰雹\n(mm)',
items: [ // items: [
{ // {
icon: '/static/icons/legend/strong-convection/hail.0-5.png', // icon: '/static/icons/legend/strong-convection/hail.0-5.png',
label: '0-5', // label: '0-5',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/hail.5-10.png', // icon: '/static/icons/legend/strong-convection/hail.5-10.png',
label: '5-10', // label: '5-10',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/hail.10-20.png', // icon: '/static/icons/legend/strong-convection/hail.10-20.png',
label: '10-20', // label: '10-20',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/hail.+20.png', // icon: '/static/icons/legend/strong-convection/hail.+20.png',
label: '>=20', // label: '>=20',
}, // },
], // ],
}, // },
{ // {
label: '大风\n(m/s)', // label: '大风\n(m/s)',
items: [ // items: [
{ // {
icon: '/static/icons/legend/strong-convection/wind.17-25.png', // icon: '/static/icons/legend/strong-convection/wind.17-25.png',
label: '17-25', // label: '17-25',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/wind.25-30.png', // icon: '/static/icons/legend/strong-convection/wind.25-30.png',
label: '25-30', // label: '25-30',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/wind.+30.png', // icon: '/static/icons/legend/strong-convection/wind.+30.png',
label: '>=30', // label: '>=30',
}, // },
], // ],
}, // },
{ // {
label: '强降水\n(mm)', // label: '强降水\n(mm)',
items: [ // items: [
{ // {
icon: '/static/icons/legend/strong-convection/rain.20-30.png', // icon: '/static/icons/legend/strong-convection/rain.20-30.png',
label: '20-30', // label: '20-30',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/rain.30-50.png', // icon: '/static/icons/legend/strong-convection/rain.30-50.png',
label: '30-50', // label: '30-50',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/rain.50-80.png', // icon: '/static/icons/legend/strong-convection/rain.50-80.png',
label: '50-80', // label: '50-80',
}, // },
{ // {
icon: '/static/icons/legend/strong-convection/rain.+80.png', // icon: '/static/icons/legend/strong-convection/rain.+80.png',
label: '>=80', // label: '>=80',
}, // },
], // ],
}, // },
], // ],
}, // },
} // }
src/pages/business/monitor/tem/index.vue
...@@ -3,12 +3,13 @@ ...@@ -3,12 +3,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { defaultLegendConfig } from './config' import { defaultLegendConfig } from './config'
import { useShare } from '@/hooks/page/useShare' import { useShare } from '@/hooks/page/useShare'
import type { MapboxConfig } from '@/components/Map/Mapbox' import { useMapbox } from '@/components/Map/Mapbox/hook'
import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend' import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
import { SwitchWidget, useSwitchWidget } from '@/components/Map/Widgets/Switch' import { SwitchWidget, useSwitchWidget } from '@/components/Map/Widgets/Switch'
import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar' import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar'
import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox' import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar' import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'
import type { MapboxInstance } from '@/components/Map/Mapbox'
useShare() useShare()
...@@ -18,18 +19,15 @@ ...@@ -18,18 +19,15 @@
// filter: {}, // filter: {},
// }) // })
// 地图配置 // 地图组件
const config: MapboxConfig = { const [registerMap] = useMapbox({
// 说明: 地图数据来源标注展示
attribution: {
text: '湖南省气象台',
// align: 'bottom-left',
},
style: { style: {
// 说明: 根据每个页面的 widget 布局情况，可能需要适当调整地图的中心位置，让界面显示效果更好
center: [111.6, 26.170844], center: [111.6, 26.170844],
}, },
} onLoaded: (map: MapboxInstance, data: Recordable) => {
console.log('✨✨✨ Map Loaded', map, data)
},
})
// 顶部时间轴小部件 // 顶部时间轴小部件
const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({ const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({
...@@ -72,20 +70,6 @@ ...@@ -72,20 +70,6 @@
) )
}, },
}, },
buttons: [
{
icon: 'order',
label: '列表',
onClick: (e, { option, value }) => {
console.log(
'[TimeBarWidget] Button Click',
e,
option,
value.map((item) => formatTime(item)),
)
},
},
],
}) })
// 左侧工具栏小部件 // 左侧工具栏小部件
...@@ -93,8 +77,6 @@ ...@@ -93,8 +77,6 @@
show: true, show: true,
expand: true, expand: true,
showExpandButton: true, showExpandButton: true,
// 说明: 如果底部使用 bottom-left attribution 则需要加上 65rpx，默认显示在右侧，不会冲突
bottomPadding: '65rpx',
tools: [ tools: [
{ {
key: 'filter', key: 'filter',
...@@ -247,7 +229,7 @@ ...@@ -247,7 +229,7 @@
<template> <template>
<view class="page h-100vh bg-white"> <view class="page h-100vh bg-white">
<!-- 地图组件 --> <!-- 地图组件 -->
<Mapbox :config="config" /> <Mapbox @register="registerMap" />
<!-- 地图上方所有小部件 --> <!-- 地图上方所有小部件 -->
<view class="widgets"> <view class="widgets">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论