change image layer

src/components/domain/One/JJAImageLayer.jsx

@@ -4,7 +4,7 @@ import { WebMapServiceImageryProvider } from "cesium";
 
 const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";
 
-const name1 = "phitrellis:4_1_sst_JJA_G_dif";
+const name1 = "phitrellis:4_1_sst_JJA_L";
 const name2 = "phitrellis:4_1_ts_tp_dif_mask";
 
 function JJAImageLayer() {

src/components/map/Layout/index.jsx

@@ -1,11 +1,51 @@
-import { Entity, PointGraphics, Viewer } from "resium";
-import { Cartesian3, Color } from "cesium";
+import { useMemo } from "react";
+import { Entity, PointGraphics, Viewer, ImageryLayer } from "resium";
+import {
+  Cartesian3,
+  Color,
+  UrlTemplateImageryProvider,
+  WebMercatorTilingScheme,
+} from "cesium";
 import Picker from "./Picker";
 import HeadingPitchRoll from "./HeadingPitchRoll";
 import CustomToolbar from "@/components/common/CustomToolbar";
 import styles from "./index.module.less";
 
+const token = "41222ba4e90e51b5c90d08c329a55faa";
+const tdtUrl = "https://t{s}.tianditu.gov.cn/";
+const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
+
 function MapLayout({ children, className, ...rest }) {
+  const imageryProvider = useMemo(
+    () =>
+      new UrlTemplateImageryProvider({
+        url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
+        subdomains: subdomains,
+        tilingScheme: new WebMercatorTilingScheme(),
+        maximumLevel: 18,
+      }),
+    []
+  );
+
+  const labelImageryProvider = useMemo(
+    () =>
+      new UrlTemplateImageryProvider({
+        url: tdtUrl + "DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + token,
+        subdomains: subdomains,
+        maximumLevel: 18,
+      }),
+    []
+  );
+
+  const boundaryImageryProvider = useMemo(
+    () =>
+      new UrlTemplateImageryProvider({
+        url: tdtUrl + "DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=" + token,
+        subdomains: subdomains,
+        maximumLevel: 18,
+      }),
+    []
+  );
   return (
     <Viewer
       className={`${styles.cesiumContainer} ${className}`}
@@ -21,7 +61,11 @@ function MapLayout({ children, className, ...rest }) {
       baseLayerPicker={false}
       animation={false}
       selectionIndicator={false}
+      imageryProvider={false}
     >
+      <ImageryLayer imageryProvider={imageryProvider} />
+      <ImageryLayer imageryProvider={labelImageryProvider} />
+      <ImageryLayer imageryProvider={boundaryImageryProvider} />
       <Entity position={Cartesian3.fromDegreesArray([0, 90])}>
         <PointGraphics color={Color.SKYBLUE} pixelSize={10} />
       </Entity>