OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(map): add five-source drainage styling

Browse Source
This commit is contained in:
jiang
2026-07-10 18:45:43 +08:00
parent 2258177726
commit 513c403017
19 changed files with 1303 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/workbench/map/layers.ts
+425 -68
View File
@@ -1,85 +1,127 @@
import type { StyleSpecification } from "maplibre-gl";
import {
CLOSED_CONDUIT_COLOR,
DRAINAGE_SELECTED_OUTLINE_COLORS,
DRAINAGE_SOURCE_COLORS,
DRAINAGE_SOURCE_OPACITIES
} from "./map-colors";
import { DRAINAGE_LAYER_VISUALS } from "./map-layer-visuals";
import { SOURCE_LAYERS } from "./sources";
export { DRAINAGE_SOURCE_COLORS } from "./map-colors";
export const INTERACTIVE_HIT_LAYER_IDS = [
"conduits-hit",
"junctions-hit",
"orifices-hit",
"pumps-hit",
"outfalls-hit"
];
export const waterNetworkLayers: StyleSpecification["layers"] = [
{
id: "pipes-casing",
type: "line",
source: "pipes",
"source-layer": SOURCE_LAYERS.pipes,
minzoom: 9,
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
paint: {
"line-color": "rgba(255,255,255,0.86)",
"line-width": [
"interpolate",
["linear"],
["zoom"],
9,
1,
13,
2.4,
17,
["+", 5, ["/", ["coalesce", ["get", "diameter"], 100], 280]]
],
"line-width": DRAINAGE_LAYER_VISUALS.conduits.casingWidth,
"line-opacity": 0.9
}
},
{
id: "pipes-flow",
type: "line",
source: "pipes",
"source-layer": SOURCE_LAYERS.pipes,
minzoom: 9,
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
paint: {
"line-color": [
"case",
["==", ["get", "status"], "Closed"],
"#9ca3af",
[">=", ["coalesce", ["get", "diameter"], 0], 600],
"#0477bf",
[">=", ["coalesce", ["get", "diameter"], 0], 300],
"#0aa6a6",
"#3dbf7f"
CLOSED_CONDUIT_COLOR,
DRAINAGE_SOURCE_COLORS.conduits
],
"line-width": [
"interpolate",
["linear"],
["zoom"],
9,
0.8,
13,
1.8,
17,
["+", 2.5, ["/", ["coalesce", ["get", "diameter"], 100], 360]]
],
"line-opacity": 0.82
"line-width": DRAINAGE_LAYER_VISUALS.conduits.width,
"line-opacity": DRAINAGE_SOURCE_OPACITIES.conduits
}
},
{
id: "pipes-risk-glow",
type: "line",
source: "pipes",
"source-layer": SOURCE_LAYERS.pipes,
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
minzoom: 12,
filter: [">=", ["coalesce", ["get", "diameter"], 0], 600],
paint: {
"line-color": "#ff7a45",
"line-width": ["interpolate", ["linear"], ["zoom"], 12, 2.6, 17, 7.5],
"line-color": DRAINAGE_SOURCE_COLORS.conduits,
"line-width": DRAINAGE_LAYER_VISUALS.conduits.riskGlowWidth,
"line-blur": 2.5,
"line-opacity": 0.22
}
},
{
id: "pipes-hover",
id: "pipes-hover-outline",
type: "line",
source: "pipes",
"source-layer": SOURCE_LAYERS.pipes,
minzoom: 9,
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": "#111827",
"line-width": 7,
"line-opacity": 0.35
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.conduits.hoverOutlineWidth,
"line-opacity": 0.92
}
},
{
id: "pipes-hover",
type: "line",
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.conduits,
"line-width": DRAINAGE_LAYER_VISUALS.conduits.hoverWidth,
"line-opacity": 1
}
},
{
id: "pipes-selected-halo",
type: "line",
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.conduits.selectedHaloWidth,
"line-opacity": 1
}
},
{
id: "pipes-selected-outline",
type: "line",
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SELECTED_OUTLINE_COLORS.conduits,
"line-width": DRAINAGE_LAYER_VISUALS.conduits.selectedOutlineWidth,
"line-opacity": 1
}
},
{
id: "pipes-selected",
type: "line",
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.conduits,
"line-width": DRAINAGE_LAYER_VISUALS.conduits.selectedWidth,
"line-opacity": 1
}
},
{
@@ -87,11 +129,11 @@ export const waterNetworkLayers: StyleSpecification["layers"] = [
type: "circle",
source: "junctions",
"source-layer": SOURCE_LAYERS.junctions,
minzoom: 13,
minzoom: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
paint: {
"circle-color": "#ffffff",
"circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 2.8, 17, 6],
"circle-opacity": 0.82,
"circle-radius": DRAINAGE_LAYER_VISUALS.junctions.haloRadius,
"circle-opacity": 0.76,
"circle-stroke-color": "rgba(15,23,42,0.22)",
"circle-stroke-width": 1
}
@@ -101,21 +143,11 @@ export const waterNetworkLayers: StyleSpecification["layers"] = [
type: "circle",
source: "junctions",
"source-layer": SOURCE_LAYERS.junctions,
minzoom: 13,
minzoom: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
paint: {
"circle-color": [
"interpolate",
["linear"],
["coalesce", ["get", "demand"], 0],
0,
"#70c1b3",
20,
"#247ba0",
60,
"#f25f5c"
],
"circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 1.5, 17, 3.8],
"circle-opacity": 0.86
"circle-color": DRAINAGE_SOURCE_COLORS.junctions,
"circle-radius": DRAINAGE_LAYER_VISUALS.junctions.radius,
"circle-opacity": DRAINAGE_SOURCE_OPACITIES.junctions
}
},
{
@@ -123,14 +155,339 @@ export const waterNetworkLayers: StyleSpecification["layers"] = [
type: "circle",
source: "junctions",
"source-layer": SOURCE_LAYERS.junctions,
minzoom: 13,
minzoom: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"circle-color": "#111827",
"circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 5, 17, 10],
"circle-opacity": 0.2,
"circle-stroke-color": "#111827",
"circle-color": DRAINAGE_SOURCE_COLORS.junctions,
"circle-radius": DRAINAGE_LAYER_VISUALS.junctions.hoverRadius,
"circle-opacity": 0.24,
"circle-stroke-color": DRAINAGE_SOURCE_COLORS.junctions,
"circle-stroke-width": 2
}
},
{
id: "junctions-selected-halo",
type: "circle",
source: "junctions",
"source-layer": SOURCE_LAYERS.junctions,
filter: ["==", ["get", "id"], ""],
paint: {
"circle-color": "#ffffff",
"circle-radius": DRAINAGE_LAYER_VISUALS.junctions.selectedHaloRadius,
"circle-opacity": 0.92
}
},
{
id: "junctions-selected",
type: "circle",
source: "junctions",
"source-layer": SOURCE_LAYERS.junctions,
filter: ["==", ["get", "id"], ""],
paint: {
"circle-color": DRAINAGE_SOURCE_COLORS.junctions,
"circle-radius": DRAINAGE_LAYER_VISUALS.junctions.selectedRadius,
"circle-opacity": 1,
"circle-stroke-color": DRAINAGE_SELECTED_OUTLINE_COLORS.junctions,
"circle-stroke-width": 3
}
},
{
id: "orifices-casing",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
paint: {
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.orifices.casingWidth,
"line-opacity": 0.9
}
},
{
id: "orifices",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.orifices,
"line-width": DRAINAGE_LAYER_VISUALS.orifices.width,
"line-opacity": DRAINAGE_SOURCE_OPACITIES.orifices
}
},
{
id: "orifices-hover-outline",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.orifices.hoverOutlineWidth,
"line-opacity": 0.92
}
},
{
id: "orifices-hover",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.orifices,
"line-width": DRAINAGE_LAYER_VISUALS.orifices.hoverWidth,
"line-opacity": 1
}
},
{
id: "orifices-selected-halo",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.orifices.selectedHaloWidth,
"line-opacity": 1
}
},
{
id: "orifices-selected-outline",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SELECTED_OUTLINE_COLORS.orifices,
"line-width": DRAINAGE_LAYER_VISUALS.orifices.selectedOutlineWidth,
"line-opacity": 1
}
},
{
id: "orifices-selected",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.orifices,
"line-width": DRAINAGE_LAYER_VISUALS.orifices.selectedWidth,
"line-opacity": 1
}
},
{
id: "pumps-casing",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
paint: {
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.pumps.casingWidth,
"line-opacity": 0.9
}
},
{
id: "pumps",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.pumps,
"line-width": DRAINAGE_LAYER_VISUALS.pumps.width,
"line-opacity": DRAINAGE_SOURCE_OPACITIES.pumps
}
},
{
id: "pumps-hover-outline",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.pumps.hoverOutlineWidth,
"line-opacity": 0.92
}
},
{
id: "pumps-hover",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.pumps,
"line-width": DRAINAGE_LAYER_VISUALS.pumps.hoverWidth,
"line-opacity": 1
}
},
{
id: "pumps-selected-halo",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": "#ffffff",
"line-width": DRAINAGE_LAYER_VISUALS.pumps.selectedHaloWidth,
"line-opacity": 1
}
},
{
id: "pumps-selected-outline",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SELECTED_OUTLINE_COLORS.pumps,
"line-width": DRAINAGE_LAYER_VISUALS.pumps.selectedOutlineWidth,
"line-opacity": 1
}
},
{
id: "pumps-selected",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
filter: ["==", ["get", "id"], ""],
paint: {
"line-color": DRAINAGE_SOURCE_COLORS.pumps,
"line-width": DRAINAGE_LAYER_VISUALS.pumps.selectedWidth,
"line-opacity": 1
}
},
{
id: "outfalls-halo",
type: "circle",
source: "outfalls",
"source-layer": SOURCE_LAYERS.outfalls,
minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
paint: {
"circle-color": "#ffffff",
"circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.haloRadius,
"circle-opacity": 0.9
}
},
{
id: "outfalls",
type: "circle",
source: "outfalls",
"source-layer": SOURCE_LAYERS.outfalls,
minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
paint: {
"circle-color": DRAINAGE_SOURCE_COLORS.outfalls,
"circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.radius,
"circle-stroke-color": "#7F1D2D",
"circle-stroke-width": 1,
"circle-opacity": DRAINAGE_SOURCE_OPACITIES.outfalls
}
},
{
id: "outfalls-hover",
type: "circle",
source: "outfalls",
"source-layer": SOURCE_LAYERS.outfalls,
minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
filter: ["==", ["get", "id"], ""],
paint: {
"circle-color": DRAINAGE_SOURCE_COLORS.outfalls,
"circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.hoverRadius,
"circle-opacity": 0.24,
"circle-stroke-color": DRAINAGE_SOURCE_COLORS.outfalls,
"circle-stroke-width": 2
}
},
{
id: "outfalls-selected-halo",
type: "circle",
source: "outfalls",
"source-layer": SOURCE_LAYERS.outfalls,
filter: ["==", ["get", "id"], ""],
paint: {
"circle-color": "#ffffff",
"circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.selectedHaloRadius,
"circle-opacity": 0.92
}
},
{
id: "outfalls-selected",
type: "circle",
source: "outfalls",
"source-layer": SOURCE_LAYERS.outfalls,
filter: ["==", ["get", "id"], ""],
paint: {
"circle-color": DRAINAGE_SOURCE_COLORS.outfalls,
"circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.selectedRadius,
"circle-opacity": 1,
"circle-stroke-color": DRAINAGE_SELECTED_OUTLINE_COLORS.outfalls,
"circle-stroke-width": 3
}
},
{
id: "conduits-hit",
type: "line",
source: "conduits",
"source-layer": SOURCE_LAYERS.conduits,
minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
paint: {
"line-color": "#000000",
"line-width": DRAINAGE_LAYER_VISUALS.conduits.hitWidth,
"line-opacity": 0
}
},
{
id: "junctions-hit",
type: "circle",
source: "junctions",
"source-layer": SOURCE_LAYERS.junctions,
minzoom: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
paint: {
"circle-color": "#000000",
"circle-radius": DRAINAGE_LAYER_VISUALS.junctions.hitRadius,
"circle-opacity": 0
}
},
{
id: "orifices-hit",
type: "line",
source: "orifices",
"source-layer": SOURCE_LAYERS.orifices,
minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
paint: {
"line-color": "#000000",
"line-width": DRAINAGE_LAYER_VISUALS.orifices.hitWidth,
"line-opacity": 0
}
},
{
id: "pumps-hit",
type: "line",
source: "pumps",
"source-layer": SOURCE_LAYERS.pumps,
minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
paint: {
"line-color": "#000000",
"line-width": DRAINAGE_LAYER_VISUALS.pumps.hitWidth,
"line-opacity": 0
}
},
{
id: "outfalls-hit",
type: "circle",
source: "outfalls",
"source-layer": SOURCE_LAYERS.outfalls,
minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
paint: {
"circle-color": "#000000",
"circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.hitRadius,
"circle-opacity": 0
}
}
];