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

package/dist/components/WeatherMap.js

@@ -0,0 +1,658 @@
+import { c as _c } from "react/compiler-runtime";
+import { Button, Flex, Slider, Spin, theme } from "antd";
+import { createStyles } from "antd-style";
+import dayjs from "dayjs";
+import DeckGL from "deck.gl";
+import { useMemo, useState } 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 } from "../deckgl/WeatherData";
+import TsingrocTheme from "./TsingrocTheme";
+import VerticalColorLegend from "./VerticalColorLegend";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 一张显示各类天气信息的地图。
+ *
+ * 多余的属性会被传递给组件最外层的 [`div` 元素][1]。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+function WeatherMap(props) {
+  const $ = _c(81);
+  let data;
+  let rest;
+  let tiandituTk;
+  if ($[0] !== props) {
+    ({
+      tiandituTk,
+      data,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = data;
+    $[2] = rest;
+    $[3] = tiandituTk;
+  } else {
+    data = $[1];
+    rest = $[2];
+    tiandituTk = $[3];
+  }
+  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);
+  let t0;
+  bb0: {
+    if (!data) {
+      t0 = undefined;
+      break bb0;
+    }
+    if (selectedScalar.key === "wind_speed_10m" && !data.data_vars.wind_speed_10m && hasWind) {
+      let t1;
+      if ($[4] !== data) {
+        t1 = extractMagnitudeData(data, "wind_component_u_10m", "wind_component_v_10m");
+        $[4] = data;
+        $[5] = t1;
+      } else {
+        t1 = $[5];
+      }
+      t0 = t1;
+      break bb0;
+    }
+    let t1;
+    if ($[6] !== data || $[7] !== selectedScalar.key) {
+      t1 = extractScalarData(data, selectedScalar.key);
+      $[6] = data;
+      $[7] = selectedScalar.key;
+      $[8] = t1;
+    } else {
+      t1 = $[8];
+    }
+    t0 = t1;
+  }
+  const scalarFrames = t0;
+  const [showWind, setShowWind] = useState(true);
+  let t1;
+  bb1: {
+    if (!(hasWind && showWind)) {
+      t1 = undefined;
+      break bb1;
+    }
+    let t2;
+    if ($[9] !== data) {
+      t2 = extractVectorData(data, "wind_component_u_10m", "wind_component_v_10m");
+      $[9] = data;
+      $[10] = t2;
+    } else {
+      t2 = $[10];
+    }
+    t1 = t2;
+  }
+  const windFrames = t1;
+  const [timeIdx, setTimeIdx] = useState(0);
+  const scalarFrame = scalarFrames?.[timeIdx];
+  const windFrame = windFrames?.[timeIdx];
+  let t2;
+  bb2: {
+    if (!scalarFrame) {
+      t2 = undefined;
+      break bb2;
+    }
+    let t3;
+    if ($[11] !== scalarFrame.max || $[12] !== scalarFrame.min || $[13] !== selectedScalar.adaptivePalette) {
+      t3 = adaptiveColorCoding(scalarFrame.min, scalarFrame.max, selectedScalar.adaptivePalette);
+      $[11] = scalarFrame.max;
+      $[12] = scalarFrame.min;
+      $[13] = selectedScalar.adaptivePalette;
+      $[14] = t3;
+    } else {
+      t3 = $[14];
+    }
+    t2 = t3;
+  }
+  const palette = t2;
+  const T0 = TsingrocTheme;
+  let t3;
+  if ($[15] !== rest.style) {
+    t3 = {
+      position: "relative",
+      ...rest.style
+    };
+    $[15] = rest.style;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  const T1 = DeckGL;
+  let t4;
+  let t5;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      longitude: 0,
+      latitude: 0,
+      zoom: 0,
+      maxPitch: 0
+    };
+    t5 = {
+      dragRotate: false
+    };
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t4 = $[17];
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== tiandituTk) {
+    t6 = new TiandituLayer({
+      id: "base",
+      tiandituTk
+    });
+    $[19] = tiandituTk;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  let t7;
+  if ($[21] !== tiandituTk) {
+    t7 = new TiandituLayer({
+      id: "ann",
+      tiandituTk,
+      layer: "annotation"
+    });
+    $[21] = tiandituTk;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  const t8 = scalarFrame ? new wl.RasterLayer({
+    id: "scalar",
+    opacity: 0.5,
+    bounds: boundingBox,
+    image: scalarFrame.image,
+    palette
+  }) : null;
+  const t9 = windFrame ? new wl.ParticleLayer({
+    id: "wind",
+    opacity: 0.5,
+    bounds: boundingBox,
+    image: windFrame,
+    numParticles: 1000,
+    maxAge: 30,
+    speedFactor: 10,
+    width: window.devicePixelRatio
+  }) : null;
+  let t10;
+  if ($[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
+    t10 = [t6, t7, t8, t9];
+    $[23] = t6;
+    $[24] = t7;
+    $[25] = t8;
+    $[26] = t9;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  let t11;
+  if ($[28] !== T1 || $[29] !== t10 || $[30] !== t4 || $[31] !== t5) {
+    t11 = /*#__PURE__*/_jsx(T1, {
+      initialViewState: t4,
+      controller: t5,
+      layers: t10
+    });
+    $[28] = T1;
+    $[29] = t10;
+    $[30] = t4;
+    $[31] = t5;
+    $[32] = t11;
+  } else {
+    t11 = $[32];
+  }
+  let t12;
+  if ($[33] !== data || $[34] !== setTimeIdx || $[35] !== timeIdx) {
+    t12 = data && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: "absolute",
+        inset: "auto 0 0 0",
+        padding: "4px 8px 0 8px",
+        background: "linear-gradient(to bottom, transparent, #0007)"
+      },
+      children: /*#__PURE__*/_jsx(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")
+        }
+      })
+    });
+    $[33] = data;
+    $[34] = setTimeIdx;
+    $[35] = timeIdx;
+    $[36] = t12;
+  } else {
+    t12 = $[36];
+  }
+  let t13;
+  if ($[37] !== token.borderRadius || $[38] !== token.colorBgMask || $[39] !== token.paddingXXS) {
+    t13 = {
+      position: "absolute",
+      inset: "8px 8px auto auto",
+      borderRadius: token.borderRadius,
+      padding: token.paddingXXS,
+      background: token.colorBgMask
+    };
+    $[37] = token.borderRadius;
+    $[38] = token.colorBgMask;
+    $[39] = token.paddingXXS;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  let t14;
+  if ($[41] !== data || $[42] !== hasWind || $[43] !== selectedScalar || $[44] !== setSelectedScalar) {
+    let t15;
+    if ($[46] !== data || $[47] !== hasWind) {
+      t15 = scalar => !data || scalar.key in data.data_vars || scalar.key === "wind_speed_10m" && hasWind;
+      $[46] = data;
+      $[47] = hasWind;
+      $[48] = t15;
+    } else {
+      t15 = $[48];
+    }
+    let t16;
+    if ($[49] !== selectedScalar || $[50] !== setSelectedScalar) {
+      t16 = scalar_0 => /*#__PURE__*/_jsx(ToolbarButton, {
+        icon: scalar_0.icon,
+        selected: selectedScalar.key === scalar_0.key,
+        onClick: () => setSelectedScalar(scalar_0),
+        children: scalar_0.name
+      }, scalar_0.key);
+      $[49] = selectedScalar;
+      $[50] = setSelectedScalar;
+      $[51] = t16;
+    } else {
+      t16 = $[51];
+    }
+    t14 = SCALAR_VARIABLES.filter(t15).map(t16);
+    $[41] = data;
+    $[42] = hasWind;
+    $[43] = selectedScalar;
+    $[44] = setSelectedScalar;
+    $[45] = t14;
+  } else {
+    t14 = $[45];
+  }
+  let t15;
+  if ($[52] !== token.marginXXS) {
+    t15 = /*#__PURE__*/_jsx("hr", {
+      style: {
+        margin: token.marginXXS
+      }
+    });
+    $[52] = token.marginXXS;
+    $[53] = t15;
+  } else {
+    t15 = $[53];
+  }
+  let t16;
+  if ($[54] !== data || $[55] !== hasWind || $[56] !== setShowWind || $[57] !== showWind) {
+    t16 = (!data || hasWind) && /*#__PURE__*/_jsx(ToolbarButton, {
+      icon: /*#__PURE__*/_jsx(WiStrongWind, {}),
+      selected: showWind,
+      onClick: () => setShowWind(_temp),
+      children: "\u98CE\u529B\u8F68\u8FF9"
+    });
+    $[54] = data;
+    $[55] = hasWind;
+    $[56] = setShowWind;
+    $[57] = showWind;
+    $[58] = t16;
+  } else {
+    t16 = $[58];
+  }
+  let t17;
+  if ($[59] !== t13 || $[60] !== t14 || $[61] !== t15 || $[62] !== t16) {
+    t17 = /*#__PURE__*/_jsxs(Flex, {
+      vertical: true,
+      style: t13,
+      children: [t14, t15, t16]
+    });
+    $[59] = t13;
+    $[60] = t14;
+    $[61] = t15;
+    $[62] = t16;
+    $[63] = t17;
+  } else {
+    t17 = $[63];
+  }
+  let t18;
+  if ($[64] !== palette || $[65] !== selectedScalar) {
+    t18 = palette && /*#__PURE__*/_jsx(VerticalColorLegend, {
+      title: selectedScalar.name + "\uFF08" + selectedScalar.unit + "\uFF09",
+      palette: palette,
+      style: {
+        position: "absolute",
+        inset: "auto auto 32px 13px",
+        height: 135,
+        pointerEvents: "none"
+      }
+    });
+    $[64] = palette;
+    $[65] = selectedScalar;
+    $[66] = t18;
+  } else {
+    t18 = $[66];
+  }
+  let t19;
+  if ($[67] !== data || $[68] !== token.colorFillSecondary) {
+    t19 = !data && /*#__PURE__*/_jsx(Spin, {
+      size: "large",
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: token.colorFillSecondary,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    });
+    $[67] = data;
+    $[68] = token.colorFillSecondary;
+    $[69] = t19;
+  } else {
+    t19 = $[69];
+  }
+  let t20;
+  if ($[70] !== rest || $[71] !== t11 || $[72] !== t12 || $[73] !== t17 || $[74] !== t18 || $[75] !== t19 || $[76] !== t3) {
+    t20 = /*#__PURE__*/_jsxs("div", {
+      ...rest,
+      style: t3,
+      children: [t11, t12, t17, t18, t19]
+    });
+    $[70] = rest;
+    $[71] = t11;
+    $[72] = t12;
+    $[73] = t17;
+    $[74] = t18;
+    $[75] = t19;
+    $[76] = t3;
+    $[77] = t20;
+  } else {
+    t20 = $[77];
+  }
+  let t21;
+  if ($[78] !== T0 || $[79] !== t20) {
+    t21 = /*#__PURE__*/_jsx(T0, {
+      children: t20
+    });
+    $[78] = T0;
+    $[79] = t20;
+    $[80] = t21;
+  } else {
+    t21 = $[80];
+  }
+  return t21;
+}
+function _temp(b) {
+  return !b;
+}
+export default WeatherMap;
+function ToolbarButton(props) {
+  const $ = _c(18);
+  let children;
+  let className;
+  let rest;
+  let selected;
+  if ($[0] !== props) {
+    ({
+      selected,
+      className,
+      children,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = selected;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    selected = $[4];
+  }
+  const {
+    cx,
+    styles
+  } = useStyles();
+  let t0;
+  if ($[5] !== className || $[6] !== cx || $[7] !== selected || $[8] !== styles.toolbarButton || $[9] !== styles.toolbarButtonSelected) {
+    t0 = cx(styles.toolbarButton, {
+      [styles.toolbarButtonSelected]: selected
+    }, className);
+    $[5] = className;
+    $[6] = cx;
+    $[7] = selected;
+    $[8] = styles.toolbarButton;
+    $[9] = styles.toolbarButtonSelected;
+    $[10] = t0;
+  } else {
+    t0 = $[10];
+  }
+  let t1;
+  if ($[11] !== children || $[12] !== styles.toolbarButtonText) {
+    t1 = /*#__PURE__*/_jsx("span", {
+      className: styles.toolbarButtonText,
+      children: children
+    });
+    $[11] = children;
+    $[12] = styles.toolbarButtonText;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  let t2;
+  if ($[14] !== rest || $[15] !== t0 || $[16] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Button, {
+      color: "default",
+      variant: "text",
+      className: t0,
+      ...rest,
+      children: t1
+    });
+    $[14] = rest;
+    $[15] = t0;
+    $[16] = t1;
+    $[17] = t2;
+  } else {
+    t2 = $[17];
+  }
+  return t2;
+}
+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;
+    `
+  };
+});
+const iconSizeFix = ratio => ({
+  fontSize: `${ratio}em`,
+  margin: `${-(1 - 1 / ratio) / 3}em ${-(1 - 1 / ratio) / 2}em`
+});
+const TEMPERATURE_ADAPTIVE_PALETTE = {
+  min: [128, 65, 157],
+  zero: [239, 255, 45],
+  max: [254, 19, 12]
+};
+const TEMPERATURE_FIXED_PALETTE = [[-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 = [{
+  key: "temperature_2m",
+  name: "温度",
+  unit: "℃",
+  icon: /*#__PURE__*/_jsx(MdThermostat, {}),
+  adaptivePalette: TEMPERATURE_ADAPTIVE_PALETTE,
+  fixedPalette: TEMPERATURE_FIXED_PALETTE
+}, {
+  key: "surface_pressure",
+  name: "气压",
+  unit: "hPa",
+  icon: /*#__PURE__*/_jsx(WiBarometer, {
+    style: iconSizeFix(1.4)
+  }),
+  adaptivePalette: {
+    min: [80, 202, 75],
+    max: [254, 19, 12]
+  }
+}, {
+  key: "cloud_cover",
+  name: "云量",
+  unit: "%",
+  icon: /*#__PURE__*/_jsx(WiCloudy, {
+    style: iconSizeFix(1.2)
+  }),
+  adaptivePalette: {
+    min: [239, 255, 45],
+    max: [255, 255, 255]
+  }
+}, {
+  key: "dew_point_2m",
+  name: "露点",
+  unit: "℃",
+  icon: /*#__PURE__*/_jsx(MdDewPoint, {}),
+  adaptivePalette: TEMPERATURE_ADAPTIVE_PALETTE,
+  fixedPalette: TEMPERATURE_FIXED_PALETTE
+}, {
+  key: "relative_humidity_2m",
+  name: "相对湿度",
+  unit: "%",
+  icon: /*#__PURE__*/_jsx(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: /*#__PURE__*/_jsx(WiStrongWind, {}),
+  adaptivePalette: {
+    min: [239, 255, 45],
+    max: [128, 65, 157]
+  }
+}, {
+  key: "rain",
+  name: "降雨量",
+  unit: "mm",
+  icon: /*#__PURE__*/_jsx(WiRain, {
+    style: iconSizeFix(1.1)
+  }),
+  adaptivePalette: {
+    min: [80, 202, 75],
+    max: [254, 19, 12]
+  }
+}];
+function lerpVec(min, max, pos) {
+  return min.map((min, i) => min + pos * (max[i] - min));
+}
+// 参考 https://www.cma.gov.cn/zfxxgk/gknr/flfgbz/bz/202209/P020220921555079517928.pdf
+function adaptiveColorCoding(min, max, base) {
+  if (base.zero) {
+    const palette = [];
+    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
+// @ts-expect-error no unused vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function fixedColorCoding(min, max, palette) {
+  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/dist/deckgl/TiandituLayer.d.ts

@@ -0,0 +1,13 @@
+import { CompositeLayer } from "deck.gl";
+import type { DefaultProps } from "@deck.gl/core";
+import { TileLayer } 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>;
+    renderLayers(): TileLayer;
+}

package/dist/deckgl/TiandituLayer.js

@@ -0,0 +1,44 @@
+import { BitmapLayer, CompositeLayer } from "deck.gl";
+import { TileLayer } from "@deck.gl/geo-layers";
+export default class TiandituLayer extends CompositeLayer {
+  static layerName = "TiandituLayer";
+  static defaultProps = {
+    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, type) => 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 = 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]]
+  });
+};