fix(map): stabilize tiled style rendering

src/components/olmap/core/operationalLayers.ts

@@ -17,11 +17,25 @@ import { markMapResourcePersistent } from "./mapLifecycle";
 
 type MapExtent = [number, number, number, number];
 
-type CreateOperationalLayersOptions = {
+type CreateOperationalMapSourcesOptions = {
   mapUrl: string;
   workspace: string;
+};
+
+type CreateOperationalLayersOptions = CreateOperationalMapSourcesOptions & {
   extent: MapExtent;
   persistent?: boolean;
+  sources?: OperationalMapSources;
+};
+
+export type OperationalMapSources = {
+  junctions: VectorTileSource;
+  pipes: VectorTileSource;
+  valves: VectorTileSource;
+  reservoirs: VectorSource;
+  pumps: VectorSource;
+  tanks: VectorSource;
+  scada: VectorSource;
 };
 
 const defaultFlatStyle = config.MAP_DEFAULT_STYLE as FlatStyleLike;
@@ -85,18 +99,16 @@ const pipeProperties = [
   { name: "流速", value: "velocity" },
 ];
 
-export const createOperationalMapResources = ({
+export const createOperationalMapSources = ({
   mapUrl,
   workspace,
-  extent,
-  persistent = false,
-}: CreateOperationalLayersOptions) => {
+}: CreateOperationalMapSourcesOptions): OperationalMapSources => {
   const vectorTileUrl = (name: string) =>
     `${mapUrl}/gwc/service/tms/1.0.0/${workspace}:${name}@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`;
   const vectorUrl = (name: string) =>
     `${mapUrl}/${workspace}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${workspace}:${name}&outputFormat=application/json`;
 
-  const sources = {
+  return {
     junctions: new VectorTileSource({
       url: vectorTileUrl("geo_junctions"),
       format: new MVT(),
@@ -129,6 +141,15 @@ export const createOperationalMapResources = ({
       format: new GeoJSON(),
     }),
   };
+};
+
+export const createOperationalMapResources = ({
+  mapUrl,
+  workspace,
+  extent,
+  persistent = false,
+  sources = createOperationalMapSources({ mapUrl, workspace }),
+}: CreateOperationalLayersOptions) => {
 
   const layers = {
     junctions: new WebGLVectorTileLayer({