diff --git a/examples/js/plugins/FeatureToolTip.js b/examples/js/plugins/FeatureToolTip.js index 717c434ae3..0dc0fcad2b 100644 --- a/examples/js/plugins/FeatureToolTip.js +++ b/examples/js/plugins/FeatureToolTip.js @@ -83,7 +83,7 @@ const FeatureToolTip = (function _() { geometry = feature.geometry; style = (geometry.properties && geometry.properties.style) || feature.style || layer.style; const context = { globals: {}, properties: getGeometryProperties(geometry) }; - style = style.drawingStylefromContext(context); + style = style.applyContext(context); if (feature.type === itowns.FEATURE_TYPES.POLYGON) { symb = '◼'; diff --git a/src/Converter/Feature2Mesh.js b/src/Converter/Feature2Mesh.js index cb43078abf..fc36953699 100644 --- a/src/Converter/Feature2Mesh.js +++ b/src/Converter/Feature2Mesh.js @@ -231,7 +231,7 @@ function featureToPoint(feature, options) { const globals = { point: true }; for (const geometry of feature.geometries) { const context = { globals, properties: () => geometry.properties }; - const style = feature.style.drawingStylefromContext(context); + const style = feature.style.applyContext(context); const start = geometry.indices[0].offset; const count = geometry.indices[0].count; @@ -286,7 +286,7 @@ function featureToLine(feature, options) { // Multi line case for (const geometry of feature.geometries) { const context = { globals, properties: () => geometry.properties }; - const style = feature.style.drawingStylefromContext(context); + const style = feature.style.applyContext(context); const start = geometry.indices[0].offset; // To avoid integer overflow with indice value (16 bits) @@ -317,7 +317,7 @@ function featureToLine(feature, options) { lines = new THREE.LineSegments(geom, options.lineMaterial); } else { const context = { globals, properties: () => feature.geometries[0].properties }; - const style = feature.style.drawingStylefromContext(context); + const style = feature.style.applyContext(context); fillColorArray(colors, count, toColor(style.stroke.color)); geom.setAttribute('color', new THREE.BufferAttribute(colors, 3, true)); @@ -360,7 +360,7 @@ function featureToPolygon(feature, options) { break; } const context = { globals, properties: () => geometry.properties }; - const style = feature.style.drawingStylefromContext(context); + const style = feature.style.applyContext(context); const lastIndice = geometry.indices.slice(-1)[0]; const end = lastIndice.offset + lastIndice.count; @@ -429,7 +429,7 @@ function featureToExtrudedPolygon(feature, options) { const start = geometry.indices[0].offset; const context = { globals, properties: () => geometry.properties }; - const style = feature.style.drawingStylefromContext(context); + const style = feature.style.applyContext(context); const lastIndice = geometry.indices.slice(-1)[0]; diff --git a/src/Converter/Feature2Texture.js b/src/Converter/Feature2Texture.js index ebece626fb..e74b268440 100644 --- a/src/Converter/Feature2Texture.js +++ b/src/Converter/Feature2Texture.js @@ -74,12 +74,17 @@ const coord = new Coordinates('EPSG:4326', 0, 0, 0); function drawFeature(ctx, feature, extent, style, invCtxScale) { const extentDim = extent.planarDimensions(); const scaleRadius = extentDim.x / ctx.canvas.width; - const globals = { zoom: extent.zoom }; + const globals = { + fill: true, + stroke: true, + point: true, + zoom: extent.zoom, + }; for (const geometry of feature.geometries) { if (Extent.intersectsExtent(geometry.extent, extent)) { const context = { globals, properties: () => geometry.properties }; - const contextStyle = (geometry.properties.style || style).drawingStylefromContext(context); + const contextStyle = (geometry.properties.style || style).applyContext(context); if (contextStyle) { if ( diff --git a/src/Core/Style.js b/src/Core/Style.js index dcd49ca431..a5c45bf90f 100644 --- a/src/Core/Style.js +++ b/src/Core/Style.js @@ -161,75 +161,75 @@ function defineStyleProperty(style, category, name, value, defaultValue) { * @typedef {Object} StyleOptions * @memberof StyleOptions * - * @property {number} [order] - Order of the features that will be associated to + * @property {Number} [order] - Order of the features that will be associated to * the style. It can helps sorting and prioritizing features if needed. * * @property {Object} [zoom] - Level on which to display the feature - * @property {number} [zoom.max] - max level - * @property {number} [zoom.min] - min level + * @property {Number} [zoom.max] - max level + * @property {Number} [zoom.min] - min level * * @property {Object} [fill] - Fill style for polygons. - * @property {string|function|THREE.Color} [fill.color] - Defines the main fill color. Can be + * @property {String|Function|THREE.Color} [fill.color] - Defines the main fill color. Can be * any [valid color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is no value, which means no fill. * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`. - * @property {Image|Canvas|string|object|function} [fill.pattern] - Defines a pattern to fill the + * @property {Image|Canvas|String|Object|Function} [fill.pattern] - Defines a pattern to fill the * surface with. It can be an `Image` to use directly, an url to fetch the pattern or an object containing * the url of the image to fetch and the transformation to apply. * from. See [this example] (http://www.itowns-project.org/itowns/examples/#source_file_geojson_raster) * for how to use. - * @property {string} [fill.pattern.source] the url to fetch the pattern image - * @property {object} [fill.pattern.cropValues] the x, y, width and height (in pixel) of the sub image to use. - * @property {THREE.Color} [fill.pattern.color] Can be any [valid color string] + * @property {Image|String} [fill.pattern.source] - The image or the url to fetch the pattern image + * @property {object} [fill.pattern.cropValues] - The x, y, width and height (in pixel) of the sub image to use. + * @property {THREE.Color} [fill.pattern.color] - Can be any [valid color string] * (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * It will change the color of the white pixels of the source image. - * @property {number|function} [fill.opacity] - The opacity of the color or of the + * @property {Number|Function} [fill.opacity] - The opacity of the color or of the * pattern. Can be between `0.0` and `1.0`. Default is `1.0`. * For a `GeometryLayer`, this opacity property isn't used. - * @property {number|function} [fill.base_altitude] - `GeometryLayer` style option, defines altitude + * @property {Number|Function} [fill.base_altitude] - `GeometryLayer` style option, defines altitude * for each coordinate. * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist * then the altitude value is set to 0. - * @property {number|function} [fill.extrusion_height] - `GeometryLayer` style option, if defined, + * @property {Number|Function} [fill.extrusion_height] - `GeometryLayer` style option, if defined, * polygons will be extruded by the specified amount * * @property {Object} [stroke] - Lines and polygons edges. - * @property {string|function|THREE.Color} [stroke.color] The color of the line. Can be any [valid + * @property {String|Function|THREE.Color} [stroke.color] The color of the line. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is no value, which means no stroke. * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`. - * @property {number|function} [stroke.opacity] - The opacity of the line. Can be between + * @property {Number|Function} [stroke.opacity] - The opacity of the line. Can be between * `0.0` and `1.0`. Default is `1.0`. * For a `GeometryLayer`, this opacity property isn't used. - * @property {number|function} [stroke.width] - The width of the line. Default is `1.0`. - * @property {number|function} [stroke.base_altitude] - `GeometryLayer` style option, defines altitude + * @property {Number|Function} [stroke.width] - The width of the line. Default is `1.0`. + * @property {Number|Function} [stroke.base_altitude] - `GeometryLayer` style option, defines altitude * for each coordinate. * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist * then the altitude value is set to 0. * * @property {Object} [point] - Point style. - * @property {string|function} [point.color] - The color of the point. Can be any [valid + * @property {String|Function} [point.color] - The color of the point. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is no value, which means points won't be displayed. - * @property {number|function} [point.radius] - The radius of the point, in pixel. Default + * @property {Number|Function} [point.radius] - The radius of the point, in pixel. Default * is `2.0`. - * @property {string|function} [point.line] - The color of the border of the point. Can be + * @property {String|Function} [point.line] - The color of the border of the point. Can be * any [valid color * string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Not supported for a `GeometryLayer`. - * @property {number|function} [point.width] - The width of the border, in pixel. Default + * @property {Number|Function} [point.width] - The width of the border, in pixel. Default * is `0.0` (no border). - * @property {number|function} [point.opacity] - The opacity of the point. Can be between + * @property {Number|Function} [point.opacity] - The opacity of the point. Can be between * `0.0` and `1.0`. Default is `1.0`. * Not supported for `GeometryLayer`. - * @property {number|function} [point.base_altitude] - `GeometryLayer` style option, defines altitude + * @property {Number|Function} [point.base_altitude] - `GeometryLayer` style option, defines altitude * for each coordinate. * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist * then the altitude value is set to 0. * @property {Object} [point.model] - 3D model to instantiate at each point position. * * @property {Object} [text] - All things {@link Label} related. - * @property {string|function} [text.field] - A string representing a property key of + * @property {String|Function} [text.field] - A string representing a property key of * a `FeatureGeometry` enclosed in brackets, that will be replaced by the value of the * property for each geometry. For example, if each geometry contains a `name` property, * `text.field` can be set to `{name}`. Default is no value, indicating that no @@ -241,10 +241,10 @@ function defineStyleProperty(style, category, name, value, defaultValue) { * Let's say for instance that you have two properties latin name and local name of a * place, you can write something like `{name_latin} - {name_local}` which can result * in `Marrakesh - مراكش` for example. - * @property {string|function} [text.color] - The color of the text. Can be any [valid + * @property {String|Function} [text.color] - The color of the text. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is `#000000`. - * @property {string|number[]|function} [text.anchor] - The anchor of the text compared to its + * @property {String|Number[]|Function} [text.anchor] - The anchor of the text compared to its * position (see {@link Label} for the position). Can be one of the following values: `top`, * `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left` * or `bottom-right`. Default is `center`. @@ -253,50 +253,50 @@ function defineStyleProperty(style, category, name, value, defaultValue) { * fraction of the label width and height) between the label position and the top-left * corner of the text. The first value is the horizontal offset, and the second is the * vertical offset. For example, `[-0.5, -0.5]` will be equivalent to `center`. - * @property {Array|function} [text.offset] - The offset of the text, depending on its + * @property {Array|Function} [text.offset] - The offset of the text, depending on its * anchor, in pixels. First value is from `left`, second is from `top`. Default * is `[0, 0]`. - * @property {number|function} [text.padding] - The padding outside the text, in pixels. + * @property {Number|Function} [text.padding] - The padding outside the text, in pixels. * Default is `2`. - * @property {number|function} [text.size] - The size of the font, in pixels. Default is + * @property {Number|Function} [text.size] - The size of the font, in pixels. Default is * `16`. - * @property {number|function} [text.wrap] - The maximum width, in pixels, before the text + * @property {Number|Function} [text.wrap] - The maximum width, in pixels, before the text * is wrapped, because the string is too long. Default is `10`. - * @property {number|function} [text.spacing] - The spacing between the letters, in `em`. + * @property {Number|Function} [text.spacing] - The spacing between the letters, in `em`. * Default is `0`. - * @property {string|function} [text.transform] - A value corresponding to the [CSS + * @property {String|Function} [text.transform] - A value corresponding to the [CSS * property * `text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). * Default is `none`. - * @property {string|function} [text.justify] - A value corresponding to the [CSS property + * @property {String|Function} [text.justify] - A value corresponding to the [CSS property * `text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align). * Default is `center`. - * @property {number|function} [text.opacity] - The opacity of the text. Can be between + * @property {Number|Function} [text.opacity] - The opacity of the text. Can be between * `0.0` and `1.0`. Default is `1.0`. - * @property {Array|function} [text.font] - A list (as an array of string) of font family + * @property {Array|Function} [text.font] - A list (as an array of string) of font family * names, prioritized in the order it is set. Default is `Open Sans Regular, * Arial Unicode MS Regular, sans-serif`. - * @property {string|function} [text.haloColor] - The color of the halo. Can be any [valid + * @property {String|Function} [text.haloColor] - The color of the halo. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is `#000000`. - * @property {number|function} [text.haloWidth] - The width of the halo, in pixels. + * @property {Number|Function} [text.haloWidth] - The width of the halo, in pixels. * Default is `0`. - * @property {number|function} [text.haloBlur] - The blur value of the halo, in pixels. + * @property {Number|Function} [text.haloBlur] - The blur value of the halo, in pixels. * Default is `0`. * * @property {Object} [icon] - Defines the appearance of icons attached to label. - * @property {string} [icon.source] - The url of the icons' image file. - * @property {string} [icon.id] - The id of the icons' sub-image in a vector tile data set. - * @property {string} [icon.cropValues] - the x, y, width and height (in pixel) of the sub image to use. - * @property {string} [icon.anchor] - The anchor of the icon compared to the label position. + * @property {String} [icon.source] - The url of the icons' image file. + * @property {String} [icon.id] - The id of the icons' sub-image in a vector tile data set. + * @property {String} [icon.cropValues] - the x, y, width and height (in pixel) of the sub image to use. + * @property {String} [icon.anchor] - The anchor of the icon compared to the label position. * Can be `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left` * or `bottom-right`. Default is `center`. - * @property {number} [icon.size] - If the icon's image is passed with `icon.source` and/or + * @property {Number} [icon.size] - If the icon's image is passed with `icon.source` and/or * `icon.id`, its size when displayed on screen is multiplied by `icon.size`. Default is `1`. - * @property {string|function} [icon.color] - The color of the icon. Can be any [valid + * @property {String|Function} [icon.color] - The color of the icon. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * It will change the color of the white pixels of the icon source image. - * @property {number|function} [icon.opacity] - The opacity of the icon. Can be between + * @property {Number|Function} [icon.opacity] - The opacity of the icon. Can be between * `0.0` and `1.0`. Default is `1.0`. */ @@ -330,58 +330,61 @@ export class StyleOptions {} * The first parameter of functions used to set `Style` properties is always an object containing * the properties of the features displayed with the current `Style` instance. * - * @property {number} order - Order of the features that will be associated to + * @property {Number} order - Order of the features that will be associated to * the style. It can helps sorting and prioritizing features if needed. * @property {Object} fill - Polygons and fillings style. - * @property {string|function|THREE.Color} fill.color - Defines the main color of the filling. Can be + * @property {String|Function|THREE.Color} fill.color - Defines the main color of the filling. Can be * any [valid color * string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is no value, indicating that no filling needs to be done. * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`. - * @property {Image|Canvas|string|function} fill.pattern - Defines a pattern to fill the - * surface with. It can be an `Image` to use directly, or an url to fetch the - * pattern from. See [this - * example](http://www.itowns-project.org/itowns/examples/#source_file_geojson_raster) - * for an example. - * @property {number|function} fill.opacity - The opacity of the color or of the + * @property {Image|Canvas|String|Object|Function} [fill.pattern] - Defines a pattern to fill the + * surface with. It can be an `Image` to use directly, an url to fetch the pattern or an object containing + * the url of the image to fetch and the transformation to apply. + * from. See [this example] (http://www.itowns-project.org/itowns/examples/#source_file_geojson_raster) + * for how to use. + * @property {Image|String} [fill.pattern.source] - The image or the url to fetch the pattern image + * @property {object} [fill.pattern.cropValues] - The x, y, width and height (in pixel) of the sub image to use. + * @property {THREE.Color} [fill.pattern.color] - Can be any [valid color string] + * @property {Number|Function} fill.opacity - The opacity of the color or of the * pattern. Can be between `0.0` and `1.0`. Default is `1.0`. * For a `GeometryLayer`, this opacity property isn't used. - * @property {number|function} fill.base_altitude - Only for {@link GeometryLayer}, defines altitude + * @property {Number|Function} fill.base_altitude - Only for {@link GeometryLayer}, defines altitude * for each coordinate. * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist * then the altitude value is set to 0. - * @property {number|function} fill.extrusion_height - Only for {@link GeometryLayer}, if defined, + * @property {Number|Function} fill.extrusion_height - Only for {@link GeometryLayer}, if defined, * polygons will be extruded by the specified amount * @property {Object} stroke - Lines and polygons edges. - * @property {string|function|THREE.Color} stroke.color The color of the line. Can be any [valid + * @property {String|Function|THREE.Color} stroke.color The color of the line. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is no value, indicating that no stroke needs to be done. * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`. - * @property {number|function} stroke.opacity - The opacity of the line. Can be between + * @property {Number|Function} stroke.opacity - The opacity of the line. Can be between * `0.0` and `1.0`. Default is `1.0`. * For a `GeometryLayer`, this opacity property isn't used. - * @property {number|function} stroke.width - The width of the line. Default is `1.0`. - * @property {number|function} stroke.base_altitude - Only for {@link GeometryLayer}, defines altitude + * @property {Number|Function} stroke.width - The width of the line. Default is `1.0`. + * @property {Number|Function} stroke.base_altitude - Only for {@link GeometryLayer}, defines altitude * for each coordinate. * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist * then the altitude value is set to 0. * * @property {Object} point - Point style. - * @property {string|function} point.color - The color of the point. Can be any [valid + * @property {String|Function} point.color - The color of the point. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is no value, indicating that no point will be shown. - * @property {number|function} point.radius - The radius of the point, in pixel. Default + * @property {Number|Function} point.radius - The radius of the point, in pixel. Default * is `2.0`. - * @property {string|function} point.line - The color of the border of the point. Can be + * @property {String|Function} point.line - The color of the border of the point. Can be * any [valid color * string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Not supported for `GeometryLayer`. - * @property {number|function} point.width - The width of the border, in pixel. Default + * @property {Number|Function} point.width - The width of the border, in pixel. Default * is `0.0` (no border). - * @property {number|function} point.opacity - The opacity of the point. Can be between + * @property {Number|Function} point.opacity - The opacity of the point. Can be between * `0.0` and `1.0`. Default is `1.0`. * Not supported for `GeometryLayer`. - * @property {number|function} point.base_altitude - Only for {@link GeometryLayer}, defines altitude + * @property {Number|Function} point.base_altitude - Only for {@link GeometryLayer}, defines altitude * for each coordinate. * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist * then the altitude value is set to 0. @@ -389,7 +392,7 @@ export class StyleOptions {} * * @property {Object} text - All things {@link Label} related. - * @property {string|function} text.field - A string representing a property key of + * @property {String|Function} text.field - A string representing a property key of * a `FeatureGeometry` enclosed in brackets, that will be replaced by the value of the * property for each geometry. For example, if each geometry contains a `name` property, * `text.field` can be set to `{name}`. Default is no value, indicating that no @@ -401,10 +404,10 @@ export class StyleOptions {} * Let's say for instance that you have two properties latin name and local name of a * place, you can write something like `{name_latin} - {name_local}` which can result * in `Marrakesh - مراكش` for example. - * @property {string|function} text.color - The color of the text. Can be any [valid + * @property {String|Function} text.color - The color of the text. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is `#000000`. - * @property {string|number[]|function} text.anchor - The anchor of the text relative to its + * @property {String|Number[]|Function} text.anchor - The anchor of the text relative to its * position (see {@link Label} for the position). Can be one of the following values: `top`, * `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left` * or `bottom-right`. Default is `center`. @@ -413,50 +416,50 @@ export class StyleOptions {} * fraction of the label width and height) between the label position and the top-left * corner of the text. The first value is the horizontal offset, and the second is the * vertical offset. For example, `[-0.5, -0.5]` will be equivalent to `center`. - * @property {Array|function} text.offset - The offset of the text, depending on its + * @property {Array|Function} text.offset - The offset of the text, depending on its * anchor, in pixels. First value is from `left`, second is from `top`. Default * is `[0, 0]`. - * @property {number|function} text.padding - The padding outside the text, in pixels. + * @property {Number|Function} text.padding - The padding outside the text, in pixels. * Default is `2`. - * @property {number|function} text.size - The size of the font, in pixels. Default is + * @property {Number|Function} text.size - The size of the font, in pixels. Default is * `16`. - * @property {number|function} text.wrap - The maximum width, in pixels, before the text + * @property {Number|Function} text.wrap - The maximum width, in pixels, before the text * is wrapped, because the string is too long. Default is `10`. - * @property {number|function} text.spacing - The spacing between the letters, in `em`. + * @property {Number|Function} text.spacing - The spacing between the letters, in `em`. * Default is `0`. - * @property {string|function} text.transform - A value corresponding to the [CSS + * @property {String|Function} text.transform - A value corresponding to the [CSS * property * `text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). * Default is `none`. - * @property {string|function} text.justify - A value corresponding to the [CSS property + * @property {String|Function} text.justify - A value corresponding to the [CSS property * `text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align). * Default is `center`. - * @property {number|function} text.opacity - The opacity of the text. Can be between + * @property {Number|Function} text.opacity - The opacity of the text. Can be between * `0.0` and `1.0`. Default is `1.0`. - * @property {Array|function} text.font - A list (as an array of string) of font family + * @property {Array|Function} text.font - A list (as an array of string) of font family * names, prioritized in the order it is set. Default is `Open Sans Regular, * Arial Unicode MS Regular, sans-serif`. - * @property {string|function} text.haloColor - The color of the halo. Can be any [valid + * @property {String|Function} text.haloColor - The color of the halo. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * Default is `#000000`. - * @property {number|function} text.haloWidth - The width of the halo, in pixels. + * @property {Number|Function} text.haloWidth - The width of the halo, in pixels. * Default is `0`. - * @property {number|function} text.haloBlur - The blur value of the halo, in pixels. + * @property {Number|Function} text.haloBlur - The blur value of the halo, in pixels. * Default is `0`. * * @property {Object} icon - Defines the appearance of icons attached to label. - * @property {string} icon.source - The url of the icons' image file. - * @property {string} icon.id - The id of the icons' sub-image in a vector tile data set. - * @property {string} icon.cropValues - the x, y, width and height (in pixel) of the sub image to use. - * @property {string} icon.anchor - The anchor of the icon compared to the label position. + * @property {String} icon.source - The url of the icons' image file. + * @property {String} icon.id - The id of the icons' sub-image in a vector tile data set. + * @property {String} icon.cropValues - the x, y, width and height (in pixel) of the sub image to use. + * @property {String} icon.anchor - The anchor of the icon compared to the label position. * Can be `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left` * or `bottom-right`. Default is `center`. - * @property {number} icon.size - If the icon's image is passed with `icon.source` and/or + * @property {Number} icon.size - If the icon's image is passed with `icon.source` and/or * `icon.id`, its size when displayed on screen is multiplied by `icon.size`. Default is `1`. - * @property {string|function} icon.color - The color of the icon. Can be any [valid + * @property {String|Function} icon.color - The color of the icon. Can be any [valid * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). * It will change the color of the white pixels of the icon source image. - * @property {number|function} icon.opacity - The opacity of the icon. Can be between + * @property {Number|Function} icon.opacity - The opacity of the icon. Can be between * `0.0` and `1.0`. Default is `1.0`. * * @example @@ -487,7 +490,7 @@ class Style { constructor(params = {}, parent) { this.isStyle = true; - this.order = 0; + this.order = params.order || 0; this.parent = parent || { zoom: {}, @@ -566,49 +569,8 @@ class Style { defineStyleProperty(this, 'icon', 'opacity', params.icon.opacity, 1.0); } - /** - * Map drawing properties style (fill, stroke and point) from context to object. - * Only the necessary properties are mapped to object. - * if a property is expression, the mapped value will be the expression result depending on context. - * @param {Object} context The context - * @return {Style} mapped style depending on context. - */ - drawingStylefromContext(context) { - const style = {}; - if (this.fill.color || this.fill.pattern || context.globals.fill) { - mapPropertiesFromContext('fill', this, style, context); - } - if (this.stroke.color || context.globals.stroke) { - mapPropertiesFromContext('stroke', this, style, context); - } - if (this.point.color || this.point.model || context.globals.point) { - mapPropertiesFromContext('point', this, style, context); - } - if (Object.keys(style).length) { - return style; - } - } - - /** - * Map symbol properties style (symbol and icon) from context to object. - * Only the necessary properties are mapped to object. - * if a property is expression, the mapped value will be the expression result depending on context. - * @param {Object} context The context - * @return {Object} mapped style depending on context. - */ - symbolStylefromContext(context) { - const style = new Style(); - mapPropertiesFromContext('text', this, style, context); - if (this.icon) { - mapPropertiesFromContext('icon', this, style, context); - } - style.order = this.order; - return style; - } - /** * Copies the content of the target style into this style. - * * @param {Style} style - The style to copy. * * @return {Style} This style. @@ -632,6 +594,35 @@ class Style { return clone.copy(this); } + /** + * Map drawing properties style (fill, stroke, point, text and icon) from context to object. + * Only the necessary properties are mapped to object. + * if a property is expression, the mapped value will be the expression result depending on context. + * @param {Object} context The context + * + * @return {Style} mapped style depending on context. + */ + applyContext(context) { + const style = {}; + if (this.fill.color || this.fill.pattern || context.globals.fill) { + mapPropertiesFromContext('fill', this, style, context); + } + if (this.stroke.color || context.globals.stroke) { + mapPropertiesFromContext('stroke', this, style, context); + } + if (this.point.color || this.point.model || context.globals.point) { + mapPropertiesFromContext('point', this, style, context); + } + if (this.text || context.globals.text) { + mapPropertiesFromContext('text', this, style, context); + } + if (this.icon || context.globals.icon) { + mapPropertiesFromContext('icon', this, style, context); + } + style.order = this.order; + return new Style(style); + } + /** * set Style from (geojson-like) properties. * @param {object} properties (geojson-like) properties. diff --git a/src/Layer/LabelLayer.js b/src/Layer/LabelLayer.js index dcc8e68e4d..0e5638ca66 100644 --- a/src/Layer/LabelLayer.js +++ b/src/Layer/LabelLayer.js @@ -240,7 +240,11 @@ class LabelLayer extends GeometryLayer { // Converting the extent now is faster for further operation extent.as(data.crs, _extent); coord.crs = data.crs; - const globals = { zoom: extent.zoom }; + const globals = { + icon: true, + text: true, + zoom: extent.zoom, + }; data.features.forEach((f) => { // TODO: add support for LINE and POLYGON @@ -286,7 +290,7 @@ class LabelLayer extends GeometryLayer { content = this.style.getTextFromProperties(context); } - const style = (g.properties.style || f.style || this.style).symbolStylefromContext(context); + const style = (g.properties.style || f.style || this.style).applyContext(context); const label = new Label(content, coord.clone(), style); label.layerId = this.id; diff --git a/test/unit/vectortiles.js b/test/unit/vectortiles.js index a55f324318..916296d80d 100644 --- a/test/unit/vectortiles.js +++ b/test/unit/vectortiles.js @@ -140,8 +140,8 @@ describe('Vector tiles', function () { }, }); source.whenReady.then(() => { - const styleLand_zoom_3 = source.styles.land.drawingStylefromContext({ globals: { zoom: 3 }, properties: () => {} }); - const styleLand_zoom_5 = source.styles.land.drawingStylefromContext({ globals: { zoom: 5 }, properties: () => {} }); + const styleLand_zoom_3 = source.styles.land.applyContext({ globals: { zoom: 3 }, properties: () => {} }); + const styleLand_zoom_5 = 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)');