Skip to content

Commit

Permalink
refactor(Style): change Style.setFromVectorTileLayer to static
Browse files Browse the repository at this point in the history
  • Loading branch information
@ftoromanoff
ftoromanoff committed Dec 13, 2023
1 parent 8cf99b6 commit 5f22009
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 67 deletions.
108 changes: 58 additions & 50 deletions src/Core/Style.js
View file
Expand Up @@ -755,19 +755,27 @@ class Style {
*
* @returns {StyleOptions} containing all properties for itowns.Style
*/
setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
const style = {
fill: {},
stroke: {},
point: {},
text: {},
icon: {},
};

layer.layout = layer.layout || {};
layer.paint = layer.paint || {};

this.order = order;
style.order = order;

if (layer.type === 'fill' && !this.fill.color) {
if (layer.type === 'fill') {
const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['fill-color'] || layer.paint['fill-pattern'], { type: 'color' }));
this.fill.color = color;
this.fill.opacity = readVectorProperty(layer.paint['fill-opacity']) || opacity;
style.fill.color = color;
style.fill.opacity = readVectorProperty(layer.paint['fill-opacity']) || opacity;
if (layer.paint['fill-pattern']) {
try {
this.fill.pattern = {
style.fill.pattern = {
id: layer.paint['fill-pattern'],
source: sprites.source,
cropValues: sprites[layer.paint['fill-pattern']],
Expand All @@ -780,82 +788,82 @@ class Style {

if (layer.paint['fill-outline-color']) {
const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['fill-outline-color'], { type: 'color' }));
this.stroke.color = color;
this.stroke.opacity = opacity;
this.stroke.width = 1.0;
this.stroke.dasharray = [];
style.stroke.color = color;
style.stroke.opacity = opacity;
style.stroke.width = 1.0;
style.stroke.dasharray = [];
}
} else if (layer.type === 'line' && !this.stroke.color) {
} else if (layer.type === 'line') {
const prepare = readVectorProperty(layer.paint['line-color'], { type: 'color' });
const { color, opacity } = rgba2rgb(prepare);
this.stroke.dasharray = readVectorProperty(layer.paint['line-dasharray']);
this.stroke.color = color;
this.stroke.lineCap = layer.layout['line-cap'];
this.stroke.width = readVectorProperty(layer.paint['line-width']);
this.stroke.opacity = readVectorProperty(layer.paint['line-opacity']) || opacity;
style.stroke.dasharray = readVectorProperty(layer.paint['line-dasharray']);
style.stroke.color = color;
style.stroke.lineCap = layer.layout['line-cap'];
style.stroke.width = readVectorProperty(layer.paint['line-width']);
style.stroke.opacity = readVectorProperty(layer.paint['line-opacity']) || opacity;
} else if (layer.type === 'circle' || symbolToCircle) {
const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['circle-color'], { type: 'color' }));
this.point.color = color;
this.point.opacity = opacity;
this.point.radius = readVectorProperty(layer.paint['circle-radius']);
style.point.color = color;
style.point.opacity = opacity;
style.point.radius = readVectorProperty(layer.paint['circle-radius']);
} else if (layer.type === 'symbol') {
// overlapping order
this.text.zOrder = readVectorProperty(layer.layout['symbol-z-order']);
if (this.text.zOrder == 'auto') {
this.text.zOrder = readVectorProperty(layer.layout['symbol-sort-key']) || 'Y';
} else if (this.text.zOrder == 'viewport-y') {
this.text.zOrder = 'Y';
} else if (this.text.zOrder == 'source') {
this.text.zOrder = 0;
style.text.zOrder = readVectorProperty(layer.layout['symbol-z-order']);
if (style.text.zOrder == 'auto') {
style.text.zOrder = readVectorProperty(layer.layout['symbol-sort-key']) || 'Y';
} else if (style.text.zOrder == 'viewport-y') {
style.text.zOrder = 'Y';
} else if (style.text.zOrder == 'source') {
style.text.zOrder = 0;
}

// position
this.text.anchor = readVectorProperty(layer.layout['text-anchor']);
this.text.offset = readVectorProperty(layer.layout['text-offset']);
this.text.padding = readVectorProperty(layer.layout['text-padding']);
this.text.size = readVectorProperty(layer.layout['text-size']);
this.text.placement = readVectorProperty(layer.layout['symbol-placement']);
this.text.rotation = readVectorProperty(layer.layout['text-rotation-alignment']);
style.text.anchor = readVectorProperty(layer.layout['text-anchor']);
style.text.offset = readVectorProperty(layer.layout['text-offset']);
style.text.padding = readVectorProperty(layer.layout['text-padding']);
style.text.size = readVectorProperty(layer.layout['text-size']);
style.text.placement = readVectorProperty(layer.layout['symbol-placement']);
style.text.rotation = readVectorProperty(layer.layout['text-rotation-alignment']);

// content
this.text.field = readVectorProperty(layer.layout['text-field']);
this.text.wrap = readVectorProperty(layer.layout['text-max-width']);
this.text.spacing = readVectorProperty(layer.layout['text-letter-spacing']);
this.text.transform = readVectorProperty(layer.layout['text-transform']);
this.text.justify = readVectorProperty(layer.layout['text-justify']);
style.text.field = readVectorProperty(layer.layout['text-field']);
style.text.wrap = readVectorProperty(layer.layout['text-max-width']);
style.text.spacing = readVectorProperty(layer.layout['text-letter-spacing']);
style.text.transform = readVectorProperty(layer.layout['text-transform']);
style.text.justify = readVectorProperty(layer.layout['text-justify']);

// appearance
const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['text-color'], { type: 'color' }));
this.text.color = color;
this.text.opacity = readVectorProperty(layer.paint['text-opacity']) || (opacity !== undefined && opacity);
style.text.color = color;
style.text.opacity = readVectorProperty(layer.paint['text-opacity']) || (opacity !== undefined && opacity);

this.text.font = readVectorProperty(layer.layout['text-font']);
style.text.font = readVectorProperty(layer.layout['text-font']);
const haloColor = readVectorProperty(layer.paint['text-halo-color'], { type: 'color' });
if (haloColor) {
this.text.haloColor = haloColor.color || haloColor;
this.text.haloWidth = readVectorProperty(layer.paint['text-halo-width']);
this.text.haloBlur = readVectorProperty(layer.paint['text-halo-blur']);
style.text.haloColor = haloColor.color || haloColor;
style.text.haloWidth = readVectorProperty(layer.paint['text-halo-width']);
style.text.haloBlur = readVectorProperty(layer.paint['text-halo-blur']);
}

// additional icon
const iconImg = readVectorProperty(layer.layout['icon-image']);
if (iconImg) {
try {
this.icon.id = iconImg;
this.icon.source = sprites.source;
this.icon.cropValues = sprites[iconImg];
style.icon.id = iconImg;
style.icon.source = sprites.source;
style.icon.cropValues = sprites[iconImg];

this.icon.size = readVectorProperty(layer.layout['icon-size']) || 1;
style.icon.size = readVectorProperty(layer.layout['icon-size']) || 1;
const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['icon-color'], { type: 'color' }));
this.icon.color = color;
this.icon.opacity = readVectorProperty(layer.paint['icon-opacity']) || (opacity !== undefined && opacity);
style.icon.color = color;
style.icon.opacity = readVectorProperty(layer.paint['icon-opacity']) || (opacity !== undefined && opacity);
} catch (err) {
err.message = `VTlayer '${layer.id}': argument sprites must not be null when using layer.layout['icon-image']`;
throw err;
}
}
}
return this;
return style;
}

/**
Expand Down
8 changes: 5 additions & 3 deletions src/Source/VectorTilesSource.js
View file
Expand Up @@ -94,9 +94,11 @@ class VectorTilesSource extends TMSSource {
if (layer.type === 'background') {
this.backgroundLayer = layer;
} else if (ffilter(layer)) {
const style = new Style().setFromVectorTileLayer(layer, this.sprites, order, this.symbolToCircle);
style.zoom.min = layer.minzoom || 0;
style.zoom.max = layer.maxzoom || 24;
const style = Style.setFromVectorTileLayer(layer, this.sprites, order, this.symbolToCircle);
style.zoom = {
min: layer.minzoom || 0,
max: layer.maxzoom || 24,
};
this.styles[layer.id] = style;

if (!this.layers[layer['source-layer']]) {
Expand Down
6 changes: 3 additions & 3 deletions test/unit/label.js
View file
Expand Up @@ -56,15 +56,15 @@ describe('Label', function () {
};

before('init style', function () {
style = new Style();
style.setFromVectorTileLayer({
const layerVT = {
type: 'symbol',
paint: {},
layout: {
'icon-image': 'icon',
'icon-size': 1,
},
}, sprites);
};
style = new Style(Style.setFromVectorTileLayer(layerVT, sprites));
});

it('should throw errors for bad Label construction', function () {
Expand Down
17 changes: 8 additions & 9 deletions test/unit/style.js
View file
Expand Up @@ -308,12 +308,16 @@ describe('Style', function () {
const imgId = 'filler';
const vectorTileLayer = {
type: 'fill',
paint: {
'fill-pattern': imgId,
'fill-outline-color': '#eba55f',
},
paint: { 'fill-outline-color': '#eba55f' },
};
it('without fill-pattern (or sprites)', () => {
const style = Style.setFromVectorTileLayer(vectorTileLayer);
// fill-outline-color
assert.equal(style.stroke.color, '#eba55f');
});

it('with fill-pattern (and sprites)', () => {
vectorTileLayer.paint['fill-pattern'] = imgId;
const sprites = {
filler: { x: 0, y: 0, width: 0, height: 0, pixelRatio: 1 },
source: 'ImgUrl',
Expand All @@ -323,11 +327,6 @@ describe('Style', function () {
assert.equal(style.fill.pattern.id, imgId);
assert.equal(style.fill.pattern.cropValues, sprites[imgId]);
});
it('without fill-pattern (or sprites)', () => {
const style = Style.setFromVectorTileLayer(vectorTileLayer);
// fill-outline-color
assert.equal(style.stroke.color, '#eba55f');
});
});
it("layer.type==='line'", () => {
const vectorTileLayer = {
Expand Down
5 changes: 3 additions & 2 deletions test/unit/vectortiles.js
View file
Expand Up @@ -5,6 +5,7 @@ import VectorTileParser from 'Parser/VectorTileParser';
import VectorTilesSource from 'Source/VectorTilesSource';
import Extent from 'Core/Geographic/Extent';
import urlParser from 'Parser/MapBoxUrlParser';
import Style from 'Core/Style';

describe('Vector tiles', function () {
// this PBF file comes from https://github.com/mapbox/vector-tile-js
Expand Down Expand Up @@ -140,8 +141,8 @@ describe('Vector tiles', function () {
},
});
source.whenReady.then(() => {
const styleLand_zoom_3 = source.styles.land.applyContext({ globals: { zoom: 3 }, properties: () => {} });
const styleLand_zoom_5 = source.styles.land.applyContext({ globals: { zoom: 5 }, properties: () => {} });
const styleLand_zoom_3 = new Style(source.styles.land).applyContext({ globals: { zoom: 3 }, properties: () => {} });
const styleLand_zoom_5 = new Style(source.styles.land).applyContext({ globals: { zoom: 5 }, properties: () => {} });
assert.equal(styleLand_zoom_3.fill.color, 'rgb(255,0,0)');
assert.equal(styleLand_zoom_3.fill.opacity, 1);
assert.equal(styleLand_zoom_5.fill.color, 'rgb(255,0,0)');
Expand Down

0 comments on commit 5f22009

Please sign in to comment.