MapBox VectorTile: bug fixes using an official MapBox stream

examples/source_file_kml_raster_usgs.html

@@ -69,7 +69,6 @@
             }
 
             var kmlStyle = {
-                zoom: { min: 10, max: 20 },
                 text: {
                     field: '{name}',
                     haloColor: 'black',

src/Converter/Feature2Texture.js

@@ -70,6 +70,9 @@ function drawFeature(ctx, feature, extent, invCtxScale) {
     for (const geometry of feature.geometries) {
         if (Extent.intersectsExtent(geometry.extent, extent)) {
             context.setGeometry(geometry);
+            if (style.zoom.min > style.context.zoom || style.zoom.max <= style.context.zoom) {
+                return;
+            }
 
             if (
                 feature.type === FEATURE_TYPES.POINT && style.point

src/Core/Style.js

@@ -87,14 +87,18 @@ async function loadImage(source) {
     return (await promise).image;
 }
 
-function cropImage(img, cropValues = { width: img.naturalWidth, height: img.naturalHeight }) {
-    canvas.width = cropValues.width;
-    canvas.height = cropValues.height;
+function cropImage(img, cropValues) {
+    const x = cropValues.x || 0;
+    const y = cropValues.y || 0;
+    const width = cropValues.width || img.naturalWidth;
+    const height = cropValues.height || img.naturalHeight;
+    canvas.width = width;
+    canvas.height = height;
     const ctx = canvas.getContext('2d', { willReadFrequently: true });
     ctx.drawImage(img,
-        cropValues.x || 0, cropValues.y || 0, cropValues.width, cropValues.height,
-        0, 0, cropValues.width, cropValues.height);
-    return ctx.getImageData(0, 0, cropValues.width, cropValues.height);
+        x, y, width, height,
+        0, 0, width, height);
+    return ctx.getImageData(0, 0, width, height);
 }
 
 function replaceWhitePxl(imgd, color, id) {
@@ -158,7 +162,7 @@ function defineStyleProperty(style, category, parameter, userValue, defaultValue
                 const dataValue = style.context.featureStyle?.[category]?.[parameter];
                 if (dataValue != undefined) { return readExpression(dataValue, style.context); }
                 if (defaultValue instanceof Function) {
-                    return defaultValue(style.context.properties, style.context);
+                    return defaultValue(style.context.properties, style.context) ?? defaultValue;
                 }
                 return defaultValue;
             },
@@ -765,10 +769,11 @@ class Style {
      * @param {Object} sprites vector tile layer.
      * @param {Number} [order=0]
      * @param {Boolean} [symbolToCircle=false]
+     * @param {Set} warn Set storing all warnings encountered by the source.
      *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
-    static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
+    static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false, warn) {
         const style = {
             fill: {},
             stroke: {},
@@ -804,7 +809,8 @@ class Style {
                 style.stroke.color = color;
                 style.stroke.opacity = opacity;
                 style.stroke.width = 1.0;
-                style.stroke.dasharray = [];
+            } else {
+                style.stroke.width  = 0.0;
             }
         } else if (layer.type === 'line') {
             const prepare = readVectorProperty(layer.paint['line-color'], { type: 'color' });
@@ -820,6 +826,8 @@ class Style {
             style.point.opacity = opacity;
             style.point.radius = readVectorProperty(layer.paint['circle-radius']);
         } else if (layer.type === 'symbol') {
+            // if symbol we shouldn't draw stroke but defaut value is 1.
+            style.stroke.width = 0.0;
             // overlapping order
             style.text.zOrder = readVectorProperty(layer.layout['symbol-z-order']);
             if (style.text.zOrder == 'auto') {
@@ -861,6 +869,12 @@ class Style {
             // additional icon
             const iconImg = readVectorProperty(layer.layout['icon-image']);
             if (iconImg) {
+                const cropValueDefault = {
+                    x: 0,
+                    y: 0,
+                    width: 1,
+                    height: 1,
+                };
                 try {
                     style.icon.id = iconImg;
                     if (iconImg.stops) {
@@ -871,28 +885,59 @@ class Style {
                                 if (stop[1].includes('{')) {
                                     cropValues = function _(p) {
                                         const id = stop[1].replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();
-                                        cropValues = sprites[id];
+                                        if (cropValues === undefined) {
+                                            const warning = `WARNING: "${id}" not found in sprite file`;
+                                            if (!warn.has(warning)) {
+                                                warn.add(warning);
+                                                console.warn(warning);
+                                            }
+                                            sprites[id] = cropValueDefault;// or return cropValueDefault;
+                                        }
                                         return sprites[id];
                                     };
+                                } else if (cropValues === undefined) {
+                                    const warning = `WARNING: "${stop[1]}" not found in sprite file`;
+                                    if (!warn.has(warning)) {
+                                        warn.add(warning);
+                                        console.warn(warning);
+                                    }
+                                    cropValues = cropValueDefault;
                                 }
                                 return [stop[0], cropValues];
                             }),
                         };
                         style.icon.cropValues = iconCropValue;
                     } else {
                         style.icon.cropValues = sprites[iconImg];
-                        if (iconImg[0].includes('{')) {
+                        if (iconImg.includes('{')) {
                             style.icon.cropValues = function _(p) {
                                 const id = iconImg.replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();
-                                style.icon.cropValues = sprites[id];
+                                if (sprites[id] === undefined) {
+                                    const warning = `WARNING: "${id}" not found in sprite file`;
+                                    if (!warn.has(warning)) {
+                                        warn.add(warning);
+                                        console.warn(warning);
+                                    }
+                                    sprites[id] = cropValueDefault;// or return cropValueDefault;
+                                }
                                 return sprites[id];
                             };
+                        } else if (sprites[iconImg] === undefined) {
+                            const warning = `WARNING: "${iconImg}" not found in sprite file`;
+                            if (!warn.has(warning)) {
+                                warn.add(warning);
+                                console.warn(warning);
+                            }
+                            style.icon.cropValues = cropValueDefault;
                         }
                     }
                     style.icon.source = sprites.source;
                     style.icon.size = readVectorProperty(layer.layout['icon-size']) || 1;
                     const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['icon-color'], { type: 'color' }));
-                    style.icon.color = color;
+                    // https://docs.mapbox.com/style-spec/reference/layers/#paint-symbol-icon-color
+                    if (iconImg.sdf) {
+                        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']`;
@@ -919,29 +964,28 @@ class Style {
      * @param {Boolean} canBeFilled - true if feature.type == FEATURE_TYPES.POLYGON.
      */
     applyToCanvasPolygon(txtrCtx, polygon, invCtxScale, canBeFilled) {
-        const context = this.context;
         // draw line or edge of polygon
-        if (this.stroke) {
+        if (this.stroke.width > 0) {
             // TO DO add possibility of using a pattern (https://github.com/iTowns/itowns/issues/2210)
-            this._applyStrokeToPolygon(txtrCtx, invCtxScale, polygon, context);
+            this._applyStrokeToPolygon(txtrCtx, invCtxScale, polygon);
         }
 
         // fill inside of polygon
-        if (canBeFilled && this.fill) {
+        if (canBeFilled && (this.fill.pattern || this.fill.color)) {
             // canBeFilled can be move to StyleContext in the later PR
-            this._applyFillToPolygon(txtrCtx, invCtxScale, polygon, context);
+            this._applyFillToPolygon(txtrCtx, invCtxScale, polygon);
         }
     }
 
     _applyStrokeToPolygon(txtrCtx, invCtxScale, polygon) {
         if (txtrCtx.strokeStyle !== this.stroke.color) {
             txtrCtx.strokeStyle = this.stroke.color;
         }
-        const width = (this.stroke.width || 2.0) * invCtxScale;
+        const width = this.stroke.width * invCtxScale;
         if (txtrCtx.lineWidth !== width) {
             txtrCtx.lineWidth = width;
         }
-        const alpha = this.stroke.opacity == undefined ? 1.0 : this.stroke.opacity;
+        const alpha = this.stroke.opacity;
         if (alpha !== txtrCtx.globalAlpha && typeof alpha == 'number') {
             txtrCtx.globalAlpha = alpha;
         }
@@ -957,7 +1001,7 @@ class Style {
         // need doc for the txtrCtx.fillStyle.src that seems to always be undefined
         if (this.fill.pattern) {
             let img = this.fill.pattern;
-            const cropValues = this.fill.pattern.cropValues;
+            const cropValues = { ...this.fill.pattern.cropValues };
             if (this.fill.pattern.source) {
                 img = await loadImage(this.fill.pattern.source);
             }
@@ -1032,7 +1076,7 @@ class Style {
         if (!this.icon.cropValues && !this.icon.color) {
             icon.src = this.icon.source;
         } else {
-            const cropValues = this.icon.cropValues;
+            const cropValues = { ...this.icon.cropValues };
             const color = this.icon.color;
             const id = this.icon.id || this.icon.source;
             const img = await loadImage(this.icon.source);

src/Layer/LabelLayer.js

@@ -248,9 +248,18 @@ class LabelLayer extends GeometryLayer {
         context.setZoom(extentOrTile.zoom);
 
         data.features.forEach((f) => {
-            // TODO: add support for LINE and POLYGON
+            if (f.style.text) {
+                if (Object.keys(f.style.text).length === 0) {
+                    return;
+                }
+            }
+
             if (f.type !== FEATURE_TYPES.POINT) {
-                return;
+                const warn = `Type label ${Object.keys(FEATURE_TYPES).filter(ft => FEATURE_TYPES[ft] === f.type)} not well supported`;
+                if (!this.source.warn.has(warn)) {
+                    this.source.warn.add(warn);
+                    console.warn(warn);
+                }
             }
             context.setFeature(f);
 
@@ -264,19 +273,11 @@ class LabelLayer extends GeometryLayer {
             labels.needsAltitude = labels.needsAltitude || this.forceClampToTerrain === true || (isDefaultElevationStyle && !f.hasRawElevationData);
 
             f.geometries.forEach((g) => {
-                // NOTE: this only works because only POINT is supported, it
-                // needs more work for LINE and POLYGON
-                coord.setFromArray(f.vertices, g.size * g.indices[0].offset);
-                // Transform coordinate to data.crs projection
-                coord.applyMatrix4(data.matrixWorld);
-
-                if (!_extent.isPointInside(coord)) { return; }
-                const geometryField = g.properties.style && g.properties.style.text && g.properties.style.text.field;
-
                 context.setGeometry(g);
-                let content;
                 this.style.setContext(context);
                 const layerField = this.style.text && this.style.text.field;
+                const geometryField = g.properties.style && g.properties.style.text && g.properties.style.text.field;
+                let content;
                 if (this.labelDomelement) {
                     content = readExpression(this.labelDomelement, context);
                 } else if (!geometryField && !featureField && !layerField) {
@@ -288,12 +289,27 @@ class LabelLayer extends GeometryLayer {
                     }
                 }
 
-                const label = new Label(content, coord.clone(), this.style);
+                if (this.style.zoom.min > this.style.context.zoom || this.style.zoom.max <= this.style.context.zoom) {
+                    return;
+                }
+
+                // NOTE: this only works fine for POINT.
+                // It needs more work for LINE and POLYGON as we currently only use the first point of the entity
 
-                label.layerId = this.id;
-                label.padding = this.margin || label.padding;
+                g.indices.forEach((i) => {
+                    coord.setFromArray(f.vertices, g.size * i.offset);
+                    // Transform coordinate to data.crs projection
+                    coord.applyMatrix4(data.matrixWorld);
 
-                labels.push(label);
+                    if (!_extent.isPointInside(coord)) { return; }
+
+                    const label = new Label(content, coord.clone(), this.style);
+
+                    label.layerId = this.id;
+                    label.padding = this.margin || label.padding;
+
+                    labels.push(label);
+                });
             });
         });
 

src/Parser/VectorTileParser.js

@@ -116,10 +116,11 @@ function vtFeatureToFeatureGeometry(vtFeature, feature, classify = false) {
 function readPBF(file, options) {
     options.out = options.out || {};
     const vectorTile = new VectorTile(new Protobuf(file));
-    const sourceLayers = Object.keys(vectorTile.layers);
+    const vtLayerNames = Object.keys(vectorTile.layers);
 
-    if (sourceLayers.length < 1) {
-        return;
+    const collection = new FeatureCollection(options.out);
+    if (vtLayerNames.length < 1) {
+        return Promise.resolve(collection);
     }
 
     // x,y,z tile coordinates
@@ -130,41 +131,33 @@ function readPBF(file, options) {
     // Only if the layer.origin is top
     const y = options.in.isInverted ? options.extent.row : (1 << z) - options.extent.row - 1;
 
-    const collection = new FeatureCollection(options.out);
-
-    const vFeature = vectorTile.layers[sourceLayers[0]];
-    // TODO: verify if size is correct because is computed with only one feature (vFeature).
-    const size = vFeature.extent * 2 ** z;
+    const vFeature0 = vectorTile.layers[vtLayerNames[0]];
+    // TODO: verify if size is correct because is computed with only one feature (vFeature0).
+    const size = vFeature0.extent * 2 ** z;
     const center = -0.5 * size;
 
     collection.scale.set(globalExtent.x / size, -globalExtent.y / size, 1);
-    collection.position.set(vFeature.extent * x + center, vFeature.extent * y + center, 0).multiply(collection.scale);
+    collection.position.set(vFeature0.extent * x + center, vFeature0.extent * y + center, 0).multiply(collection.scale);
     collection.updateMatrixWorld();
 
-    sourceLayers.forEach((layer_id) => {
-        if (!options.in.layers[layer_id]) { return; }
+    vtLayerNames.forEach((vtLayerName) => {
+        if (!options.in.layers[vtLayerName]) { return Promise.resolve(collection); }
 
-        const sourceLayer = vectorTile.layers[layer_id];
+        const vectorTileLayer = vectorTile.layers[vtLayerName];
 
-        for (let i = sourceLayer.length - 1; i >= 0; i--) {
-            const vtFeature = sourceLayer.feature(i);
+        for (let i = vectorTileLayer.length - 1; i >= 0; i--) {
+            const vtFeature = vectorTileLayer.feature(i);
             vtFeature.tileNumbers = { x, y: options.extent.row, z };
-            const layers = options.in.layers[layer_id].filter(l => l.filterExpression.filter({ zoom: z }, vtFeature) && z >= l.zoom.min && z < l.zoom.max);
-            let feature;
+            // Find layers where this vtFeature is used
+            const layers = options.in.layers[vtLayerName]
+                .filter(l => l.filterExpression.filter({ zoom: z }, vtFeature));
 
             for (const layer of layers) {
-                if (!feature) {
-                    feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
-                    feature.id = layer.id;
-                    feature.order = layer.order;
-                    feature.style = options.in.styles[feature.id];
-                    vtFeatureToFeatureGeometry(vtFeature, feature);
-                } else if (!collection.features.find(f => f.id === layer.id)) {
-                    feature = collection.newFeatureByReference(feature);
-                    feature.id = layer.id;
-                    feature.order = layer.order;
-                    feature.style = options.in.styles[feature.id];
-                }
+                const feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
+                feature.id = layer.id;
+                feature.order = layer.order;
+                feature.style = options.in.styles[feature.id];
+                vtFeatureToFeatureGeometry(vtFeature, feature);
             }
         }
     });

src/Renderer/Label2DRenderer.js

@@ -186,13 +186,15 @@ class Label2DRenderer {
         if (!frustum.containsPoint(worldPosition.applyMatrix4(camera.matrixWorldInverse)) ||
         // Check if globe horizon culls the label
         // Do some horizon culling (if possible) if the tiles level is small enough.
-            label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint) ||
-        // Check if content isn't present in visible labels
-            this.grid.visible.some((l) => {
-                // TODO for icon without text filter by position
-                const textContent = label.content.textContent;
-                return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
-            })) {
+            label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint)
+            // Why do we might need this part ?
+            // || // Check if content isn't present in visible labels
+            // this.grid.visible.some((l) => {
+            //     // TODO for icon without text filter by position
+            //     const textContent = label.content.textContent;
+            //     return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
+            // })
+        ) {
             label.visible = false;
         } else {
             // projecting world position label

src/Source/Source.js

@@ -108,6 +108,7 @@ class Source extends InformationsData {
     constructor(source) {
         super(source);
         this.isSource = true;
+        this.warn = new Set();
 
         if (!source.url) {
             throw new Error('New Source: url is required');