itowns 2.44.3-next.3 → 2.44.3-next.31

package/lib/Core/Prefab/computeBufferTileGeometry.js

@@ -3,14 +3,52 @@ export function getBufferIndexSize(segments, noSkirt) {
   const triangles = segments * segments * 2 + (noSkirt ? 0 : 4 * segments * 2);
   return triangles * 3;
 }
-export default function computeBuffers(params) {
-  // Create output buffers.
-  const outBuffers = {
-    index: null,
-    position: null,
-    normal: null,
-    // 2 UV set per tile: wgs84 (uv[0]) and pm (uv[1])
-    //    - wgs84: 1 texture per tile because tiles are using wgs84 projection
+function getUintArrayConstructor(highestValue) {
+  let picked = null;
+  if (highestValue < 2 ** 8) {
+    picked = Uint8Array;
+  } else if (highestValue < 2 ** 16) {
+    picked = Uint16Array;
+  } else if (highestValue < 2 ** 32) {
+    picked = Uint32Array;
+  } else {
+    throw new Error('Value is too high');
+  }
+  return picked;
+}
+function allocateIndexBuffer(nVertex, nSeg, params) {
+  if (!params.buildIndexAndUv_0) {
+    return undefined;
+  }
+  const indexBufferSize = getBufferIndexSize(nSeg, params.disableSkirt);
+  const indexConstructor = getUintArrayConstructor(nVertex);
+  const tileLen = indexBufferSize;
+  const skirtLen = 4 * nSeg;
+  const indexBuffer = new ArrayBuffer((
+  // Tile
+  tileLen
+  // Skirt
+  + (params.disableSkirt ? 0 : skirtLen)) * indexConstructor.BYTES_PER_ELEMENT);
+  const index = new indexConstructor(indexBuffer);
+  const skirt = !params.disableSkirt ? index.subarray(tileLen, tileLen + skirtLen) : undefined;
+  return {
+    index,
+    skirt
+  };
+}
+function allocateBuffers(nVertex, nSeg, builder, params) {
+  const {
+    index,
+    skirt
+  } = allocateIndexBuffer(nVertex, nSeg, params) ?? {};
+  return {
+    index,
+    skirt,
+    position: new Float32Array(nVertex * 3),
+    normal: new Float32Array(nVertex * 3),
+    // 2 UV set per tile: wgs84 (uv[0]) and pseudo-mercator (pm, uv[1])
+    //    - wgs84: 1 texture per tile because tiles are using wgs84
+    //          projection
     //    - pm: use multiple textures per tile.
     //      +-------------------------+
     //      |                         |
@@ -24,142 +62,157 @@ export default function computeBuffers(params) {
     //      +-------------------------+
     //        * u = wgs84.u
     //        * v = textureid + v in builder texture
-    uvs: []
+    uvs: [params.buildIndexAndUv_0 ? new Float32Array(nVertex * 2) : undefined, builder.computeExtraOffset !== undefined ? new Float32Array(nVertex) : undefined]
+  };
+}
+function computeUv0(uv, id, u, v) {
+  uv[id * 2 + 0] = u;
+  uv[id * 2 + 1] = v;
+}
+function initComputeUv1(value) {
+  return (uv, id) => {
+    uv[id] = value;
   };
-  const computeUvs = [];
-  const builder = params.builder;
-  const nSeg = params.segments;
-  // segments count :
-  // Tile : (nSeg + 1) * (nSeg + 1)
-  // Skirt : 8 * (nSeg - 1)
-  const nVertex = (nSeg + 1) * (nSeg + 1) + (params.disableSkirt ? 0 : 4 * nSeg);
-  if (nVertex > 2 ** 32) {
+}
+/** Compute buffers describing a tile according to a builder and its params. */
+// TODO: Split this even further into subfunctions
+export function computeBuffers(builder, params) {
+  //     n seg, n+1 vert    + <- skirt, n verts per side
+  //    <---------------> / |
+  //    +---+---+---+---+   |
+  //    | / | / | / | / |   |  Vertices:
+  //    +---+---+---+---+ - +     tile = (n + 1)^2
+  //    | / | / | / | / |   |    skirt = 4n
+  //    +---+---+---+---+ - +
+  //    | / | / | / | / |   |  Segments:
+  //    +---+---+---+---+ - +     tile = 2 * n * (n + 1) + n^2
+  //    | / | / | / | / |   |    skirt = 2n * 4
+  //    +---+---+---+---+   |
+  const nSeg = Math.max(2, params.segments);
+  const nVertex = nSeg + 1;
+  const nTileVertex = nVertex ** 2;
+  const nSkirtVertex = params.disableSkirt ? 0 : 4 * nSeg;
+  const nTotalVertex = nTileVertex + nSkirtVertex;
+
+  // Computer should combust before this happens
+  if (nTotalVertex > 2 ** 32) {
     throw new Error('Tile segments count is too big');
   }
-  outBuffers.position = new Float32Array(nVertex * 3);
-  outBuffers.normal = new Float32Array(nVertex * 3);
-  const uvCount = params.builder.uvCount;
-  if (uvCount > 1) {
-    outBuffers.uvs[1] = new Float32Array(nVertex);
-  }
-  computeUvs[0] = () => {};
-  const bufferIndexSize = getBufferIndexSize(nSeg, params.disableSkirt);
-  if (params.buildIndexAndUv_0) {
-    if (nVertex < 2 ** 8) {
-      outBuffers.index = new Uint8Array(bufferIndexSize);
-    } else if (nVertex < 2 ** 16) {
-      outBuffers.index = new Uint16Array(bufferIndexSize);
-    } else if (nVertex < 2 ** 32) {
-      outBuffers.index = new Uint32Array(bufferIndexSize);
+  const outBuffers = allocateBuffers(nTotalVertex, nSeg, builder, params);
+  const computeUvs = [params.buildIndexAndUv_0 ? computeUv0 : () => {}];
+  params = builder.prepare(params);
+  for (let y = 0; y <= nSeg; y++) {
+    const v = y / nSeg;
+    params.coordinates.y = builder.vProject(v, params.extent);
+    if (builder.computeExtraOffset !== undefined) {
+      computeUvs[1] = initComputeUv1(builder.computeExtraOffset(params));
     }
-    outBuffers.uvs[0] = new Float32Array(nVertex * 2);
-    computeUvs[0] = (id, u, v) => {
-      outBuffers.uvs[0][id * 2 + 0] = u;
-      outBuffers.uvs[0][id * 2 + 1] = v;
-    };
-  }
-  const widthSegments = Math.max(2, Math.floor(nSeg) || 2);
-  const heightSegments = Math.max(2, Math.floor(nSeg) || 2);
-  let idVertex = 0;
-  const vertices = [];
-  let skirt = [];
-  const skirtEnd = [];
-  builder.prepare(params);
-  for (let y = 0; y <= heightSegments; y++) {
-    const verticesRow = [];
-    const v = y / heightSegments;
-    builder.vProjecte(v, params);
-    if (uvCount > 1) {
-      const u = builder.computeUvs[1](params);
-      computeUvs[1] = id => {
-        outBuffers.uvs[1][id] = u;
-      };
-    }
-    for (let x = 0; x <= widthSegments; x++) {
-      const u = x / widthSegments;
-      const id_m3 = idVertex * 3;
-      builder.uProjecte(u, params);
-      const vertex = builder.vertexPosition(params, params.projected);
-      const normal = builder.vertexNormal(params);
+    for (let x = 0; x <= nSeg; x++) {
+      const u = x / nSeg;
+      const id_m3 = (y * nVertex + x) * 3;
+      params.coordinates.x = builder.uProject(u, params.extent);
+      const vertex = builder.vertexPosition(params.coordinates);
+      const normal = builder.vertexNormal();
 
       // move geometry to center world
       vertex.sub(params.center);
 
       // align normal to z axis
-      if (params.quatNormalToZ) {
-        vertex.applyQuaternion(params.quatNormalToZ);
-        normal.applyQuaternion(params.quatNormalToZ);
+      // HACK: this check style is not great
+      if ('quatNormalToZ' in params) {
+        const quat = params.quatNormalToZ;
+        vertex.applyQuaternion(quat);
+        normal.applyQuaternion(quat);
       }
       vertex.toArray(outBuffers.position, id_m3);
       normal.toArray(outBuffers.normal, id_m3);
-      for (const computeUv of computeUvs) {
-        computeUv(idVertex, u, v);
-      }
-      if (!params.disableSkirt) {
-        if (y !== 0 && y !== heightSegments) {
-          if (x === widthSegments) {
-            skirt.push(idVertex);
-          } else if (x === 0) {
-            skirtEnd.push(idVertex);
-          }
+      for (const [index, computeUv] of computeUvs.entries()) {
+        if (computeUv !== undefined) {
+          computeUv(outBuffers.uvs[index], y * nVertex + x, u, v);
         }
       }
-      verticesRow.push(idVertex);
-      idVertex++;
-    }
-    vertices.push(verticesRow);
-    if (y === 0) {
-      skirt = skirt.concat(verticesRow);
-    } else if (y === heightSegments) {
-      skirt = skirt.concat(verticesRow.slice().reverse());
     }
   }
-  if (!params.disableSkirt) {
-    skirt = skirt.concat(skirtEnd.reverse());
+
+  // Fill skirt index buffer
+  if (params.buildIndexAndUv_0 && !params.disableSkirt) {
+    for (let x = 0; x < nVertex; x++) {
+      //   -------->
+      //   0---1---2
+      //   | / | / |   [0-9] = assign order
+      //   +---+---+
+      //   | / | / |
+      //   +---+---+
+      outBuffers.skirt[x] = x;
+      //   +---+---+
+      //   | / | / |   [0-9] = assign order
+      //   +---+---x   x = skipped for now
+      //   | / | / |
+      //   0---1---2
+      //   <--------
+      outBuffers.skirt[2 * nVertex - 2 + x] = nVertex ** 2 - (x + 1);
+    }
+    for (let y = 1; y < nVertex - 1; y++) {
+      //   +---+---s |
+      //   | / | / | | o = stored vertices
+      //   +---+---o | s = already stored
+      //   | / | / | |
+      //   +---+---s v
+      outBuffers.skirt[nVertex - 1 + y] = y * nVertex + (nVertex - 1);
+      // ^ s---+---+
+      // | | / | / |   o = stored vertices
+      // | o---+---+   s = already stored
+      // | | / | / |
+      // | s---+---+
+      outBuffers.skirt[3 * nVertex - 3 + y] = nVertex * (nVertex - 1 - y);
+    }
   }
-  function bufferize(va, vb, vc, idVertex) {
-    outBuffers.index[idVertex + 0] = va;
-    outBuffers.index[idVertex + 1] = vb;
-    outBuffers.index[idVertex + 2] = vc;
-    return idVertex + 3;
+
+  /** Copy passed indices at the desired index of the output index buffer. */
+  function bufferizeTri(id, va, vb, vc) {
+    outBuffers.index[id + 0] = va;
+    outBuffers.index[id + 1] = vb;
+    outBuffers.index[id + 2] = vc;
   }
-  let idVertex2 = 0;
   if (params.buildIndexAndUv_0) {
-    for (let y = 0; y < heightSegments; y++) {
-      for (let x = 0; x < widthSegments; x++) {
-        const v1 = vertices[y][x + 1];
-        const v2 = vertices[y][x];
-        const v3 = vertices[y + 1][x];
-        const v4 = vertices[y + 1][x + 1];
-        idVertex2 = bufferize(v4, v2, v1, idVertex2);
-        idVertex2 = bufferize(v4, v3, v2, idVertex2);
+    for (let y = 0; y < nSeg; y++) {
+      for (let x = 0; x < nSeg; x++) {
+        const v1 = y * nVertex + (x + 1);
+        const v2 = y * nVertex + x;
+        const v3 = (y + 1) * nVertex + x;
+        const v4 = (y + 1) * nVertex + (x + 1);
+        const id = (y * nSeg + x) * 6;
+        bufferizeTri(id, /**/v4, v2, v1);
+        bufferizeTri(id + 3, v4, v3, v2);
       }
     }
   }
-  const iStart = idVertex;
 
-  // TODO: WARNING beware skirt's size influences performance
-  // The size of the skirt is now a ratio of the size of the tile.
-  // To be perfect it should depend on the real elevation delta but too heavy to compute
-  if (!params.disableSkirt) {
-    // We compute the actual size of tile segment to use later for the skirt.
+  // PERF: Beware skirt's size influences performance
+  // INFO: The size of the skirt is now a ratio of the size of the tile.
+  // To be perfect it should depend on the real elevation delta but too heavy
+  // to compute
+  if (params.buildIndexAndUv_0 && !params.disableSkirt) {
+    // We compute the actual size of tile segment to use later for
+    // the skirt.
     const segmentSize = new THREE.Vector3().fromArray(outBuffers.position).distanceTo(new THREE.Vector3().fromArray(outBuffers.position, 3));
-    let buildIndexSkirt = function () {};
-    let buildUVSkirt = function () {};
-    if (params.buildIndexAndUv_0) {
-      buildIndexSkirt = function (id, v1, v2, v3, v4) {
-        id = bufferize(v1, v2, v3, id);
-        id = bufferize(v1, v3, v4, id);
-        return id;
-      };
-      buildUVSkirt = function (id) {
-        outBuffers.uvs[0][idVertex * 2 + 0] = outBuffers.uvs[0][id * 2 + 0];
-        outBuffers.uvs[0][idVertex * 2 + 1] = outBuffers.uvs[0][id * 2 + 1];
-      };
-    }
-    for (let i = 0; i < skirt.length; i++) {
-      const id = skirt[i];
-      const id_m3 = idVertex * 3;
+    const buildSkirt = {
+      index: (id, v1, v2, v3, v4) => {
+        bufferizeTri(id, v1, v2, v3);
+        bufferizeTri(id + 3, v1, v3, v4);
+        return id + 6;
+      },
+      uv: (buf, idTo, idFrom) => {
+        buf[idTo * 2 + 0] = buf[idFrom * 2 + 0];
+        buf[idTo * 2 + 1] = buf[idFrom * 2 + 1];
+      }
+    };
+
+    // Alias for readability
+    const start = nTileVertex;
+    for (let i = 0; i < outBuffers.skirt.length; i++) {
+      const id = outBuffers.skirt[i];
+      const id_m3 = (start + i) * 3;
       const id2_m3 = id * 3;
       outBuffers.position[id_m3 + 0] = outBuffers.position[id2_m3 + 0] - outBuffers.normal[id2_m3 + 0] * segmentSize;
       outBuffers.position[id_m3 + 1] = outBuffers.position[id2_m3 + 1] - outBuffers.normal[id2_m3 + 1] * segmentSize;
@@ -167,17 +220,23 @@ export default function computeBuffers(params) {
       outBuffers.normal[id_m3 + 0] = outBuffers.normal[id2_m3 + 0];
       outBuffers.normal[id_m3 + 1] = outBuffers.normal[id2_m3 + 1];
       outBuffers.normal[id_m3 + 2] = outBuffers.normal[id2_m3 + 2];
-      buildUVSkirt(id);
-      if (uvCount > 1) {
-        outBuffers.uvs[1][idVertex] = outBuffers.uvs[1][id];
+      buildSkirt.uv(outBuffers.uvs[0], start + i, id);
+      if (outBuffers.uvs[1] !== undefined) {
+        outBuffers.uvs[1][start + i] = outBuffers.uvs[1][id];
       }
-      const idf = (i + 1) % skirt.length;
-      const v2 = idVertex;
-      const v3 = idf === 0 ? iStart : idVertex + 1;
-      const v4 = skirt[idf];
-      idVertex2 = buildIndexSkirt(idVertex2, id, v2, v3, v4);
-      idVertex++;
+      const idf = (i + 1) % outBuffers.skirt.length;
+      const v2 = start + i;
+      const v3 = idf === 0 ? start : start + i + 1;
+      const v4 = outBuffers.skirt[idf];
+      buildSkirt.index(6 * nSeg ** 2 + i * 6, id, v2, v3, v4);
     }
   }
-  return outBuffers;
+
+  // Dropping skirt view
+  return {
+    index: outBuffers.index,
+    position: outBuffers.position,
+    uvs: outBuffers.uvs,
+    normal: outBuffers.normal
+  };
 }

package/lib/Core/Style.js

@@ -1,7 +1,7 @@
 import { FEATURE_TYPES } from "./Feature.js";
 import Cache from "./Scheduler/Cache.js";
 import Fetcher from "../Provider/Fetcher.js";
-import * as mapbox from '@mapbox/mapbox-gl-style-spec';
+import * as maplibre from '@maplibre/maplibre-gl-style-spec';
 import { Color } from 'three';
 import { deltaE } from "../Renderer/Color.js";
 import Coordinates from "./Geographic/Coordinates.js";
@@ -73,8 +73,8 @@ function rgba2rgb(orig) {
 }
 function readVectorProperty(property, options) {
   if (property != undefined) {
-    if (mapbox.expression.isExpression(property)) {
-      return mapbox.expression.createExpression(property, options).value;
+    if (maplibre.expression.isExpression(property)) {
+      return maplibre.expression.createExpression(property, options).value;
     } else {
       return property;
     }
@@ -90,18 +90,18 @@ async function loadImage(source) {
   }
   return (await promise).image;
 }
-function cropImage(img) {
-  let cropValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    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);
+  ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
+  return ctx.getImageData(0, 0, width, height);
 }
 function replaceWhitePxl(imgd, color, id) {
   if (!color) {
@@ -166,7 +166,7 @@ function defineStyleProperty(style, category, parameter, userValue, defaultValue
         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;
     },
@@ -294,15 +294,12 @@ function _addIcon(icon, domElement, opt) {
 }
 
 /**
- * An object that can contain any properties (order, zoom, fill, stroke, point,
+ * An object that can contain any properties (zoom, fill, stroke, point,
  * text or/and icon) and sub properties of a Style.<br/>
  * Used for the instanciation of a {@link Style}.
  *
  * @typedef {Object} StyleOptions
  *
- * @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
@@ -460,8 +457,6 @@ function _addIcon(icon, domElement, opt) {
  * 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
- * 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
  * any [valid color
@@ -611,14 +606,13 @@ function _addIcon(icon, domElement, opt) {
 class Style {
   /**
    * @param {StyleOptions} [params={}] An object that contain any properties
-   * (order, zoom, fill, stroke, point, text or/and icon)
+   * (zoom, fill, stroke, point, text or/and icon)
    * and sub properties of a Style ({@link StyleOptions}).
    */
   constructor() {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.isStyle = true;
     this.context = new StyleContext();
-    this.order = params.order || 0;
     params.zoom = params.zoom || {};
     params.fill = params.fill || {};
     params.stroke = params.stroke || {};
@@ -783,14 +777,12 @@ class Style {
    * set Style from vector tile layer properties.
    * @param {Object} layer vector tile layer.
    * @param {Object} sprites vector tile layer.
-   * @param {Number} [order=0]
    * @param {Boolean} [symbolToCircle=false]
    *
    * @returns {StyleOptions} containing all properties for itowns.Style
    */
   static setFromVectorTileLayer(layer, sprites) {
-    let order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let symbolToCircle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    let symbolToCircle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     const style = {
       fill: {},
       stroke: {},
@@ -800,7 +792,6 @@ class Style {
     };
     layer.layout = layer.layout || {};
     layer.paint = layer.paint || {};
-    style.order = order;
     if (layer.type === 'fill') {
       const {
         color,
@@ -832,7 +823,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'], {
@@ -858,6 +850,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') {
@@ -878,7 +872,7 @@ class Style {
 
       // content
       style.text.field = readVectorProperty(layer.layout['text-field']);
-      style.text.wrap = readVectorProperty(layer.layout['text-max-width']);
+      style.text.wrap = readVectorProperty(layer.layout['text-max-width']); // Units ems
       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']);
@@ -905,6 +899,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) {
@@ -917,9 +917,15 @@ 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`;
+                      sprites[id] = cropValueDefault; // or return cropValueDefault;
+                    }
                     return sprites[id];
                   };
+                } else if (cropValues === undefined) {
+                  // const warning = `WARNING: "${stop[1]}" not found in sprite file`;
+                  cropValues = cropValueDefault;
                 }
                 return [stop[0], cropValues];
               })
@@ -927,24 +933,33 @@ class Style {
             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`;
+                  sprites[id] = cropValueDefault; // or return cropValueDefault;
+                }
                 return sprites[id];
               };
+            } else if (sprites[iconImg] === undefined) {
+              // const warning = `WARNING: "${iconImg}" not found in sprite file`;
+              style.icon.cropValues = cropValueDefault;
             }
           }
           style.icon.source = sprites.source;
-          style.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'
           }));
-          style.icon.color = color;
-          style.icon.opacity = readVectorProperty(layer.paint['icon-opacity']) || opacity !== undefined && opacity;
+          // 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']`;
           throw err;
@@ -970,28 +985,27 @@ 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;
     }
@@ -1006,7 +1020,9 @@ 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);
       }
@@ -1074,7 +1090,9 @@ 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);