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

feat(map): refine SCADA feature experience

Browse Source
This commit is contained in:
jiang
2026-07-14 10:48:24 +08:00
parent 0b7e827024
commit 1c85d938a6
35 changed files with 1020 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/workbench/map/drawing-layers.ts
+17 -15
View File
@@ -6,6 +6,8 @@ import type {
} from "maplibre-gl";
import type { FeatureCollection, Geometry, LineString, Point, Polygon } from "geojson";
import { createCircleCoordinates } from "./geo";
import { MAP_STYLE_TOKENS } from "./map-colors";
import { WORKBENCH_INTERACTION_BEFORE_ID } from "./layers";
export const DRAWING_SOURCE_IDS = {
features: "workbench-drawing-features",
@@ -54,7 +56,7 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.features,
filter: ["==", ["geometry-type"], "Polygon"],
paint: {
"fill-color": "#2563eb",
"fill-color": MAP_STYLE_TOKENS.tool.geometry,
"fill-opacity": 0.16
}
},
@@ -64,7 +66,7 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.features,
filter: ["==", ["geometry-type"], "Polygon"],
paint: {
"line-color": "#2563eb",
"line-color": MAP_STYLE_TOKENS.tool.geometry,
"line-width": 2,
"line-opacity": 0.82
}
@@ -75,7 +77,7 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.features,
filter: ["==", ["geometry-type"], "LineString"],
paint: {
"line-color": "#2563eb",
"line-color": MAP_STYLE_TOKENS.tool.geometry,
"line-width": 3,
"line-opacity": 0.88
}
@@ -86,9 +88,9 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.features,
filter: ["==", ["geometry-type"], "Point"],
paint: {
"circle-color": "#2563eb",
"circle-color": MAP_STYLE_TOKENS.tool.geometry,
"circle-radius": 6,
"circle-stroke-color": "#ffffff",
"circle-stroke-color": MAP_STYLE_TOKENS.canvas.casing,
"circle-stroke-width": 2
}
},
@@ -98,7 +100,7 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.features,
filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", ["get", "id"], ""]],
paint: {
"line-color": "#ff7a45",
"line-color": MAP_STYLE_TOKENS.state.selected,
"line-width": 4,
"line-opacity": 0.86
}
@@ -109,7 +111,7 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.features,
filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", ["get", "id"], ""]],
paint: {
"line-color": "#ff7a45",
"line-color": MAP_STYLE_TOKENS.state.selected,
"line-width": 6,
"line-opacity": 0.72
}
@@ -120,10 +122,10 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.features,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", ["get", "id"], ""]],
paint: {
"circle-color": "#ff7a45",
"circle-color": MAP_STYLE_TOKENS.state.selected,
"circle-radius": 10,
"circle-opacity": 0.2,
"circle-stroke-color": "#ff7a45",
"circle-stroke-color": MAP_STYLE_TOKENS.state.selected,
"circle-stroke-width": 2
}
},
@@ -133,7 +135,7 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.draft,
filter: ["==", ["geometry-type"], "Polygon"],
paint: {
"fill-color": "#ff7a45",
"fill-color": MAP_STYLE_TOKENS.tool.geometry,
"fill-opacity": 0.12
}
},
@@ -143,7 +145,7 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.draft,
filter: ["any", ["==", ["geometry-type"], "LineString"], ["==", ["geometry-type"], "Polygon"]],
paint: {
"line-color": "#ff7a45",
"line-color": MAP_STYLE_TOKENS.tool.geometry,
"line-width": 2,
"line-dasharray": [2, 2],
"line-opacity": 0.9
@@ -155,9 +157,9 @@ export const drawingLayers: StyleSpecification["layers"] = [
source: DRAWING_SOURCE_IDS.draft,
filter: ["==", ["geometry-type"], "Point"],
paint: {
"circle-color": "#ff7a45",
"circle-color": MAP_STYLE_TOKENS.state.selected,
"circle-radius": 4,
"circle-stroke-color": "#ffffff",
"circle-stroke-color": MAP_STYLE_TOKENS.canvas.casing,
"circle-stroke-width": 1.5
}
}
@@ -167,7 +169,7 @@ export function ensureDrawingLayers(map: {
getSource: (id: string) => unknown;
addSource: (id: string, source: GeoJSONSourceSpecification) => void;
getLayer: (id: string) => unknown;
addLayer: (layer: NonNullable<StyleSpecification["layers"]>[number]) => void;
addLayer: (layer: NonNullable<StyleSpecification["layers"]>[number], beforeId?: string) => void;
}) {
if (!map.getSource(DRAWING_SOURCE_IDS.features)) {
map.addSource(DRAWING_SOURCE_IDS.features, drawingSources.features);
@@ -179,7 +181,7 @@ export function ensureDrawingLayers(map: {
drawingLayers.forEach((layer) => {
if (!map.getLayer(layer.id)) {
map.addLayer(layer);
map.addLayer(layer, WORKBENCH_INTERACTION_BEFORE_ID);
}
});
}