From 81bddf27fa201914741b940011d8a11fd2ba9d05 Mon Sep 17 00:00:00 2001 From: LorenMueller Date: Tue, 19 Jun 2018 15:22:56 -0700 Subject: [PATCH] 'q' lib as dependency; updated streetside for higher resolution imagery --- modules/services/streetside.js | 152 ++++++++++++++++++++++++++++----- modules/svg/streetside.js | 10 ++- package.json | 1 + 3 files changed, 137 insertions(+), 26 deletions(-) diff --git a/modules/services/streetside.js b/modules/services/streetside.js index d4dbb2c0d..3f338531e 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -20,6 +20,7 @@ import { geoExtent } from '../geo'; import { utilDetect } from '../util/detect'; import { utilQsString, utilRebind } from '../util'; +import Q from 'q'; var bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?'; var streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/'; @@ -33,6 +34,8 @@ var _currScene = 0; var _ssCache; var _pannellumViewer; var _sceneOptions; +var _dataUrlArray = []; +var _faceImgInfoGroups = []; /** * abortRequest(). @@ -296,7 +299,77 @@ function searchLimited(psize, limit, projection, rtree) { return results; } - +/** + * getImage() + */ +function getImage(imgInfo){ + var response = Q.defer(); + var canvas = document.getElementById('canvas' + imgInfo.face); + var ctx = canvas.getContext('2d'); + var img = new Image(); + img.onload = function() { + ctx.drawImage(img, imgInfo.dx, imgInfo.dy); + response.resolve({imgInfo:imgInfo, status: 'ok'}); + }; + img.onerror = function(){ + console.log('img onerror !'); + response.resolve({data: imgInfo, status: 'error'}); + }; + img.setAttribute("crossorigin",""); + img.src = imgInfo.url; + return response.promise; +} +/** + * loadCanvas() + */ +function loadCanvas(imgInfoGroup){ + var response = Q.defer(); + var getImagePromises = []; + imgInfoGroup.forEach(function(imgInfo){ + getImagePromises.push(getImage(imgInfo)) + }); + Q.all(getImagePromises).then(function(data){ + console.log('loadCanvas - All Get Images done: ', data); + var canvas = document.getElementById('canvas' + data[0].imgInfo.face); + switch(data[0].imgInfo.face){ + case '01': + _dataUrlArray[0] = canvas.toDataURL('image/jpeg',1.0) + break; + case '02': + _dataUrlArray[1] = canvas.toDataURL('image/jpeg',1.0) + break; + case '03': + _dataUrlArray[2] = canvas.toDataURL('image/jpeg',1.0) + break; + case '10': + _dataUrlArray[3] = canvas.toDataURL('image/jpeg',1.0) + break; + case '11': + _dataUrlArray[4] = canvas.toDataURL('image/jpeg',1.0) + break; + case '12': + _dataUrlArray[5] = canvas.toDataURL('image/jpeg',1.0) + break; + } + response.resolve({status:'loadCanvas for face ' + data[0].imgInfo.face + 'ok'}); + }); + return response.promise; +}; +/** + * processImages() + */ +function processImages(imgFaceInfoGroups){ + var response = Q.defer(); + var loadCanvasPromises = []; + //call loadCanvas once with each group of infos.... + imgFaceInfoGroups.forEach(function(faceImgGroup){ + loadCanvasPromises.push(loadCanvas(faceImgGroup)); + }); + Q.all(loadCanvasPromises).then(function(data){ + response.resolve({status: 'processImages done'}) + }); + return response.promise; +}; export default { /** @@ -408,6 +481,21 @@ export default { * loadViewer() create the streeside viewer. */ loadViewer: function (context) { + // Add the Streetside working canvases. These are used for 'stitching', or combining, + // multiple images for each of the six faces, before passing to the Pannellum control as DataUrls + var bodyWrap = d3_select('body') + .append('div') + .attr('id','divForCanvasWork') + .attr('display','none'); + var canvasDivWrap = d3_select('#divForCanvasWork') + .selectAll('canvas') + .data(['canvas01','canvas02','canvas03','canvas10','canvas11','canvas12']) + .enter() + .append('canvas') + .attr('id',function(d){return d}) + .attr('width','512') + .attr('height','512'); + // create ms-wrapper, a photo wrapper class var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper') .data([0]); @@ -449,6 +537,7 @@ export default { * showViewer() */ showViewer: function (yaw) { + console.log('showViewer(), _sceneOptions = ', _sceneOptions) if (!_sceneOptions) return; if (yaw !== undefined) { @@ -513,6 +602,8 @@ export default { * selectImage(). */ selectImage: function (d) { + var response = Q.defer(); + var viewer = d3_select('#photoviewer'); if (!viewer.empty()) viewer.datum(d); @@ -557,33 +648,48 @@ export default { for (var i = 0; i < paddingNeeded; i++) { bubbleIdQuadKey = '0' + bubbleIdQuadKey; } - - // Order matters here: front=01, right=02, back=03, left=10, up=11, down=12 - var imgLocIdxArr = ['01','02','03','10','11','12']; var imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey; var imgUrlSuffix = '.jpg?g=6338&n=z'; + // Order matters here: front=01, right=02, back=03, left=10, up=11, down=12 + var imgFaceCodes = ['01','02','03','10','11','12']; + var fourImgPerFaceLocationCodes = ['0','1','2','3']; + var fourImgPerFaceLocationPositions = [{dx:0,dy:0},{dx:256,dy:0},{dx:0,dy:256},{dx:256,dy:256}]; + imgFaceCodes.forEach(function(faceCode){ + var faceImgInfoGroup = []; + fourImgPerFaceLocationCodes.forEach(function(loc,idx_l){ + var imgInfoObj = {}; + imgInfoObj.face = faceCode; + imgInfoObj.url = imgUrlPrefix + faceCode + loc + imgUrlSuffix; + imgInfoObj.dx = fourImgPerFaceLocationPositions[idx_l].dx; + imgInfoObj.dy = fourImgPerFaceLocationPositions[idx_l].dy; + faceImgInfoGroup.push(imgInfoObj); + }); + _faceImgInfoGroups.push(faceImgInfoGroup); + }); - _sceneOptions = { - showFullscreenCtrl: false, - autoLoad: true, - compass: true, - northOffset: d.ca, - yaw: 0, - type: 'cubemap', - cubeMap: [ - imgUrlPrefix + imgLocIdxArr[0] + imgUrlSuffix, - imgUrlPrefix + imgLocIdxArr[1] + imgUrlSuffix, - imgUrlPrefix + imgLocIdxArr[2] + imgUrlSuffix, - imgUrlPrefix + imgLocIdxArr[3] + imgUrlSuffix, - imgUrlPrefix + imgLocIdxArr[4] + imgUrlSuffix, - imgUrlPrefix + imgLocIdxArr[5] + imgUrlSuffix - ] - }; + processImages(_faceImgInfoGroups).then(function(data){ + _sceneOptions = { + showFullscreenCtrl: false, + autoLoad: true, + compass: true, + northOffset: d.ca, + yaw: 0, + type: 'cubemap', + cubeMap: [ + _dataUrlArray[0], + _dataUrlArray[1], + _dataUrlArray[2], + _dataUrlArray[3], + _dataUrlArray[4], + _dataUrlArray[5] + ] + }; + response.resolve({status: 'ok'}); + }); } - - return this; + return response.promise; }, - + getSequenceKeyForBubble: function(d) { return d && d.sequenceKey; diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 342a2a3b5..06dec32b6 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -2,7 +2,7 @@ import _throttle from 'lodash-es/throttle'; import { select as d3_select } from 'd3-selection'; import { svgPath, svgPointTransform } from './index'; import { services } from '../services'; - +import Q from 'q'; export function svgStreetside(projection, context, dispatch) { var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); @@ -104,8 +104,12 @@ export function svgStreetside(projection, context, dispatch) { _selectedSequence = d.sequenceKey; service - .selectImage(d) - .showViewer(_viewerYaw); + .selectImage(d).then(function(r){ + if (r.status === 'ok'){ + service.showViewer(_viewerYaw); + } + }) + context.map().centerEase(d.loc); } diff --git a/package.json b/package.json index 959f857c9..c47a939f3 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "node-diff3": "1.0.0", "osm-auth": "1.0.2", "pannellum": "2.4.1", + "q": "1.5.1", "rbush": "2.0.2", "which-polygon": "2.2.0", "wmf-sitematrix": "0.1.4"