feat: extend supply workbench demo and map navigation
This commit is contained in:
@@ -3,30 +3,61 @@ import { describe, expect, it } from "vitest";
|
||||
import { waterNetworkLayers } from "./layers";
|
||||
import { MAP_STYLE_TOKENS } from "./map-colors";
|
||||
import {
|
||||
BASE_LAYER_OPTIONS,
|
||||
INITIAL_LAYER_VISIBILITY,
|
||||
MAP_LEGEND_ITEMS,
|
||||
applyBaseLayerVisibility,
|
||||
createLayerControlItems,
|
||||
createVisibleMapLegendItems,
|
||||
getWorkbenchLayerIds
|
||||
} from "./map-control-config";
|
||||
|
||||
describe("workbench supply layer controls", () => {
|
||||
it("switches Tianditu basemaps as base and annotation layer pairs", () => {
|
||||
const visibility = new Map<string, string>();
|
||||
const map = {
|
||||
getLayer: () => ({}),
|
||||
setLayoutProperty: (layerId: string, _property: string, value: string) => {
|
||||
visibility.set(layerId, value);
|
||||
}
|
||||
} as unknown as MapLibreMap;
|
||||
|
||||
expect(BASE_LAYER_OPTIONS.map((option) => option.id)).toEqual([
|
||||
"mapbox-light",
|
||||
"mapbox-satellite",
|
||||
"tianditu-vector",
|
||||
"tianditu-image",
|
||||
"none"
|
||||
]);
|
||||
|
||||
applyBaseLayerVisibility(map, "tianditu-image");
|
||||
|
||||
expect(visibility.get("tianditu-image")).toBe("visible");
|
||||
expect(visibility.get("tianditu-image-annotation")).toBe("visible");
|
||||
expect(visibility.get("tianditu-vector")).toBe("none");
|
||||
expect(visibility.get("tianditu-vector-annotation")).toBe("none");
|
||||
expect(visibility.get("mapbox-light")).toBe("none");
|
||||
expect(visibility.get("mapbox-satellite")).toBe("none");
|
||||
});
|
||||
|
||||
it("creates controls only for available supply system sources", () => {
|
||||
const items = createLayerControlItems(INITIAL_LAYER_VISIBILITY, undefined, {
|
||||
fx_20200423_pipes: 215_797,
|
||||
fx_20200811_dn100_pipes: 122_686
|
||||
});
|
||||
|
||||
expect(items.map((item) => item.id)).toEqual(expect.arrayContaining([
|
||||
"pipes",
|
||||
"junctions",
|
||||
"scada-pressure",
|
||||
"scada-flow",
|
||||
"water_quality_monitoring_points",
|
||||
"fx_20200423_pipes",
|
||||
"fx_20200811_dn100_pipes",
|
||||
"simulation"
|
||||
]));
|
||||
expect(items.map((item) => item.id)).toEqual(
|
||||
expect.arrayContaining([
|
||||
"pipes",
|
||||
"junctions",
|
||||
"scada-pressure",
|
||||
"scada-flow",
|
||||
"water_quality_monitoring_points",
|
||||
"fx_20200423_pipes",
|
||||
"fx_20200811_dn100_pipes",
|
||||
"simulation"
|
||||
])
|
||||
);
|
||||
expect(items.find((item) => item.id === "fx_20200423_pipes")).toMatchObject({
|
||||
group: "source-gis",
|
||||
groupLabel: "GIS 原始数据",
|
||||
@@ -99,15 +130,25 @@ describe("workbench supply layer controls", () => {
|
||||
"source-non-residential-meter",
|
||||
"impact-area"
|
||||
]);
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "valve")).toMatchObject({ imageSrc: "/map/valve.png" });
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "valve")).toMatchObject({
|
||||
imageSrc: "/map/valve.png"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "reservoir")).toMatchObject({
|
||||
label: "水库",
|
||||
imageSrc: "/map/reservoir.png"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "pump")).toMatchObject({ imageSrc: "/map/pump.png" });
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "tank")).toMatchObject({ imageSrc: "/map/tank.png" });
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "scada-flow")).toMatchObject({ imageSrc: "/map/scada-flow.png" });
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "scada-pressure")).toMatchObject({ imageSrc: "/map/scada-pressure.png" });
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "pump")).toMatchObject({
|
||||
imageSrc: "/map/pump.png"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "tank")).toMatchObject({
|
||||
imageSrc: "/map/tank.png"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "scada-flow")).toMatchObject({
|
||||
imageSrc: "/map/scada-flow.png"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "scada-pressure")).toMatchObject({
|
||||
imageSrc: "/map/scada-pressure.png"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "inactive-pipe")).toMatchObject({
|
||||
color: MAP_STYLE_TOKENS.state.inactive,
|
||||
lineWidth: 2.5,
|
||||
@@ -133,7 +174,9 @@ describe("workbench supply layer controls", () => {
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "source-hydrant")).toMatchObject({
|
||||
imageSrc: "/map/gis-hydrant.svg"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "source-non-residential-meter")).toMatchObject({
|
||||
expect(
|
||||
MAP_LEGEND_ITEMS.find((item) => item.id === "source-non-residential-meter")
|
||||
).toMatchObject({
|
||||
imageSrc: "/map/gis-non-residential-meter.svg"
|
||||
});
|
||||
expect(MAP_LEGEND_ITEMS.find((item) => item.id === "impact-area")).toMatchObject({
|
||||
@@ -147,32 +190,27 @@ describe("workbench supply layer controls", () => {
|
||||
const initialItems = createLayerControlItems(INITIAL_LAYER_VISIBILITY);
|
||||
const initialLegendIds = createVisibleMapLegendItems(initialItems).map((item) => item.id);
|
||||
|
||||
expect(initialLegendIds).toEqual(expect.arrayContaining([
|
||||
"major-pipe",
|
||||
"valve",
|
||||
"scada-flow",
|
||||
"water-quality-monitoring"
|
||||
]));
|
||||
expect(initialLegendIds).not.toEqual(expect.arrayContaining([
|
||||
"source-major-pipe",
|
||||
"source-inventory-pipe",
|
||||
"impact-area"
|
||||
]));
|
||||
expect(initialLegendIds).toEqual(
|
||||
expect.arrayContaining(["major-pipe", "valve", "scada-flow", "water-quality-monitoring"])
|
||||
);
|
||||
expect(initialLegendIds).not.toEqual(
|
||||
expect.arrayContaining(["source-major-pipe", "source-inventory-pipe", "impact-area"])
|
||||
);
|
||||
|
||||
const sourcePipeItems = createLayerControlItems({
|
||||
...INITIAL_LAYER_VISIBILITY,
|
||||
fx_20200423_pipes: true
|
||||
});
|
||||
const sourcePipeLegendIds = createVisibleMapLegendItems(sourcePipeItems).map(
|
||||
(item) => item.id
|
||||
);
|
||||
const sourcePipeLegendIds = createVisibleMapLegendItems(sourcePipeItems).map((item) => item.id);
|
||||
|
||||
expect(sourcePipeLegendIds).toEqual(expect.arrayContaining([
|
||||
"source-major-pipe",
|
||||
"source-medium-pipe",
|
||||
"source-minor-pipe",
|
||||
"source-unknown-pipe"
|
||||
]));
|
||||
expect(sourcePipeLegendIds).toEqual(
|
||||
expect.arrayContaining([
|
||||
"source-major-pipe",
|
||||
"source-medium-pipe",
|
||||
"source-minor-pipe",
|
||||
"source-unknown-pipe"
|
||||
])
|
||||
);
|
||||
expect(sourcePipeLegendIds).not.toContain("source-inventory-pipe");
|
||||
|
||||
const reducedItems = createLayerControlItems({
|
||||
|
||||
Reference in New Issue
Block a user