@tsingroc/tsingroc-components 3.14.0 → 4.0.0

package/src/components/WeatherMap.tsx

@@ -0,0 +1,521 @@
+import * as wl from "weatherlayers-gl";
+import { Button, type ButtonProps, Flex, Slider, Spin, theme } from "antd";
+import {
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+  useMemo,
+  useState,
+} from "react";
+import { MdDewPoint, MdThermostat } from "react-icons/md";
+import {
+  WiBarometer,
+  WiCloudy,
+  WiHumidity,
+  WiRain,
+  WiStrongWind,
+} from "react-icons/wi";
+import { createStyles } from "antd-style";
+import dayjs from "dayjs";
+import DeckGL from "deck.gl";
+
+import {
+  extractMagnitudeData,
+  extractScalarData,
+  extractVectorData,
+  getBounds,
+  type WeatherData,
+} from "../deckgl/WeatherData";
+import { TiandituLayer } from "../deckgl";
+import TsingrocTheme from "./TsingrocTheme";
+import VerticalColorLegend from "./VerticalColorLegend";
+
+export { type WeatherData };
+
+export interface WeatherMapProps extends HTMLAttributes<HTMLDivElement> {
+  /** 天地图平台的 token。*/
+  tiandituTk: string;
+  /** 要显示的天气数据。如果为 `undefined`，则会显示加载界面。*/
+  data: WeatherData | undefined;
+}
+
+/**
+ * 一张显示各类天气信息的地图。
+ *
+ * 多余的属性会被传递给组件最外层的 [`div` 元素][1]。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+function WeatherMap(props: WeatherMapProps) {
+  const { tiandituTk, data, ...rest } = props;
+  const { token } = theme.useToken();
+  const boundingBox = data ? getBounds(data) : undefined;
+  const [selectedScalar, setSelectedScalar] = useState(SCALAR_VARIABLES[0]);
+  const hasWind = !!(
+    data &&
+    data.data_vars.wind_component_u_10m &&
+    data.data_vars.wind_component_v_10m
+  );
+  const scalarFrames = useMemo(() => {
+    if (!data) return undefined;
+    if (
+      selectedScalar.key === "wind_speed_10m" &&
+      !data.data_vars.wind_speed_10m &&
+      hasWind
+    ) {
+      return extractMagnitudeData(
+        data,
+        "wind_component_u_10m",
+        "wind_component_v_10m",
+      );
+    }
+    return extractScalarData(data, selectedScalar.key);
+  }, [data, selectedScalar, hasWind]);
+  const [showWind, setShowWind] = useState(true);
+  const windFrames = useMemo(() => {
+    if (!(hasWind && showWind)) return undefined;
+    return extractVectorData(
+      data,
+      "wind_component_u_10m",
+      "wind_component_v_10m",
+    );
+  }, [data, hasWind, showWind]);
+  const [timeIdx, setTimeIdx] = useState(0);
+  const scalarFrame = scalarFrames?.[timeIdx];
+  const windFrame = windFrames?.[timeIdx];
+  const palette = useMemo(() => {
+    if (!scalarFrame) return undefined;
+    return adaptiveColorCoding(
+      scalarFrame.min,
+      scalarFrame.max,
+      selectedScalar.adaptivePalette!,
+    );
+  }, [selectedScalar, scalarFrame]);
+  return (
+    <TsingrocTheme>
+      <div {...rest} style={{ position: "relative", ...rest.style }}>
+        <DeckGL
+          initialViewState={{ longitude: 0, latitude: 0, zoom: 0, maxPitch: 0 }}
+          controller={{ dragRotate: false }}
+          layers={[
+            new TiandituLayer({ id: "base", tiandituTk }),
+            new TiandituLayer({ id: "ann", tiandituTk, layer: "annotation" }),
+            scalarFrame
+              ? new wl.RasterLayer({
+                  id: "scalar",
+                  opacity: 0.5,
+                  bounds: boundingBox,
+                  image: scalarFrame.image,
+                  palette,
+                })
+              : null,
+            windFrame
+              ? new wl.ParticleLayer({
+                  id: "wind",
+                  opacity: 0.5,
+                  bounds: boundingBox,
+                  image: windFrame,
+                  numParticles: 1000,
+                  maxAge: 30,
+                  speedFactor: 10,
+                  width: window.devicePixelRatio,
+                })
+              : null,
+          ]}
+        />
+        {data && (
+          <div
+            style={{
+              position: "absolute",
+              inset: "auto 0 0 0",
+              padding: "4px 8px 0 8px",
+              background: "linear-gradient(to bottom, transparent, #0007)",
+            }}
+          >
+            <Slider
+              value={timeIdx}
+              min={0}
+              max={data.dims.time - 1}
+              step={1}
+              onChange={setTimeIdx}
+              tooltip={{
+                formatter: (value) =>
+                  dayjs
+                    .unix(data.coords.time[value!])
+                    .format("YYYY-MM-DD HH:mm:ss"),
+              }}
+            />
+          </div>
+        )}
+        <Flex
+          vertical
+          style={{
+            position: "absolute",
+            inset: "8px 8px auto auto",
+            borderRadius: token.borderRadius,
+            padding: token.paddingXXS,
+            background: token.colorBgMask,
+          }}
+        >
+          {SCALAR_VARIABLES.filter(
+            (scalar) =>
+              !data ||
+              scalar.key in data.data_vars ||
+              (scalar.key === "wind_speed_10m" && hasWind),
+          ).map((scalar) => (
+            <ToolbarButton
+              key={scalar.key}
+              icon={scalar.icon}
+              selected={selectedScalar.key === scalar.key}
+              onClick={() => setSelectedScalar(scalar)}
+            >
+              {scalar.name}
+            </ToolbarButton>
+          ))}
+          <hr style={{ margin: token.marginXXS }} />
+          {(!data || hasWind) && (
+            <ToolbarButton
+              icon={<WiStrongWind />}
+              selected={showWind}
+              onClick={() => setShowWind((b) => !b)}
+            >
+              风力轨迹
+            </ToolbarButton>
+          )}
+        </Flex>
+        {palette && (
+          <VerticalColorLegend
+            title={selectedScalar.name + "（" + selectedScalar.unit + "）"}
+            palette={palette}
+            style={{
+              position: "absolute",
+              inset: "auto auto 32px 13px",
+              height: 135,
+              pointerEvents: "none",
+            }}
+          />
+        )}
+        {!data && (
+          <Spin
+            size="large"
+            style={{
+              position: "absolute",
+              inset: 0,
+              background: token.colorFillSecondary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          />
+        )}
+      </div>
+    </TsingrocTheme>
+  );
+}
+
+export default WeatherMap;
+
+function ToolbarButton(props: ButtonProps & { selected: boolean }) {
+  const { selected, className, children, ...rest } = props;
+  const { cx, styles } = useStyles();
+  return (
+    <Button
+      color="default"
+      variant="text"
+      className={cx(
+        styles.toolbarButton,
+        { [styles.toolbarButtonSelected]: selected },
+        className,
+      )}
+      {...rest}
+    >
+      <span className={styles.toolbarButtonText}>{children}</span>
+    </Button>
+  );
+}
+
+const useStyles = createStyles(({ token, css, prefixCls }) => {
+  return {
+    toolbarButton: css`
+      padding: 0 ${token.paddingXS}px;
+      background: transparent;
+
+      &:hover:hover:hover {
+        background: ${token.colorFillSecondary};
+      }
+
+      &:active:active:active {
+        background: ${token.colorFill};
+      }
+
+      &,
+      &:hover:hover:hover {
+        color: ${token.colorWhite};
+      }
+
+      > .${prefixCls}-btn-icon {
+        font-size: 18px;
+      }
+    `,
+    toolbarButtonSelected: css`
+      &,
+      &:hover:hover:hover {
+        background: ${token.colorBgContainer};
+        color: ${token.colorText};
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: -1px;
+        border: inherit;
+        border-radius: inherit;
+        transition: inherit;
+      }
+
+      &:hover:hover:hover::before {
+        background: ${token.colorFillSecondary};
+      }
+
+      &:active:active:active::before {
+        background: ${token.colorFill};
+      }
+    `,
+    toolbarButtonText: css`
+      flex-basis: 100%;
+      text-align: left;
+    `,
+  };
+});
+
+interface ScalarInfo {
+  key: keyof WeatherData["data_vars"];
+  name: string;
+  unit: string;
+  icon: ReactNode;
+  adaptivePalette: AdaptivePalette;
+  fixedPalette?: [number, Vec3][];
+}
+
+const iconSizeFix = (ratio: number): CSSProperties => ({
+  fontSize: ratio + "em",
+  margin: -(1 - 1 / ratio) / 3 + "em " + -(1 - 1 / ratio) / 2 + "em",
+});
+
+const TEMPERATURE_ADAPTIVE_PALETTE: AdaptivePalette = {
+  min: [128, 65, 157],
+  zero: [239, 255, 45],
+  max: [254, 19, 12],
+};
+
+const TEMPERATURE_FIXED_PALETTE: [number, Vec3][] = [
+  [-18, [78, 138, 221]],
+  [-17, [87, 144, 222]],
+  [-16, [97, 150, 224]],
+  [-15, [106, 156, 225]],
+  [-14, [116, 163, 226]],
+  [-13, [125, 169, 227]],
+  [-12, [135, 175, 229]],
+  [-11, [145, 181, 230]],
+  [-10, [155, 188, 232]],
+  [-9, [154, 192, 226]],
+  [-8, [154, 196, 220]],
+  [-7, [154, 200, 214]],
+  [-6, [154, 205, 208]],
+  [-5, [153, 209, 202]],
+  [-4, [152, 214, 196]],
+  [-3, [151, 223, 184]],
+  [-2, [151, 232, 173]],
+  [-1, [183, 227, 149]],
+  [0, [215, 222, 125]],
+  [1, [224, 220, 118]],
+  [2, [234, 219, 112]],
+  [3, [239, 218, 105]],
+  [4, [244, 217, 99]],
+  [5, [247, 210, 89]],
+  [6, [250, 204, 79]],
+  [7, [248, 192, 62]],
+  [8, [247, 180, 45]],
+  [9, [244, 167, 22]],
+  [10, [242, 155, 0]],
+  [11, [241, 151, 1]],
+  [12, [241, 147, 3]],
+  [13, [240, 140, 6]],
+  [14, [240, 133, 10]],
+  [15, [239, 125, 13]],
+  [16, [239, 117, 17]],
+  [17, [238, 109, 20]],
+  [18, [238, 101, 24]],
+  [19, [238, 94, 27]],
+  [20, [238, 88, 31]],
+  [21, [234, 81, 28]],
+  [22, [231, 75, 26]],
+  [23, [227, 69, 24]],
+  [24, [224, 63, 22]],
+  [25, [220, 57, 20]],
+  [26, [217, 51, 18]],
+  [27, [212, 43, 16]],
+  [28, [208, 36, 14]],
+  [29, [201, 18, 8]],
+  [30, [194, 0, 3]],
+  [31, [187, 0, 6]],
+  [32, [181, 1, 9]],
+  [33, [175, 1, 12]],
+  [34, [169, 2, 16]],
+  [35, [153, 3, 20]],
+  [36, [138, 5, 25]],
+  [37, [124, 2, 23]],
+  [38, [111, 0, 21]],
+  [39, [95, 0, 18]],
+  [40, [80, 0, 15]],
+  [41, [70, 0, 15]],
+  [42, [60, 0, 15]],
+  [43, [50, 0, 15]],
+  [44, [40, 0, 15]],
+  [45, [30, 0, 15]],
+  [46, [20, 0, 15]],
+];
+
+const SCALAR_VARIABLES: ScalarInfo[] = [
+  {
+    key: "temperature_2m",
+    name: "温度",
+    unit: "℃",
+    icon: <MdThermostat />,
+    adaptivePalette: TEMPERATURE_ADAPTIVE_PALETTE,
+    fixedPalette: TEMPERATURE_FIXED_PALETTE,
+  },
+  {
+    key: "surface_pressure",
+    name: "气压",
+    unit: "hPa",
+    icon: <WiBarometer style={iconSizeFix(1.4)} />,
+    adaptivePalette: {
+      min: [80, 202, 75],
+      max: [254, 19, 12],
+    },
+  },
+  {
+    key: "cloud_cover",
+    name: "云量",
+    unit: "%",
+    icon: <WiCloudy style={iconSizeFix(1.2)} />,
+    adaptivePalette: {
+      min: [239, 255, 45],
+      max: [255, 255, 255],
+    },
+  },
+  {
+    key: "dew_point_2m",
+    name: "露点",
+    unit: "℃",
+    icon: <MdDewPoint />,
+    adaptivePalette: TEMPERATURE_ADAPTIVE_PALETTE,
+    fixedPalette: TEMPERATURE_FIXED_PALETTE,
+  },
+  {
+    key: "relative_humidity_2m",
+    name: "相对湿度",
+    unit: "%",
+    icon: <WiHumidity style={iconSizeFix(1.3)} />,
+    adaptivePalette: {
+      min: [128, 65, 157],
+      zero: [239, 255, 45],
+      zeroPoint: 0.5,
+      max: [254, 19, 12],
+    },
+  },
+  {
+    key: "wind_speed_10m",
+    name: "风速",
+    unit: "m/s",
+    icon: <WiStrongWind />,
+    adaptivePalette: {
+      min: [239, 255, 45],
+      max: [128, 65, 157],
+    },
+  },
+  {
+    key: "rain",
+    name: "降雨量",
+    unit: "mm",
+    icon: <WiRain style={iconSizeFix(1.1)} />,
+    adaptivePalette: {
+      min: [80, 202, 75],
+      max: [254, 19, 12],
+    },
+  },
+];
+
+function lerpVec<T extends number[]>(min: T, max: T, pos: number) {
+  return min.map((min, i) => min + pos * (max[i] - min)) as T;
+}
+
+type Vec3 = [number, number, number];
+
+interface AdaptivePalette {
+  min: Vec3;
+  zero?: Vec3;
+  zeroPoint?: number;
+  max: Vec3;
+}
+
+// 参考 https://www.cma.gov.cn/zfxxgk/gknr/flfgbz/bz/202209/P020220921555079517928.pdf
+function adaptiveColorCoding(
+  min: number,
+  max: number,
+  base: AdaptivePalette,
+): [number, Vec3][] {
+  if (base.zero) {
+    const palette: [number, Vec3][] = [];
+    const zeroPoint = base.zeroPoint ?? 0;
+    if (min < zeroPoint) {
+      palette.push([
+        min,
+        lerpVec(
+          base.zero,
+          base.min,
+          Math.min(1, Math.abs((min - zeroPoint) / (max - zeroPoint))),
+        ),
+      ]);
+    } else {
+      palette.push([min, base.zero]);
+    }
+    if (min < zeroPoint && max > zeroPoint) {
+      palette.push([zeroPoint, base.zero]);
+    }
+    if (max > zeroPoint) {
+      palette.push([
+        max,
+        lerpVec(
+          base.zero,
+          base.max,
+          Math.min(1, Math.abs((max - zeroPoint) / (min - zeroPoint))),
+        ),
+      ]);
+    } else {
+      palette.push([max, base.zero]);
+    }
+    return palette;
+  } else {
+    return [
+      [min, base.min],
+      [max, base.max],
+    ];
+  }
+}
+
+// 参考 https://dbba.sacinfo.org.cn/attachment/downloadStdFile?pk=dda6960be9435ed7ab01e336e197cd67a072a28725f03685bfbdaf19cbfeb267
+function fixedColorCoding<T>(min: number, max: number, palette: [number, T][]) {
+  let minIdx = palette.findIndex(([value]) => value > min) - 1;
+  if (minIdx < -1) {
+    minIdx = palette.length - 1;
+  } else if (minIdx === -1) {
+    minIdx = 0;
+  }
+  let maxIdx = palette.findIndex(([value]) => value >= max);
+  if (maxIdx < 0) {
+    maxIdx = 0;
+  }
+  return palette.slice(minIdx, maxIdx + 1);
+}

package/src/deckgl/TiandituLayer.ts

@@ -0,0 +1,56 @@
+import { BitmapLayer, CompositeLayer } from "deck.gl";
+import { TileLayer, type TileLayerProps } from "@deck.gl/geo-layers";
+import type { DefaultProps } from "@deck.gl/core";
+
+export interface TiandituLayerProps {
+  tiandituTk: string;
+  type: "vec" | "img" | "ter";
+  layer: "base" | "annotation";
+}
+
+export default class TiandituLayer extends CompositeLayer<TiandituLayerProps> {
+  static readonly layerName = "TiandituLayer";
+  static readonly defaultProps: DefaultProps<TiandituLayerProps> = {
+    type: { type: "object", value: "vec" },
+    layer: { type: "object", value: "base" },
+  };
+  renderLayers() {
+    const { tiandituTk, type, layer } = this.props;
+    const actualType = layer === "base" ? type : "c" + type[0] + "a";
+    return new TileLayer(
+      this.getSubLayerProps({
+        id: actualType,
+        data: makeUrlTemplate(tiandituTk, actualType),
+        maxZoom: 18,
+        zoomOffset: 1,
+        renderSubLayers,
+      }),
+    );
+  }
+}
+
+const makeUrlTemplate = (tiandituTk: string, type: string) =>
+  Array.from(
+    { length: 8 },
+    (_, i) =>
+      `https://t${i}.tianditu.gov.cn/${type}_w/wmts` +
+      `?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0` +
+      `&LAYER=${type}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles` +
+      `&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}` +
+      `&tk=${tiandituTk}`,
+  );
+
+const renderSubLayers: TileLayerProps["renderSubLayers"] = (props) => {
+  const { boundingBox } = props.tile;
+  return new BitmapLayer({
+    ...props,
+    data: undefined,
+    image: props.data,
+    bounds: [
+      boundingBox[0][0],
+      boundingBox[0][1],
+      boundingBox[1][0],
+      boundingBox[1][1],
+    ],
+  });
+};