Move some layers into a dedicated MVT container.

The SKS and ST layers are much larger than the rest, there are tons of
features which cover almost of the territory.  They therefore take
longer to download.  As they are insible by default, it makes sense to
factor them out to speed up the rest.

This is just a PoC for now, we'll need to refator later and posibly use
a separate layer for each of SvK, SGU, VBK, SKS, ST, etc.

1 files changed, 49 insertions, 3 deletions

diff --git a/main.js b/main.js
index e1c2db9..fe50f80 100644
--- a/main.js
+++ b/main.js
@@ -1482,7 +1482,21 @@ const layerHierarchy = [
 ];
 
 const vectorSource = new VectorTile({
-  url: '/tiles/{z}/{x}/{y}.pbf',
+  url: '/tiles/a/{z}/{x}/{y}.pbf',
+  format: new MVT(),
+  projection: projection,
+  wrapX: false,
+  transition: 0,
+  tileGrid: createXYZ({
+    extent: extent,
+    tileSize: 1024,
+    maxResolution: 1024, /* = 1048576/1024 */
+    minZoom: 0,
+    maxZoom: 9,
+  }),
+});
+const vectorSource2 = new VectorTile({
+  url: '/tiles/b/{z}/{x}/{y}.pbf',
   format: new MVT(),
   projection: projection,
   wrapX: false,
@@ -1511,8 +1525,9 @@ const vectorLayer = new VectorTileLayer({
   source: vectorSource,
   /* XXX switch to 'hybrid' if there are perf issues; but that seems to
    * put lines above points regardless of their respective z-index */
-  renderMode: 'vector',
+  renderMode: 'hybrid',
   declutter: false,
+  visible: false,
   style: function(feature, resolution) {
     const style = styles[feature.getProperties().layer];
     if (!Array.isArray(style)) {
@@ -1529,6 +1544,27 @@ const vectorLayer = new VectorTileLayer({
 });
 map.addLayer(vectorLayer);
 
+const vectorLayer2 = new VectorTileLayer({
+  source: vectorSource2,
+  renderMode: 'hybrid',
+  declutter: false,
+  visible: false,
+  style: function(feature, resolution) {
+    const style = styles[feature.getProperties().layer];
+    if (!Array.isArray(style)) {
+      return style;
+    } else {
+      const maxi = style.length - 1;
+      const z = 10 /* Math.log2(maxResolution) */ - Math.log2(resolution);
+      /* use Math.floor() as VectorTile.js calls getZForResolution(resolution, 1) */
+      const i = z <= 0 ? 0 : z >= maxi ? maxi : Math.floor(z);
+      // console.log(`resolution=${resolution}, z=${z}, i=${i}`);
+      return style[i];
+    }
+  },
+});
+map.addLayer(vectorLayer2);
+
 /* layer selection panel */
 (function() {
   const modal = document.getElementById('layer-selection-panel');
@@ -1577,6 +1613,13 @@ map.addLayer(vectorLayer);
       }
     });
   };
+  /* TODO refactor */
+  const layerList1 = Object.keys(layers).filter((l) => !l.startsWith('sks_') && !l.startsWith('st_'));
+  const layerList2 = Object.keys(layers).filter((l) =>  l.startsWith('sks_') ||  l.startsWith('st_'));
+  const fixLayerVisibility = function() {
+    vectorLayer .setVisible(layerList1.some((lyr) => styles[lyr] !== undefined));
+    vectorLayer2.setVisible(layerList2.some((lyr) => styles[lyr] !== undefined));
+  };
   const onClickFunction = function(layerList, event) {
     const searchParams = new URLSearchParams(location.hash.substring(1));
     let layersParams = searchParams.get('layers') || '';
@@ -1595,7 +1638,9 @@ map.addLayer(vectorLayer);
       layersParams = layersParams.filter((lyr) => !layerList.includes(lyr));
     }
     setIndeterminateAndChecked(layerHierarchy);
+    fixLayerVisibility();
     vectorSource.changed();
+    vectorSource2.changed();
     searchParams.set('layers', layersParams.join(' '));
     location.hash = '#' + searchParams.toString();
   };
@@ -1695,6 +1740,7 @@ map.addLayer(vectorLayer);
     };
   });
   setIndeterminateAndChecked(layerHierarchy);
+  fixLayerVisibility();
 
   (function() {
     const item = document.createElement('div');
@@ -2004,7 +2050,7 @@ map.addLayer(vectorLayer);
     }, {
       hitTolerance: 5,
       checkWrapped: false,
-      layerFilter: (l) => l === vectorLayer,
+      layerFilter: (l) => l === vectorLayer || l === vectorLayer2,
     });
   });
 }());