Skip to content

Commit 78e6a02

Browse files
dnlkochdnlkoch
committed
feat: move logic for parsing the style to util; write the current GS style to the layer as property
1 parent d63aab2 commit 78e6a02

File tree

2 files changed

+156
-142
lines changed

2 files changed

+156
-142
lines changed

‎src/components/ToolMenu/Draw/StylingDrawer/StylingComponent/index.tsx

+78-142
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import * as React from 'react';
2-
3-
import {
1+
import React, {
42
useEffect,
53
useState
64
} from 'react';
75

8-
import OlParser from 'geostyler-openlayers-parser';
9-
106
import {
117
Style as GsStyle
128
} from 'geostyler-style';
@@ -15,94 +11,90 @@ import CardStyle, {
1511
CardStyleProps
1612
} from 'geostyler/dist/Component/CardStyle/CardStyle';
1713

18-
import OlFeature from 'ol/Feature';
19-
20-
import OlLayerVector from 'ol/layer/Vector';
21-
22-
import VectorSource from 'ol/source/Vector';
23-
2414
import {
25-
StyleFunction,
26-
StyleLike as OlStyleLike
15+
StyleFunction as OlStyleFunction
2716
} from 'ol/style/Style';
2817

29-
import {
30-
MapUtil
31-
} from '@terrestris/ol-util';
32-
3318
import {
3419
useMap
3520
} from '@terrestris/react-geo/dist/Hook/useMap';
21+
import {
22+
DigitizeUtil
23+
} from '@terrestris/react-geo/dist/Util/DigitizeUtil';
24+
25+
import {
26+
parseStyle
27+
} from '../../../../../utils/parseStyle';
28+
29+
const defaultStyle: GsStyle = {
30+
name: 'Default Style',
31+
rules: [{
32+
name: 'Area',
33+
symbolizers: [{
34+
kind: 'Fill',
35+
color: '#00b72b',
36+
outlineOpacity: 0.8,
37+
opacity: 0.5,
38+
fillOpacity: 0.8,
39+
outlineWidth: 2,
40+
outlineColor: '#00b72b'
41+
}]
42+
}, {
43+
name: 'Line',
44+
symbolizers: [{
45+
kind: 'Line',
46+
color: '#00b72b',
47+
width: 2,
48+
opacity: 0.8
49+
}]
50+
}, {
51+
name: 'Point',
52+
symbolizers: [{
53+
kind: 'Mark',
54+
wellKnownName: 'circle',
55+
color: '#00b72b',
56+
strokeColor: '#00b72b',
57+
strokeOpacity: 0.8,
58+
opacity: 0.5,
59+
radius: 7
60+
}],
61+
filter: [
62+
'==',
63+
'label',
64+
'undefined'
65+
]
66+
}, {
67+
name: 'Text',
68+
symbolizers: [{
69+
kind: 'Text',
70+
label: '{{label}}',
71+
size: 12,
72+
font: [
73+
'sans-serif'
74+
],
75+
opacity: 0.8,
76+
color: '#00b72b',
77+
offset: [
78+
5,
79+
5
80+
],
81+
haloColor: '#00b72b',
82+
haloWidth: 1
83+
}],
84+
filter: [
85+
'!=',
86+
'label',
87+
'undefined'
88+
]
89+
}]
90+
};
3691

3792
export type StylingComponentProps = CardStyleProps & {};
3893

3994
export const StylingComponent: React.FC<StylingComponentProps> = ({
4095
...passThroughProps
4196
}): JSX.Element => {
4297

43-
const defaultStyle: GsStyle = {
44-
name: 'Default Style',
45-
rules: [{
46-
name: 'Area',
47-
symbolizers: [{
48-
kind: 'Fill',
49-
color: '#00b72b',
50-
outlineOpacity: 0.8,
51-
opacity: 0.5,
52-
fillOpacity: 0.8,
53-
outlineWidth: 2,
54-
outlineColor: '#00b72b'
55-
}]
56-
}, {
57-
name: 'Line',
58-
symbolizers: [{
59-
kind: 'Line',
60-
color: '#00b72b',
61-
width: 2,
62-
opacity: 0.8
63-
}]
64-
}, {
65-
name: 'Point',
66-
symbolizers: [{
67-
kind: 'Mark',
68-
wellKnownName: 'circle',
69-
color: '#00b72b',
70-
strokeColor: '#00b72b',
71-
strokeOpacity: 0.8,
72-
opacity: 0.5,
73-
radius: 7
74-
}],
75-
filter: [
76-
'==',
77-
'label',
78-
'undefined'
79-
]
80-
}, {
81-
name: 'Text',
82-
symbolizers: [{
83-
kind: 'Text',
84-
label: '{{label}}',
85-
size: 12,
86-
font: [
87-
'sans-serif'
88-
],
89-
opacity: 0.8,
90-
color: '#00b72b',
91-
offset: [
92-
5,
93-
5
94-
],
95-
haloColor: '#00b72b',
96-
haloWidth: 1
97-
}],
98-
filter: [
99-
'!=',
100-
'label',
101-
'undefined'
102-
]
103-
}]
104-
};
105-
10698
const [style, setStyle] = useState<GsStyle>(defaultStyle);
10799

108100
const map = useMap();
@@ -112,73 +104,17 @@ export const StylingComponent: React.FC<StylingComponentProps> = ({
112104
return;
113105
}
114106

115-
const olParser = new OlParser();
116-
117-
let drawVectorLayer = MapUtil.getLayerByName(map, 'react-geo_digitize') as OlLayerVector<VectorSource>;
118-
119-
const parseStyles = async () => {
120-
let olStylePolygon: OlStyleLike;
121-
let olStyleLineString: OlStyleLike;
122-
let olStylePoint: OlStyleLike;
123-
let olStyleText: OlStyleLike;
124-
125-
for (const rule of style.rules) {
126-
const newStyle: GsStyle = {
127-
name: '',
128-
rules: [rule]
129-
};
130-
131-
const olStyle = await olParser.writeStyle(newStyle);
132-
133-
if (!olStyle.output) {
134-
return;
135-
}
136-
137-
if (rule.symbolizers[0].kind === 'Fill') {
138-
olStylePolygon = olStyle.output;
139-
}
140-
141-
if (rule.symbolizers[0].kind === 'Text') {
142-
olStyleText = olStyle.output;
143-
}
144-
145-
if (rule.symbolizers[0].kind === 'Line') {
146-
olStyleLineString = olStyle.output;
147-
}
148-
149-
if (rule.symbolizers[0].kind === 'Mark') {
150-
olStylePoint = olStyle.output;
151-
}
152-
}
153-
154-
const drawLayerStyleFunction = (feature: OlFeature, resolution: number) => {
155-
const geometryType = feature.getGeometry()?.getType();
156-
157-
if (!geometryType) {
158-
return;
159-
}
160-
161-
if (['MultiPolygon', 'Polygon', 'Circle'].includes(geometryType)) {
162-
return typeof olStylePolygon === 'function' ? olStylePolygon(feature, resolution) : olStylePolygon;
163-
}
164-
165-
if (['MultiLineString', 'LineString'].includes(geometryType)) {
166-
return typeof olStyleLineString === 'function' ? olStyleLineString(feature, resolution) : olStyleLineString;
167-
}
107+
const setStyleToLayer = async () => {
108+
const drawVectorLayer = DigitizeUtil.getDigitizeLayer(map);
168109

169-
if (['MultiPoint', 'Point'].includes(geometryType)) {
170-
if (feature.get('label')) {
171-
return typeof olStyleText === 'function' ? olStyleText(feature, resolution) : olStyleText;
172-
}
110+
const drawLayerStyleFunction = await parseStyle(style);
173111

174-
return typeof olStylePoint === 'function' ? olStylePoint(feature, resolution) : olStylePoint;
175-
}
176-
};
112+
drawVectorLayer.set('gsStyle', style);
177113

178-
drawVectorLayer.setStyle(drawLayerStyleFunction as StyleFunction);
114+
drawVectorLayer.setStyle(drawLayerStyleFunction as OlStyleFunction);
179115
};
180116

181-
parseStyles();
117+
setStyleToLayer();
182118
}, [style, map]);
183119

184120
return (

‎src/utils/parseStyle.ts

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
2+
import OlParser from 'geostyler-openlayers-parser';
3+
4+
import {
5+
Style as GsStyle
6+
} from 'geostyler-style';
7+
8+
import {
9+
FeatureLike as OlFeatureLike
10+
} from 'ol/Feature';
11+
import {
12+
StyleFunction as OlStyleFunction,
13+
StyleLike as OlStyleLike
14+
} from 'ol/style/Style';
15+
16+
export const parseStyle = async (style: GsStyle): Promise<OlStyleFunction | undefined> => {
17+
let olStylePolygon: OlStyleLike;
18+
let olStyleLineString: OlStyleLike;
19+
let olStylePoint: OlStyleLike;
20+
let olStyleText: OlStyleLike;
21+
22+
for (const rule of style.rules) {
23+
const newStyle: GsStyle = {
24+
name: '',
25+
rules: [rule]
26+
};
27+
28+
const olParser = new OlParser();
29+
30+
const olStyle = await olParser.writeStyle(newStyle);
31+
32+
if (!olStyle.output) {
33+
return;
34+
}
35+
36+
if (rule.symbolizers[0].kind === 'Fill') {
37+
olStylePolygon = olStyle.output;
38+
}
39+
40+
if (rule.symbolizers[0].kind === 'Text') {
41+
olStyleText = olStyle.output;
42+
}
43+
44+
if (rule.symbolizers[0].kind === 'Line') {
45+
olStyleLineString = olStyle.output;
46+
}
47+
48+
if (rule.symbolizers[0].kind === 'Mark') {
49+
olStylePoint = olStyle.output;
50+
}
51+
}
52+
53+
const drawLayerStyleFunction = (feature: OlFeatureLike, resolution: number) => {
54+
const geometryType = feature.getGeometry()?.getType();
55+
56+
if (!geometryType) {
57+
return;
58+
}
59+
60+
if (['MultiPolygon', 'Polygon', 'Circle'].includes(geometryType)) {
61+
return typeof olStylePolygon === 'function' ? olStylePolygon(feature, resolution) : olStylePolygon;
62+
}
63+
64+
if (['MultiLineString', 'LineString'].includes(geometryType)) {
65+
return typeof olStyleLineString === 'function' ? olStyleLineString(feature, resolution) : olStyleLineString;
66+
}
67+
68+
if (['MultiPoint', 'Point'].includes(geometryType)) {
69+
if (feature.get('label')) {
70+
return typeof olStyleText === 'function' ? olStyleText(feature, resolution) : olStyleText;
71+
}
72+
73+
return typeof olStylePoint === 'function' ? olStylePoint(feature, resolution) : olStylePoint;
74+
}
75+
};
76+
77+
return drawLayerStyleFunction;
78+
};

0 commit comments

Comments
 (0)