From 8b68f077996e794b359ae0bbd8f2e31bb9857e11 Mon Sep 17 00:00:00 2001 From: mattiapezzotti Date: Sat, 22 Jun 2024 10:11:44 +0200 Subject: [PATCH] added a way to show only sequences on low level zoom --- css/60_photos.css | 23 +++++------ modules/services/pannellum_photo.js | 2 +- modules/services/panoramax.js | 63 +++++++++++++++++------------ modules/svg/panoramax_images.js | 6 +-- 4 files changed, 53 insertions(+), 41 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 67f75c549..ea5692bdc 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -166,7 +166,7 @@ .sequence { fill: none; stroke-width: 2; - stroke-opacity: 0.4; + stroke-opacity: 0.6; } .sequence.highlighted, .sequence.currentView { @@ -301,7 +301,7 @@ width: 100%; height: 100%; object-fit: cover; - overflow: hidden + overflow: hidden; } /* panoramax Image Layer */ @@ -464,23 +464,22 @@ label.streetside-hires { .photo-wrapper { position: relative; background-color: #000; -} - -.photoviewer .plane-frame { - display: block; - overflow: hidden; - height: 100%; - width: 100%; background-image: url(img/loader-black.gif); background-position: center; background-repeat: no-repeat; - object-fit: cover; +} + +.photoviewer .plane-frame { + height: 100%; + width: 100%; + transform-origin: 0 0; } .photoviewer .plane-frame > img.plane-photo{ - width: auto; + width: 100%; height: 100%; - transform-origin: 0 0; + object-fit: cover; + overflow: hidden; } /* photo-controls (step forward, back, rotate) */ diff --git a/modules/services/pannellum_photo.js b/modules/services/pannellum_photo.js index 51ac406a8..bebc4de2c 100644 --- a/modules/services/pannellum_photo.js +++ b/modules/services/pannellum_photo.js @@ -119,7 +119,7 @@ export default { let newSceneOptions = { showFullscreenCtrl: false, autoLoad: false, - compass: true, + compass: false, yaw: 0, type: 'equirectangular', preview: data.preview_path, diff --git a/modules/services/panoramax.js b/modules/services/panoramax.js index 621cf2779..919387205 100644 --- a/modules/services/panoramax.js +++ b/modules/services/panoramax.js @@ -23,6 +23,8 @@ const pictureLayer = 'pictures'; const sequenceLayer = 'sequences'; const minZoom = 10; +const imageMinZoom = 15; +const lineMinZoom = 10; const dispatch = d3_dispatch('loadedImages', 'loadedLines', 'viewerChanged'); let _cache; @@ -41,6 +43,8 @@ let _currentScene = { prevImage : null }; +let _activeImage; + // Partition viewport into higher zoom tiles function partitionViewport(projection) { @@ -129,6 +133,8 @@ function loadTileDataToCache(data, tile) { i, feature, loc, + locX, + locY, d; if (vectorTile.layers.hasOwnProperty(pictureLayer)) { @@ -144,7 +150,7 @@ function loadTileDataToCache(data, tile) { loc: loc, capture_time: feature.properties.ts, id: feature.properties.id, - acc_id: feature.properties.account_id, + account_id: feature.properties.account_id, sequence_id: feature.properties.sequences.split("\"")[1], heading: feature.properties.heading, image_path: "", @@ -179,7 +185,7 @@ function loadTileDataToCache(data, tile) { } // Quick access to image -function getImage(image_id, definition){ +function getImageURL(image_id, definition){ const requestUrl = imageBlobUrl.replace('{pictureID}', image_id) .replace('{definition}', definition); @@ -219,6 +225,7 @@ export default { }; _currentScene.currentImage = null; + _activeImage = null; }, // Get visible images @@ -234,16 +241,16 @@ export default { // Load images in the visible area loadImages: function(projection) { - loadTiles('images', tileUrl, 15, projection); + loadTiles('images', tileUrl, imageMinZoom, projection); }, // Load line in the visible area loadLines: function(projection) { - loadTiles('line', tileUrl, 10, projection); + loadTiles('line', tileUrl, lineMinZoom, projection); }, // Get visible sequences - sequences: function(projection) { + sequences: function(projection, zoom) { const viewport = projection.clipExtent(); const min = [viewport[0][0], viewport[1][1]]; const max = [viewport[1][0], viewport[0][1]]; @@ -251,40 +258,46 @@ export default { const sequenceIds = {}; let lineStrings = []; - _cache.images.rtree.search(bbox) - .forEach(function(d) { - if (d.data.sequence_id) { - sequenceIds[d.data.sequence_id] = true; - } - }); - - Object.keys(sequenceIds).forEach(function(sequenceId) { - if (_cache.sequences.lineString[sequenceId]) { + + if(zoom >= imageMinZoom){ + _cache.images.rtree.search(bbox).forEach(function(d) { + if (d.data.sequence_id) { + sequenceIds[d.data.sequence_id] = true; + } + }); + Object.keys(sequenceIds).forEach(function(sequenceId) { + if (_cache.sequences.lineString[sequenceId]) { + lineStrings = lineStrings.concat(_cache.sequences.lineString[sequenceId]); + } + }); + return lineStrings; + } + if(zoom >= lineMinZoom){ + Object.keys(_cache.sequences.lineString).forEach(function(sequenceId) { lineStrings = lineStrings.concat(_cache.sequences.lineString[sequenceId]); - } - }); - + }); + } return lineStrings; }, // Set the currently visible image setActiveImage: function(image) { if (image) { - _currentScene.currentImage = { + _activeImage = { id: image.id, sequence_id: image.sequence_id }; } else { - _currentScene.currentImage = null; + _activeImage = null; } }, // Update the currently highlighted sequence and selected bubble. setStyles: function(context, hovered) { - const hoveredImageId = hovered && hovered.id; + const hoveredImageId = hovered && hovered.id; const hoveredSequenceId = hovered && hovered.sequence_id; - const selectedSequenceId = _currentScene.currentImage && _currentScene.currentImage.sequence_id; - const selectedImageId = _currentScene.currentImage && _currentScene.currentImage.id; + const selectedSequenceId = _activeImage && _activeImage.sequence_id; + const selectedImageId = _activeImage && _activeImage.id; const markers = context.container().selectAll('.layer-panoramax .viewfield-group'); const sequences = context.container().selectAll('.layer-panoramax .sequence'); @@ -305,9 +318,9 @@ export default { function viewfieldPath() { let d = this.parentNode.__data__; if (d.isPano && d.id !== selectedImageId) { - return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0'; + return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0'; } else { - return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'; + return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'; } } @@ -333,7 +346,7 @@ export default { that.setActiveImage(d); that.updateUrlImage(d.id); - let imageUrl = getImage(d.id, highDefinition); + let imageUrl = getImageURL(d.id, highDefinition); let viewer = context.container() .select('.photoviewer'); diff --git a/modules/svg/panoramax_images.js b/modules/svg/panoramax_images.js index 70d852ec4..39617ccb3 100644 --- a/modules/svg/panoramax_images.js +++ b/modules/svg/panoramax_images.js @@ -167,11 +167,11 @@ export function svgPanoramaxImages(projection, context, dispatch) { function update() { - const z = ~~context.map().zoom(); - const showViewfields = (z >= viewFieldZoomLevel); + const zoom = ~~context.map().zoom(); + const showViewfields = (zoom >= viewFieldZoomLevel); const service = getService(); - let sequences = (service ? service.sequences(projection) : []); + let sequences = (service ? service.sequences(projection, zoom) : []); let images = (service ? service.images(projection) : []); images = filterImages(images);