aboutsummaryrefslogtreecommitdiffstats
path: root/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'main.js')
-rw-r--r--main.js52
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,
});
});
}());