feat: extend supply workbench demo and map navigation

src/features/workbench/map/sources.ts

@@ -2,10 +2,7 @@ import type { StyleSpecification, VectorSourceSpecification } from "maplibre-gl"
 
 import { GEOSERVER_WORKSPACE, MAP_URL } from "./geoserver-config";
 import { MAP_STYLE_TOKENS } from "./map-colors";
-import {
-  SCADA_ANALYSIS_SOURCE_ID,
-  createEmptyScadaAnalysisCollection
-} from "./scada-analysis";
+import { SCADA_ANALYSIS_SOURCE_ID, createEmptyScadaAnalysisCollection } from "./scada-analysis";
 import { SCADA_SOURCE_ID } from "./scada";
 
 export const WATER_NETWORK_GLOBAL_VIEW = {
@@ -280,7 +277,10 @@ export function isAvailableWaterNetworkSourceId(
   return (AVAILABLE_WATER_NETWORK_SOURCE_IDS as readonly string[]).includes(value);
 }
 
-export function createWaterNetworkSources(): Record<GeoServerWaterNetworkSourceId, VectorSourceSpecification>;
+export function createWaterNetworkSources(): Record<
+  GeoServerWaterNetworkSourceId,
+  VectorSourceSpecification
+>;
 export function createWaterNetworkSources(
   sourceIds: readonly GeoServerWaterNetworkSourceId[]
 ): Partial<Record<GeoServerWaterNetworkSourceId, VectorSourceSpecification>>;
@@ -312,7 +312,11 @@ function createGeoServerVectorSource(
   };
 }
 
-export function createBaseStyle(mapboxToken?: string): StyleSpecification {
+function createTiandituTileUrl(layer: "vec" | "cva" | "img" | "cia", token: string) {
+  return `https://t0.tianditu.gov.cn/${layer}_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${layer}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${token}`;
+}
+
+export function createBaseStyle(mapboxToken?: string, tiandituToken?: string): StyleSpecification {
   const sources: StyleSpecification["sources"] = {
     [SCADA_SOURCE_ID]: {
       type: "geojson",
@@ -379,6 +383,59 @@ export function createBaseStyle(mapboxToken?: string): StyleSpecification {
     });
   }
 
+  if (tiandituToken) {
+    const tiandituSources = [
+      ["tianditu-vector", "vec"],
+      ["tianditu-vector-annotation", "cva"],
+      ["tianditu-image", "img"],
+      ["tianditu-image-annotation", "cia"]
+    ] as const;
+
+    tiandituSources.forEach(([sourceId, layer]) => {
+      sources[sourceId] = {
+        type: "raster",
+        tiles: [createTiandituTileUrl(layer, tiandituToken)],
+        tileSize: 256,
+        maxzoom: 18,
+        attribution: '© <a href="https://www.tianditu.gov.cn/">天地图</a>'
+      };
+    });
+
+    const vectorVisible = mapboxToken ? "none" : "visible";
+    layers.push(
+      {
+        id: "tianditu-vector",
+        type: "raster",
+        source: "tianditu-vector",
+        layout: { visibility: vectorVisible },
+        paint: { "raster-opacity": 0.9 }
+      },
+      {
+        id: "tianditu-vector-annotation",
+        type: "raster",
+        source: "tianditu-vector-annotation",
+        layout: { visibility: vectorVisible }
+      },
+      {
+        id: "tianditu-image",
+        type: "raster",
+        source: "tianditu-image",
+        layout: { visibility: "none" },
+        paint: {
+          "raster-opacity": 0.9,
+          "raster-saturation": -0.12,
+          "raster-contrast": 0.06
+        }
+      },
+      {
+        id: "tianditu-image-annotation",
+        type: "raster",
+        source: "tianditu-image-annotation",
+        layout: { visibility: "none" }
+      }
+    );
+  }
+
   return {
     version: 8,
     glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",