Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8cf99b6

Browse files
ftoromanoffftoromanoff
committed
refactor(Style): change setFromGeojsonProperties() to static
1 parent 658992d commit 8cf99b6

File tree

3 files changed

+121
-20
lines changed

3 files changed

+121
-20
lines changed

‎src/Core/Style.js‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -695,37 +695,55 @@ class Style {
695695
*
696696
* @returns {StyleOptions} containing all properties for itowns.Style
697697
*/
698-
setFromGeojsonProperties(properties, type) {
698+
static setFromProperties(properties, type) {
699+
const style = {};
699700
if (type === FEATURE_TYPES.POINT) {
700-
this.point.color = properties.fill;
701-
this.point.opacity = properties['fill-opacity'];
702-
this.point.line = properties.stroke;
703-
this.point.radius = properties.radius;
704-
705-
this.text.color = properties['label-color'];
706-
this.text.opacity = properties['label-opacity'];
707-
this.text.size = properties['label-size'];
708-
701+
const point = {
702+
...(properties.fill !== undefined && { color: properties.fill }),
703+
...(properties['fill-opacity'] !== undefined && { opacity: properties['fill-opacity'] }),
704+
...(properties.stroke !== undefined && { line: properties.stroke }),
705+
...(properties.radius !== undefined && { radius: properties.radius }),
706+
};
707+
if (Object.keys(point).length) {
708+
style.point = point;
709+
}
710+
const text = {
711+
...(properties['label-color'] !== undefined && { color: properties['label-color'] }),
712+
...(properties['label-opacity'] !== undefined && { opacity: properties['label-opacity'] }),
713+
...(properties['label-size'] !== undefined && { size: properties['label-size'] }),
714+
};
715+
if (Object.keys(point).length) {
716+
style.text = text;
717+
}
709718
const icon = {
710719
...(properties.icon !== undefined && { source: properties.icon }),
711720
...(properties['icon-scale'] !== undefined && { size: properties['icon-scale'] }),
712721
...(properties['icon-opacity'] !== undefined && { opacity: properties['icon-opacity'] }),
713722
...(properties['icon-color'] !== undefined && { color: properties['icon-color'] }),
714723
};
715724
if (Object.keys(icon).length) {
716-
this.icon = icon;
725+
style.icon = icon;
717726
}
718727
} else {
719-
this.stroke.color = properties.stroke;
720-
this.stroke.width = properties['stroke-width'];
721-
this.stroke.opacity = properties['stroke-opacity'];
722-
728+
const stroke = {
729+
...(properties.stroke !== undefined && { color: properties.stroke }),
730+
...(properties['stroke-width'] !== undefined && { width: properties['stroke-width'] }),
731+
...(properties['stroke-opacity'] !== undefined && { opacity: properties['stroke-opacity'] }),
732+
};
733+
if (Object.keys(stroke).length) {
734+
style.stroke = stroke;
735+
}
723736
if (type !== FEATURE_TYPES.LINE) {
724-
this.fill.color = properties.fill;
725-
this.fill.opacity = properties['fill-opacity'];
737+
const fill = {
738+
...(properties.fill !== undefined && { color: properties.fill }),
739+
...(properties['fill-opacity'] !== undefined && { opacity: properties['fill-opacity'] }),
740+
};
741+
if (Object.keys(fill).length) {
742+
style.fill = fill;
743+
}
726744
}
727745
}
728-
return this;
746+
return style;
729747
}
730748

731749
/**

‎src/Parser/GeoJsonParser.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,9 @@ const toFeature = {
7373
}
7474

7575
const geometry = feature.bindNewGeometry();
76+
properties.style = Style.setFromProperties(properties, feature.type);
7677
geometry.properties = properties;
77-
geometry.properties.style = new Style({}, feature.style).setFromGeojsonProperties(properties, feature.type);
78+
7879
this.populateGeometry(crsIn, coordsIn, geometry, feature);
7980
feature.updateExtent(geometry);
8081
},
@@ -84,8 +85,8 @@ const toFeature = {
8485
return;
8586
}
8687
const geometry = feature.bindNewGeometry();
88+
properties.style = Style.setFromProperties(properties, feature.type);
8789
geometry.properties = properties;
88-
geometry.properties.style = new Style({}, feature.style).setFromGeojsonProperties(properties, feature.type);
8990

9091
// Then read contour and holes
9192
for (let i = 0; i < coordsIn.length; i++) {

‎test/unit/style.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Style from 'Core/Style';
2+
import { FEATURE_TYPES } from 'Core/Feature';
23
import assert from 'assert';
34
import Fetcher from 'Provider/Fetcher';
45
import { TextureLoader } from 'three';
@@ -278,4 +279,85 @@ describe('Style', function () {
278279
});
279280
});
280281
});
282+
283+
describe('setFromProperties', () => {
284+
it('FEATURE_TYPES.POINT', () => {
285+
const properties = {
286+
radius: 2,
287+
'label-color': '#eba55f',
288+
'icon-color': '#eba55f',
289+
};
290+
const style = Style.setFromProperties(properties, FEATURE_TYPES.POINT);
291+
assert.equal(style.point.radius, 2);
292+
assert.equal(style.text.color, '#eba55f');
293+
assert.equal(style.icon.color, '#eba55f');
294+
});
295+
it('FEATURE_TYPES.POLYGON', () => {
296+
const properties = {
297+
fill: '#eba55f',
298+
stroke: '#eba55f',
299+
};
300+
const style = Style.setFromProperties(properties, FEATURE_TYPES.POLYGON);
301+
assert.equal(style.stroke.color, '#eba55f');
302+
assert.equal(style.fill.color, '#eba55f');
303+
});
304+
});
305+
306+
describe('setFromVectorTileLayer', () => {
307+
describe("layer.type==='fill'", () => {
308+
const imgId = 'filler';
309+
const vectorTileLayer = {
310+
type: 'fill',
311+
paint: {
312+
'fill-pattern': imgId,
313+
'fill-outline-color': '#eba55f',
314+
},
315+
};
316+
it('with fill-pattern (and sprites)', () => {
317+
const sprites = {
318+
filler: { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1 },
319+
source: 'ImgUrl',
320+
};
321+
const style = Style.setFromVectorTileLayer(vectorTileLayer, sprites);
322+
// fill-pattern
323+
assert.equal(style.fill.pattern.id, imgId);
324+
assert.equal(style.fill.pattern.cropValues, sprites[imgId]);
325+
});
326+
it('without fill-pattern (or sprites)', () => {
327+
const style = Style.setFromVectorTileLayer(vectorTileLayer);
328+
// fill-outline-color
329+
assert.equal(style.stroke.color, '#eba55f');
330+
});
331+
});
332+
it("layer.type==='line'", () => {
333+
const vectorTileLayer = {
334+
type: 'line',
335+
paint: {
336+
'line-color': '#eba55f',
337+
},
338+
};
339+
const style = Style.setFromVectorTileLayer(vectorTileLayer);
340+
assert.equal(style.stroke.color, '#eba55f');
341+
});
342+
it("layer.type==='circle'", () => {
343+
const vectorTileLayer = {
344+
type: 'circle',
345+
paint: {
346+
'circle-color': '#eba55f',
347+
},
348+
};
349+
const style = Style.setFromVectorTileLayer(vectorTileLayer);
350+
assert.equal(style.point.color, '#eba55f');
351+
});
352+
it("layer.type==='symbol'", () => {
353+
const vectorTileLayer = {
354+
type: 'symbol',
355+
layout: {
356+
'symbol-z-order': 'auto',
357+
},
358+
};
359+
const style = Style.setFromVectorTileLayer(vectorTileLayer);
360+
assert.equal(style.text.zOrder, 'Y');
361+
});
362+
});
281363
});

0 commit comments

Comments
 (0)