141 lines
3.9 KiB
TypeScript
141 lines
3.9 KiB
TypeScript
import type { GeoJSONSourceSpecification, StyleSpecification } from "maplibre-gl";
|
|
import { annotationPoints, impactAreaPolygon } from "../data/workbench-simulation";
|
|
import { MAP_STYLE_TOKENS } from "./map-colors";
|
|
|
|
export const SIMULATION_SOURCE_IDS = {
|
|
impactArea: "simulation-impact-area",
|
|
annotations: "simulation-annotations"
|
|
} as const;
|
|
|
|
export const simulationSources = {
|
|
impactArea: {
|
|
type: "geojson",
|
|
data: impactAreaPolygon
|
|
} satisfies GeoJSONSourceSpecification,
|
|
annotations: {
|
|
type: "geojson",
|
|
data: annotationPoints
|
|
} satisfies GeoJSONSourceSpecification
|
|
};
|
|
|
|
export const simulationAnnotationLayers: StyleSpecification["layers"] = [
|
|
{
|
|
id: "simulation-impact-fill",
|
|
type: "fill",
|
|
source: SIMULATION_SOURCE_IDS.impactArea,
|
|
paint: {
|
|
"fill-color": MAP_STYLE_TOKENS.state.risk,
|
|
"fill-opacity": MAP_STYLE_TOKENS.opacity.area
|
|
}
|
|
},
|
|
{
|
|
id: "simulation-impact-outline",
|
|
type: "line",
|
|
source: SIMULATION_SOURCE_IDS.impactArea,
|
|
paint: {
|
|
"line-color": MAP_STYLE_TOKENS.state.risk,
|
|
"line-width": 1.5,
|
|
"line-dasharray": [2, 2],
|
|
"line-opacity": 0.72
|
|
}
|
|
},
|
|
{
|
|
id: "simulation-burst-halo",
|
|
type: "circle",
|
|
source: SIMULATION_SOURCE_IDS.annotations,
|
|
filter: ["==", ["get", "kind"], "burst"],
|
|
paint: {
|
|
"circle-color": MAP_STYLE_TOKENS.canvas.casing,
|
|
"circle-radius": 18,
|
|
"circle-stroke-color": MAP_STYLE_TOKENS.state.incident,
|
|
"circle-stroke-width": 3,
|
|
"circle-opacity": 0.88
|
|
}
|
|
},
|
|
{
|
|
id: "simulation-burst-point",
|
|
type: "circle",
|
|
source: SIMULATION_SOURCE_IDS.annotations,
|
|
filter: ["==", ["get", "kind"], "burst"],
|
|
paint: {
|
|
"circle-color": MAP_STYLE_TOKENS.state.incident,
|
|
"circle-radius": 7,
|
|
"circle-stroke-color": MAP_STYLE_TOKENS.canvas.casing,
|
|
"circle-stroke-width": 3
|
|
}
|
|
},
|
|
{
|
|
id: "simulation-pipe-label",
|
|
type: "symbol",
|
|
source: SIMULATION_SOURCE_IDS.annotations,
|
|
filter: ["==", ["get", "kind"], "pipe-label"],
|
|
layout: {
|
|
"text-field": ["get", "label"],
|
|
"text-size": 13,
|
|
"text-font": ["Open Sans Bold"],
|
|
"text-allow-overlap": true
|
|
},
|
|
paint: {
|
|
"text-color": MAP_STYLE_TOKENS.label.inverse,
|
|
"text-halo-color": MAP_STYLE_TOKENS.state.agent,
|
|
"text-halo-width": 9
|
|
}
|
|
},
|
|
{
|
|
id: "simulation-impact-label",
|
|
type: "symbol",
|
|
source: SIMULATION_SOURCE_IDS.annotations,
|
|
filter: ["==", ["get", "kind"], "tooltip"],
|
|
layout: {
|
|
"text-field": ["get", "label"],
|
|
"text-size": 14,
|
|
"text-font": ["Open Sans Bold"],
|
|
"text-offset": [0, 0],
|
|
"text-allow-overlap": true
|
|
},
|
|
paint: {
|
|
"text-color": MAP_STYLE_TOKENS.state.risk,
|
|
"text-halo-color": MAP_STYLE_TOKENS.canvas.casing,
|
|
"text-halo-width": 4
|
|
}
|
|
},
|
|
{
|
|
id: "simulation-district-label",
|
|
type: "symbol",
|
|
source: SIMULATION_SOURCE_IDS.annotations,
|
|
filter: ["==", ["get", "kind"], "district"],
|
|
layout: {
|
|
"text-field": ["get", "label"],
|
|
"text-size": 13,
|
|
"text-font": ["Open Sans Regular"],
|
|
"text-allow-overlap": true
|
|
},
|
|
paint: {
|
|
"text-color": MAP_STYLE_TOKENS.label.secondary,
|
|
"text-halo-color": MAP_STYLE_TOKENS.canvas.casing,
|
|
"text-halo-width": 3
|
|
}
|
|
},
|
|
{
|
|
id: "simulation-burst-label",
|
|
type: "symbol",
|
|
source: SIMULATION_SOURCE_IDS.annotations,
|
|
filter: ["==", ["get", "kind"], "burst"],
|
|
layout: {
|
|
"text-field": "爆管位置\nDN600 给水管线\n压力：0.18 MPa\n时间：09:00",
|
|
"text-size": 12,
|
|
"text-font": ["Open Sans Regular"],
|
|
"text-offset": [5.2, -3.4],
|
|
"text-anchor": "left",
|
|
"text-allow-overlap": true
|
|
},
|
|
paint: {
|
|
"text-color": MAP_STYLE_TOKENS.label.primary,
|
|
"text-halo-color": MAP_STYLE_TOKENS.canvas.casing,
|
|
"text-halo-width": 5
|
|
}
|
|
}
|
|
];
|
|
|
|
export const simulationLayerIds = simulationAnnotationLayers.map((layer) => layer.id);
|