This repository was archived by the owner on Jan 25, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathShadingAndContours.tsx
More file actions
172 lines (140 loc) · 5.73 KB
/
ShadingAndContours.tsx
File metadata and controls
172 lines (140 loc) · 5.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
import { LineSymbolizer, RasterSymbolizer, Rule, Style } from "jsxnik/mapnikConfig";
import { colors } from "./colors.js";
import { DatasourceEx } from "./DatasourceEx.js";
import { TextSymbolizerEx, TextSymbolizerExProps } from "./TextSymbolizerEx.js";
import { GdalLayer } from "./GdalLayer.js";
import { RuleEx } from "./RuleEx.js";
import { SqlLayer } from "./SqlLayer.js";
import { StyledLayer } from "./StyledLayer.js";
import { seq } from "./utils.js";
import { EmptyWorldLayer } from "./EmptyWorldLayer.js";
type CountryShadingAndContours = {
cc: string;
cutCcs: string[];
contours: boolean;
shading: boolean;
};
const contoursDflt: Partial<Parameters<typeof LineSymbolizer>[0] & TextSymbolizerExProps> = {
smooth: 1,
simplify: "5 * @scale",
simplifyAlgorithm: "visvalingam-whyatt", // radial-distance would be better here but is buggy, see: https://github.com/mapnik/mapnik/issues/4347
};
function ContoursStyle() {
return (
<Style name="contours" opacity={0.33}>
<RuleEx minZoom={13} maxZoom={14} filter="([height] % 100 = 0) and ([height] != 0)">
<LineSymbolizer stroke={colors.contour} strokeWidth={0.4} {...contoursDflt} />
<TextSymbolizerEx line fill={colors.contour} upright="left" {...contoursDflt}>
[height]
</TextSymbolizerEx>
</RuleEx>
<RuleEx minZoom={12} maxZoom={12} filter="([height] % 50 = 0) and ([height] != 0)">
<LineSymbolizer stroke={colors.contour} strokeWidth={0.2} {...contoursDflt} />
</RuleEx>
<RuleEx minZoom={13} maxZoom={14} filter="([height] % 20 = 0) and ([height] != 0)">
<LineSymbolizer stroke={colors.contour} strokeWidth={0.2} {...contoursDflt} />
</RuleEx>
<RuleEx minZoom={15} filter="([height] % 100 = 0) and ([height] != 0)">
<LineSymbolizer stroke={colors.contour} strokeWidth={0.6} {...contoursDflt} />
<TextSymbolizerEx line fill={colors.contour} upright="left" {...contoursDflt}>
[height]
</TextSymbolizerEx>
</RuleEx>
<RuleEx minZoom={15} filter="([height] % 10 = 0) and ([height] != 0)">
<LineSymbolizer stroke={colors.contour} strokeWidth={0.3} {...contoursDflt} />
</RuleEx>
<RuleEx minZoom={15} filter="([height] % 50 = 0) and ([height] % 100 != 0)">
<TextSymbolizerEx line fill={colors.contour} {...contoursDflt} upright="left">
[height]
</TextSymbolizerEx>
</RuleEx>
</Style>
);
}
function HillshadeStyle() {
const zooms = seq(7, 19);
return (
<Style name="hillshade">
{zooms.map((z, i) => (
<RuleEx minZoom={i === 0 ? undefined : z} maxZoom={i === zooms.length - 1 ? undefined : z}>
<RasterSymbolizer scaling="lanczos" opacity={Math.min(1, 1 - Math.log(z - 7) / 5)} />
</RuleEx>
))}
</Style>
);
}
function CountryShadingAndContours({ cc, cutCcs, contours, shading }: CountryShadingAndContours) {
return (
<StyledLayer styleName="shadingAndContoursMask" compOp="src-over">
<DatasourceEx
params={{
type: "gdal",
file: `shading/${cc}/mask.tif`,
}}
/>
<EmptyWorldLayer compOp="src-in">
{contours && (
<SqlLayer
styleName="contours"
minZoom={12}
sql={`SELECT wkb_geometry, height FROM contour_${cc}_split WHERE wkb_geometry && !bbox!`}
/>
)}
{shading && <GdalLayer styleName="hillshade" file={`shading/${cc}/final.tif`} />}
</EmptyWorldLayer>
{cutCcs.map((cutCc) => (
<GdalLayer styleName="shadingAndContoursMask" compOp="dst-out" file={`shading/${cutCc}/mask.tif`} />
))}
{/* bridges above shading and below roads */}
<SqlLayer
styleName="bridge_area"
minZoom={15}
compOp="dst-out"
geometryColumn="geometry"
sql="SELECT geometry FROM osm_landusages WHERE geometry && !bbox! AND type = 'bridge'"
/>
</StyledLayer>
);
}
type Props = {
contours: boolean;
shading: boolean;
};
export function ShadingAndCountours({ contours, shading }: Props) {
return (
<>
{/* hillshading helper for mask */}
<Style name="shadingAndContoursMask">
<Rule>
<RasterSymbolizer scaling="bilinear" opacity={1} />
</Rule>
</Style>
<ContoursStyle />
<HillshadeStyle />
<CountryShadingAndContours contours={contours} shading={shading} cc="at" cutCcs={["sk", "si", "cz"]} />
<CountryShadingAndContours contours={contours} shading={shading} cc="it" cutCcs={["at", "ch", "si", "fr"]} />
<CountryShadingAndContours contours={contours} shading={shading} cc="ch" cutCcs={["at", "fr"]} />
<CountryShadingAndContours contours={contours} shading={shading} cc="si" cutCcs={[]} />
<CountryShadingAndContours contours={contours} shading={shading} cc="cz" cutCcs={["sk", "pl"]} />
<CountryShadingAndContours contours={contours} shading={shading} cc="pl" cutCcs={["sk"]} />
<CountryShadingAndContours contours={contours} shading={shading} cc="sk" cutCcs={[]} />
<CountryShadingAndContours contours={contours} shading={shading} cc="fr" cutCcs={[]} />
{/* to cut out detailed */}
<EmptyWorldLayer compOp="src-over">
{["it", "at", "ch", "si", "pl", "sk", "cz", "fr"].map((cc) => (
<GdalLayer styleName="shadingAndContoursMask" file={`shading/${cc}/mask.tif`} />
))}
<EmptyWorldLayer compOp="src-out">
{contours && (
<SqlLayer
styleName="contours"
minZoom={12}
sql="SELECT geom, height FROM contour_split WHERE geom && !bbox!"
/>
)}
{shading && <GdalLayer styleName="hillshade" file="shading/final.tif" />}
</EmptyWorldLayer>
</EmptyWorldLayer>
</>
);
}