@tsingroc/tsingroc-components 5.0.0-alpha.11 → 5.0.0-alpha.13

package/src/components/VerticalColorLegend.tsx

@@ -1,73 +0,0 @@
-import { theme } from "antd";
-import type { HTMLAttributes } from "react";
-
-export interface VerticalColorLegendProps
-  extends HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  palette: [number, [number, number, number]][];
-}
-
-function VerticalColorLegend(props: VerticalColorLegendProps) {
-  const { title, palette, ...rest } = props;
-  const { token } = theme.useToken();
-  const max = (palette.at(-1) as [number, [number, number, number]])[0];
-  const min = palette[0][0];
-  const range = max - min;
-  return (
-    <div
-      {...rest}
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        userSelect: "none",
-        fontSize: token.fontSizeSM,
-        color: token.colorText,
-        textShadow:
-          "-1px -1px white, 0px -1px white, 1px -1px white, 1px 0px white, " +
-          "1px 1px white, 0px 1px white, -1px 1px white, -1px 0px white",
-        ...rest.style,
-      }}
-    >
-      <div style={{ fontWeight: "bold" }}>{title}</div>
-      <div
-        style={{
-          display: "flex",
-          flexBasis: "100%",
-          alignItems: "stretch",
-          gap: token.paddingXXS,
-          paddingBlock: "0.5em",
-        }}
-      >
-        <div
-          style={{
-            width: 24,
-            background: `linear-gradient(
-              to top,
-              ${palette
-                .map(
-                  ([value, color]) =>
-                    `rgb(${color.join(", ")}) ${((value - min) / range) * 100}%`,
-                )
-                .join(", ")}
-            )`,
-          }}
-        />
-        <div style={{ lineHeight: 0, verticalAlign: "middle" }}>
-          {palette.map(([value], i) => (
-            <div
-              key={i}
-              style={{
-                position: "relative",
-                top: `${((max - value) / range) * 100}%`,
-              }}
-            >
-              {value.toFixed(1)}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default VerticalColorLegend;

package/src/components/WeatherMap.tsx

@@ -1,522 +0,0 @@
-import { Button, Flex, Slider, Spin, theme, type ButtonProps } from "antd";
-import { createStyles } from "antd-style";
-import dayjs from "dayjs";
-import DeckGL from "deck.gl";
-import {
-  useMemo,
-  useState,
-  type CSSProperties,
-  type HTMLAttributes,
-  type ReactNode,
-} from "react";
-import { MdDewPoint, MdThermostat } from "react-icons/md";
-import {
-  WiBarometer,
-  WiCloudy,
-  WiHumidity,
-  WiRain,
-  WiStrongWind,
-} from "react-icons/wi";
-import * as wl from "weatherlayers-gl";
-
-import { TiandituLayer } from "../deckgl";
-import {
-  extractMagnitudeData,
-  extractScalarData,
-  extractVectorData,
-  getBounds,
-  type WeatherData,
-} from "../deckgl/WeatherData";
-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 as number])
-                    .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
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-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

@@ -1,56 +0,0 @@
-import { BitmapLayer, CompositeLayer } from "deck.gl";
-import type { DefaultProps } from "@deck.gl/core";
-import { TileLayer, type TileLayerProps } from "@deck.gl/geo-layers";
-
-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(): TileLayer {
-    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,
-      }) as TileLayerProps,
-    );
-  }
-}
-
-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 as string | null,
-    bounds: [
-      boundingBox[0][0],
-      boundingBox[0][1],
-      boundingBox[1][0],
-      boundingBox[1][1],
-    ],
-  });
-};