Skip to content

Commit b19b780

Browse files
LHBruneton-C2CLHBruneton-C2C
committed
feat(flat-style): ttf font glyph
1 parent e22f075 commit b19b780

File tree

3 files changed

+90
-15
lines changed

3 files changed

+90
-15
lines changed

‎data/olFlatStyles/point_fontglyph.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { FlatStyle } from 'ol/style/flat';
2+
3+
const pointFontglyph: FlatStyle = {
4+
'text-value': '|',
5+
'text-font': 'Normal 12px \'My Font Name\', geostyler-mark-symbolizer',
6+
'text-fill-color': '#FF0000',
7+
'text-stroke-color': '#112233',
8+
'text-offset-x': 10,
9+
'text-offset-y': 20,
10+
'text-rotation': 0,
11+
};
12+
13+
export default pointFontglyph;

‎src/OlFlatStyleParser.spec.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import point_styledlabel from '../data/styles/point_styledlabel';
2626
import point_styledLabel_static from '../data/styles/point_styledLabel_static';
2727
import text_placement_point from '../data/styles/text_placement_point';
2828
import text_placement_line from '../data/styles/text_placement_line';
29+
import point_fontglyph from '../data/styles/point_fontglyph';
2930
import polygon_simple from '../data/styles/polygon_simple';
3031
import point_icon_simple from '../data/styles/point_icon_simple';
3132
import multi_simplefillSimpleline from '../data/styles/multi_simplefillSimpleline';
@@ -57,6 +58,7 @@ import flat_point_styledlabel from '../data/olFlatStyles/point_styledlabel';
5758
import flat_point_styledLabel_static from '../data/olFlatStyles/point_styledLabel_static';
5859
import flat_text_placement_point from '../data/olFlatStyles/text_placement_point';
5960
import flat_text_placement_line from '../data/olFlatStyles/text_placement_line';
61+
import flat_point_fontglyph from '../data/olFlatStyles/point_fontglyph';
6062
import flat_polygon_simple from '../data/olFlatStyles/polygon_simple';
6163
import flat_point_icon_simple from '../data/olFlatStyles/point_icon_simple';
6264
import flat_multi_simplefillSimpleline from '../data/olFlatStyles/multi_simplefillSimpleline';
@@ -212,6 +214,11 @@ describe('OlFlatStyleParser implements StyleParser', () => {
212214
expect(geoStylerStyle).toBeDefined();
213215
expect(geoStylerStyle).toEqual(text_placement_line);
214216
});
217+
it('can read an OpenLayers Flat MarkSymbolizer based on a font glyph (WellKnownName starts with ttf://)', async () => {
218+
const { output: geoStylerStyle } = await styleParser.readStyle(flat_point_fontglyph);
219+
expect(geoStylerStyle).toBeDefined();
220+
expect(geoStylerStyle).toEqual(point_fontglyph);
221+
});
215222

216223
it('can read a simple polygon with just fill', async () => {
217224
const { output: geoStylerStyle } = await styleParser.readStyle(flat_polygon_simple);
@@ -396,6 +403,11 @@ describe('OlFlatStyleParser implements StyleParser', () => {
396403
expect(flatStyle).toBeDefined();
397404
expect(flatStyle).toEqual(flat_text_placement_line);
398405
});
406+
it('can write an OpenLayers Flat MarkSymbolizer based on a font glyph (WellKnownName starts with ttf://)', async () => {
407+
const { output: flatStyle } = await styleParser.writeStyle(point_fontglyph);
408+
expect(flatStyle).toBeDefined();
409+
expect(flatStyle).toEqual(flat_point_fontglyph);
410+
});
399411

400412
it('can write a simple polygon with just fill', async () => {
401413
const { output: geoStylerStyle } = await styleParser.writeStyle(polygon_simple);

‎src/OlFlatStyleParser.ts‎

Lines changed: 65 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ export class OlFlatStyleParser implements StyleParser<FlatStyleLike> {
221221
};
222222
}
223223

224-
flatStyleToGeoStylerTextSymbolizer(flatStyle: FlatStyle): TextSymbolizer {
224+
flatTextStyleToGeoStylerTextSymbolizer(flatStyle: FlatStyle): TextSymbolizer {
225225
const [textFillColor, textFillOpacity] = OlFlatStyleUtil.isExpression(flatStyle['text-fill-color'])
226226
? [OlFlatStyleUtil.olExpressionToGsExpression<string>(flatStyle['text-fill-color'])]
227227
: OlFlatStyleUtil.getColorAndOpacity(flatStyle['text-fill-color']);
@@ -269,7 +269,7 @@ export class OlFlatStyleParser implements StyleParser<FlatStyleLike> {
269269
};
270270
}
271271

272-
flatStyleToGeoStylerIconSymbolizer(flatStyle: FlatStyle): IconSymbolizer {
272+
flatIconStyleToGeoStylerIconSymbolizer(flatStyle: FlatStyle): IconSymbolizer {
273273
let image;
274274
// If source, offset and size are defined, we assume that the image is a sprite.
275275
if (flatStyle['icon-src'] && flatStyle['icon-offset'] && flatStyle['icon-size']) {
@@ -399,6 +399,48 @@ export class OlFlatStyleParser implements StyleParser<FlatStyleLike> {
399399
};
400400
}
401401

402+
flatTextStyleToGeoStylerMarkSymbolizer(flatStyle: FlatStyle): MarkSymbolizer {
403+
const [fillColor, fillOpacity] = OlFlatStyleUtil.isExpression(flatStyle['text-fill-color'])
404+
? [OlFlatStyleUtil.olExpressionToGsExpression<string>(flatStyle['text-fill-color'])]
405+
: OlFlatStyleUtil.getColorAndOpacity(flatStyle['text-fill-color']);
406+
407+
const [strokeColor, strokeOpacity] = OlFlatStyleUtil.isExpression(flatStyle['text-stroke-color'])
408+
? [OlFlatStyleUtil.olExpressionToGsExpression<string>(flatStyle['text-stroke-color'])]
409+
: OlFlatStyleUtil.getColorAndOpacity(flatStyle['text-stroke-color']);
410+
411+
let font: TextSymbolizer['font'] = undefined;
412+
let fontSize: TextSymbolizer['size'] = undefined;
413+
414+
if (OlFlatStyleUtil.isExpression(flatStyle['text-font'])) {
415+
// NOTE: If font is an expression, we cannot detect the size
416+
font = [OlFlatStyleUtil.olExpressionToGsExpression<string>(flatStyle['text-font'])];
417+
} else if (flatStyle['text-font']) {
418+
font = [OlStyleUtil.getFontNameFromOlFont(flatStyle['text-font'])];
419+
fontSize = OlStyleUtil.getSizeFromOlFont(flatStyle['text-font']);
420+
}
421+
422+
let char = OlFlatStyleUtil.olExpressionToGsExpression<string>(flatStyle['text-value']) as string;
423+
if (Array.isArray(char)) {
424+
char = char[0];
425+
}
426+
427+
return {
428+
kind: 'Mark',
429+
wellKnownName: `ttf://${font}#0x${char.charCodeAt(0).toString(16)}`,
430+
color: fillColor,
431+
opacity: fillOpacity,
432+
strokeColor,
433+
strokeOpacity,
434+
strokeWidth: OlFlatStyleUtil.olExpressionToGsExpression<number>(flatStyle['text-stroke-width']),
435+
radius: (fontSize !== 0) ? fontSize : 5,
436+
rotate: OlFlatStyleUtil.olExpressionToGsExpression<number>(flatStyle['text-rotation']) || 0,
437+
offset: [
438+
OlFlatStyleUtil.olExpressionToGsExpression<number>(flatStyle['text-offset-x']),
439+
OlFlatStyleUtil.olExpressionToGsExpression<number>(flatStyle['text-offset-y']),
440+
],
441+
};
442+
}
443+
402444
flatStyleToGeoStylerSymbolizers(flatStyle: FlatStyle): Symbolizer[] {
403445
const symbolizers: Symbolizer[] = [];
404446

@@ -409,11 +451,19 @@ export class OlFlatStyleParser implements StyleParser<FlatStyleLike> {
409451
}
410452

411453
if (OlFlatStyleUtil.hasFlatText(flatStyle)) {
412-
symbolizers.push(this.flatStyleToGeoStylerTextSymbolizer(flatStyle));
454+
if (
455+
!OlFlatStyleUtil.isExpression(flatStyle['text-font']) &&
456+
flatStyle['text-font'] &&
457+
OlStyleUtil.getIsMarkSymbolizerFont(flatStyle['text-font'])
458+
) {
459+
symbolizers.push(this.flatTextStyleToGeoStylerMarkSymbolizer(flatStyle));
460+
} else {
461+
symbolizers.push(this.flatTextStyleToGeoStylerTextSymbolizer(flatStyle));
462+
}
413463
}
414464

415465
if (OlFlatStyleUtil.hasFlatIcon(flatStyle)) {
416-
symbolizers.push(this.flatStyleToGeoStylerIconSymbolizer(flatStyle));
466+
symbolizers.push(this.flatIconStyleToGeoStylerIconSymbolizer(flatStyle));
417467
}
418468

419469
if (OlFlatStyleUtil.hasFlatCircle(flatStyle)) {
@@ -1082,18 +1132,18 @@ export class OlFlatStyleParser implements StyleParser<FlatStyleLike> {
10821132
} as FlatShape;
10831133
break;
10841134
default:
1085-
/* if (OlStyleUtil.getIsFontGlyphBased(symbolizer)) {
1086-
olStyle = new this.OlStyleConstructor({
1087-
text: new this.OlStyleTextConstructor({
1088-
text: OlStyleUtil.getCharacterForMarkSymbolizer(symbolizer),
1089-
font: OlStyleUtil.getTextFontForMarkSymbolizer(symbolizer),
1090-
fill: shapeOpts.fill,
1091-
stroke: shapeOpts.stroke,
1092-
rotation: shapeOpts.rotation
1093-
})
1094-
});
1135+
if (OlStyleUtil.getIsFontGlyphBased(symbolizer)) {
1136+
flatStyle = {
1137+
'text-value': OlStyleUtil.getCharacterForMarkSymbolizer(symbolizer),
1138+
'text-font': OlStyleUtil.getTextFontForMarkSymbolizer(symbolizer),
1139+
...(baseProps.fColor ? { 'text-fill-color': baseProps.fColor } : {}),
1140+
...(baseProps.sColor ? { 'text-stroke-color': baseProps.sColor } : {}),
1141+
'text-offset-x': (symbolizer.offset ? symbolizer.offset[0] : 0) as number,
1142+
'text-offset-y': (symbolizer.offset ? symbolizer.offset[1] : 0) as number,
1143+
...(typeof(symbolizer.rotate) === 'number' ? { 'text-rotation': symbolizer.rotate } : {}),
1144+
};
10951145
break;
1096-
} */
1146+
}
10971147
throw new Error('MarkSymbolizer cannot be parsed. Unsupported WellKnownName.');
10981148
}
10991149

0 commit comments

Comments
 (0)