Skip to content

Commit e111144

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 c182099 commit e111144

File tree

2 files changed

+156
-140
lines changed

2 files changed

+156
-140
lines changed

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

+78-140
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,92 +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 MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
30-
3118
import {
3219
useMap
3320
} 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+
};
3491

3592
export type StylingComponentProps = CardStyleProps & {};
3693

3794
export const StylingComponent: React.FC<StylingComponentProps> = ({
3895
...passThroughProps
3996
}): JSX.Element => {
4097

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

106100
const map = useMap();
@@ -110,73 +104,17 @@ export const StylingComponent: React.FC<StylingComponentProps> = ({
110104
return;
111105
}
112106

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

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

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

176-
drawVectorLayer.setStyle(drawLayerStyleFunction as StyleFunction);
114+
drawVectorLayer.setStyle(drawLayerStyleFunction as OlStyleFunction);
177115
};
178116

179-
parseStyles();
117+
setStyleToLayer();
180118
}, [style, map]);
181119

182120
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)