LRUCache on style.js

src/Core/Style.js

@@ -1,5 +1,5 @@
 import { FEATURE_TYPES } from 'Core/Feature';
-import Cache from 'Core/Scheduler/Cache';
+import { LRUCache } from 'lru-cache';
 import Fetcher from 'Provider/Fetcher';
 import * as maplibre from '@maplibre/maplibre-gl-style-spec';
 import { Color } from 'three';
@@ -8,7 +8,7 @@ import Coordinates from 'Core/Geographic/Coordinates';
 
 import itowns_stroke_single_before from './StyleChunk/itowns_stroke_single_before.css';
 
-const cacheStyle = new Cache();
+const cachedImg = new LRUCache({ max: 500 });
 
 const matrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
 const canvas = document.createElement('canvas');
@@ -79,11 +79,11 @@ function readVectorProperty(property, options) {
 }
 
 async function loadImage(url) {
-    const source = url.split('?')[0];
-    let promise = cacheStyle.get(source);
+    const imgUrl = url.split('?')[0];
+    let promise = cachedImg.get(imgUrl);
     if (!promise) {
         promise = Fetcher.texture(url, { crossOrigin: 'anonymous' });
-        cacheStyle.set(promise, source);
+        cachedImg.set(promise, imgUrl);
     }
     return (await promise).image;
 }
@@ -106,7 +106,7 @@ function replaceWhitePxl(imgd, color, id) {
     if (!color) {
         return imgd;
     }
-    const imgdColored = cacheStyle.get(id, color);
+    const imgdColored = cachedImg.get(`${id}_${color}`);
     if (!imgdColored) {
         const pix = imgd.data;
         const newColor = new Color(color);
@@ -117,7 +117,7 @@ function replaceWhitePxl(imgd, color, id) {
             pix[i + 1] = (pix[i + 1] * d +  newColor.g * 255 * (1 - d));
             pix[i + 2] = (pix[i + 2] * d +  newColor.b * 255 * (1 - d));
         }
-        cacheStyle.set(imgd, id, color);
+        cachedImg.set(imgd, `${id}_${color}`);
         return imgd;
     }
     return imgdColored;