143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
import type { VectorSourceSpecification, StyleSpecification } from "maplibre-gl";
|
|
import { MAP_BACKGROUND_COLORS } from "./map-colors";
|
|
|
|
export const WATER_NETWORK_GLOBAL_VIEW = {
|
|
bbox3857: [
|
|
13551482,
|
|
3612812.75,
|
|
13577696,
|
|
3632065.75
|
|
]
|
|
} as const;
|
|
|
|
export const SOURCE_LAYERS = {
|
|
conduits: "geo_conduits_mat",
|
|
junctions: "geo_junctions_mat",
|
|
orifices: "geo_orifices_mat",
|
|
outfalls: "geo_outfalls_mat",
|
|
pumps: "geo_pumps_mat"
|
|
} as const;
|
|
|
|
export const WATER_NETWORK_SOURCE_IDS = [
|
|
"conduits",
|
|
"junctions",
|
|
"orifices",
|
|
"outfalls",
|
|
"pumps"
|
|
] as const;
|
|
|
|
export type WaterNetworkSourceId = (typeof WATER_NETWORK_SOURCE_IDS)[number];
|
|
|
|
const GEOSERVER_WMTS_ROOT = "https://geoserver.waternetwork.cn/geoserver/gwc/service/wmts/rest";
|
|
|
|
export function createWaterNetworkSources() {
|
|
return {
|
|
conduits: createLingangVectorSource(
|
|
SOURCE_LAYERS.conduits,
|
|
"line",
|
|
[121.7350340307058, 30.84636502815, 121.97051839928491, 30.994737681416165]
|
|
),
|
|
junctions: createLingangVectorSource(
|
|
SOURCE_LAYERS.junctions,
|
|
"point",
|
|
[121.7350340307058, 30.84636502815, 121.97051839928491, 30.994737681416165]
|
|
),
|
|
orifices: createLingangVectorSource(
|
|
SOURCE_LAYERS.orifices,
|
|
"line",
|
|
[121.88611269518903, 30.919491577239235, 121.9347115520599, 30.952564332104696]
|
|
),
|
|
outfalls: createLingangVectorSource(
|
|
SOURCE_LAYERS.outfalls,
|
|
"point",
|
|
[121.77154156385242, 30.85723317314842, 121.77231411499677, 30.859452151585806]
|
|
),
|
|
pumps: createLingangVectorSource(
|
|
SOURCE_LAYERS.pumps,
|
|
"line",
|
|
[121.73585149761436, 30.861759757577705, 121.9498481645973, 30.983213202338085]
|
|
)
|
|
};
|
|
}
|
|
|
|
function createLingangVectorSource(
|
|
sourceLayer: (typeof SOURCE_LAYERS)[keyof typeof SOURCE_LAYERS],
|
|
style: "line" | "point",
|
|
bounds: [number, number, number, number]
|
|
): VectorSourceSpecification {
|
|
return {
|
|
type: "vector",
|
|
tiles: [
|
|
`${GEOSERVER_WMTS_ROOT}/lingang:${sourceLayer}/${style}/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile`
|
|
],
|
|
bounds,
|
|
minzoom: 0,
|
|
maxzoom: 24
|
|
};
|
|
}
|
|
|
|
export function createBaseStyle(mapboxToken?: string): StyleSpecification {
|
|
const sources: StyleSpecification["sources"] = {};
|
|
const layers: StyleSpecification["layers"] = [
|
|
{
|
|
id: "background",
|
|
type: "background",
|
|
paint: {
|
|
"background-color": MAP_BACKGROUND_COLORS.primary
|
|
}
|
|
}
|
|
];
|
|
|
|
if (mapboxToken) {
|
|
sources["mapbox-light"] = {
|
|
type: "raster",
|
|
tiles: [
|
|
`https://api.mapbox.com/styles/v1/mapbox/light-v11/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
|
|
],
|
|
tileSize: 512,
|
|
attribution:
|
|
'© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
};
|
|
sources["mapbox-satellite"] = {
|
|
type: "raster",
|
|
tiles: [
|
|
`https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
|
|
],
|
|
tileSize: 512,
|
|
attribution:
|
|
'© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
};
|
|
|
|
layers.push({
|
|
id: "mapbox-light",
|
|
type: "raster",
|
|
source: "mapbox-light",
|
|
paint: {
|
|
"raster-opacity": 0.82,
|
|
"raster-saturation": -0.22,
|
|
"raster-contrast": 0.04
|
|
}
|
|
});
|
|
layers.push({
|
|
id: "mapbox-satellite",
|
|
type: "raster",
|
|
source: "mapbox-satellite",
|
|
layout: {
|
|
visibility: "none"
|
|
},
|
|
paint: {
|
|
"raster-opacity": 0.86,
|
|
"raster-saturation": -0.16,
|
|
"raster-contrast": 0.02
|
|
}
|
|
});
|
|
}
|
|
|
|
return {
|
|
version: 8,
|
|
glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
|
|
sources,
|
|
layers
|
|
};
|
|
}
|