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