| 1 | var GSVPANO = GSVPANO || {};
|
|---|
| 2 | GSVPANO.PanoLoader = function (parameters) {
|
|---|
| 3 |
|
|---|
| 4 | 'use strict';
|
|---|
| 5 |
|
|---|
| 6 | var _parameters = parameters || {},
|
|---|
| 7 | _location,
|
|---|
| 8 | _zoom,
|
|---|
| 9 | _panoId,
|
|---|
| 10 | _panoClient = new google.maps.StreetViewService(),
|
|---|
| 11 | _count = 0,
|
|---|
| 12 | _total = 0,
|
|---|
| 13 | _canvas = document.createElement('canvas'),
|
|---|
| 14 | _ctx = _canvas.getContext('2d'),
|
|---|
| 15 | rotation = 0,
|
|---|
| 16 | pitch = 0,
|
|---|
| 17 | copyright = '',
|
|---|
| 18 | onSizeChange = null,
|
|---|
| 19 | onPanoramaLoad = null;
|
|---|
| 20 |
|
|---|
| 21 | this.setProgress = function (p) {
|
|---|
| 22 |
|
|---|
| 23 | if (this.onProgress) {
|
|---|
| 24 | this.onProgress(p);
|
|---|
| 25 | }
|
|---|
| 26 |
|
|---|
| 27 | };
|
|---|
| 28 |
|
|---|
| 29 | this.throwError = function (message) {
|
|---|
| 30 |
|
|---|
| 31 | if (this.onError) {
|
|---|
| 32 | this.onError(message);
|
|---|
| 33 | } else {
|
|---|
| 34 | console.error(message);
|
|---|
| 35 | }
|
|---|
| 36 |
|
|---|
| 37 | };
|
|---|
| 38 |
|
|---|
| 39 | this.adaptTextureToZoom = function () {
|
|---|
| 40 |
|
|---|
| 41 | var w = 416 * Math.pow(2, _zoom),
|
|---|
| 42 | h = (416 * Math.pow(2, _zoom - 1));
|
|---|
| 43 | _canvas.width = w;
|
|---|
| 44 | _canvas.height = h;
|
|---|
| 45 |
|
|---|
| 46 | //donut flip
|
|---|
| 47 | /*_ctx.translate( _canvas.width, 0);
|
|---|
| 48 | _ctx.scale(-1, 1);*/
|
|---|
| 49 | };
|
|---|
| 50 |
|
|---|
| 51 | this.composeFromTile = function (x, y, texture) {
|
|---|
| 52 |
|
|---|
| 53 | _ctx.drawImage(texture, x * 512, y * 512);
|
|---|
| 54 | _count++;
|
|---|
| 55 |
|
|---|
| 56 | var p = Math.round(_count * 100 / _total);
|
|---|
| 57 | this.setProgress(p);
|
|---|
| 58 |
|
|---|
| 59 | if (_count === _total) {
|
|---|
| 60 | this.canvas = _canvas;
|
|---|
| 61 | if (this.onPanoramaLoad) {
|
|---|
| 62 | this.onPanoramaLoad();
|
|---|
| 63 | }
|
|---|
| 64 | }
|
|---|
| 65 |
|
|---|
| 66 | };
|
|---|
| 67 |
|
|---|
| 68 | this.composePanorama = function (panoId) {
|
|---|
| 69 |
|
|---|
| 70 | this.setProgress(0);
|
|---|
| 71 | //console.log('Loading panorama for zoom ' + _zoom + '...');
|
|---|
| 72 |
|
|---|
| 73 | var w = (_zoom==3) ? 7 : Math.pow(2, _zoom),
|
|---|
| 74 | h = Math.pow(2, _zoom - 1),
|
|---|
| 75 | self = this,
|
|---|
| 76 | url,
|
|---|
| 77 | x,
|
|---|
| 78 | y;
|
|---|
| 79 |
|
|---|
| 80 | _count = 0;
|
|---|
| 81 | _total = w * h;
|
|---|
| 82 |
|
|---|
| 83 | for( y = 0; y < h; y++) {
|
|---|
| 84 | for( x = 0; x < w; x++) {
|
|---|
| 85 | url = 'http://maps.google.com/cbk?output=tile&panoid=' + panoId + '&zoom=' + _zoom + '&x=' + x + '&y=' + y + '&' + Date.now();
|
|---|
| 86 | (function (x, y) {
|
|---|
| 87 | var img = new Image();
|
|---|
| 88 | img.addEventListener('load', function () {
|
|---|
| 89 | self.composeFromTile(x, y, this);
|
|---|
| 90 | });
|
|---|
| 91 | img.crossOrigin = '';
|
|---|
| 92 | img.crossOrigin = 'anonymous';
|
|---|
| 93 | img.src = url;
|
|---|
| 94 | })(x, y);
|
|---|
| 95 | }
|
|---|
| 96 | }
|
|---|
| 97 |
|
|---|
| 98 | };
|
|---|
| 99 |
|
|---|
| 100 | this.load = function (location, callback) {
|
|---|
| 101 |
|
|---|
| 102 | //console.log('Load for', location);
|
|---|
| 103 | var self = this;
|
|---|
| 104 | _panoClient.getPanoramaByLocation(location, 50, function (result, status) {
|
|---|
| 105 | if (status === google.maps.StreetViewStatus.OK) {
|
|---|
| 106 | if( self.onPanoramaData ) self.onPanoramaData( result );
|
|---|
| 107 | rotation = result.tiles.centerHeading * Math.PI / 180.0;
|
|---|
| 108 | pitch = result.tiles.originPitch;
|
|---|
| 109 | copyright = result.copyright;
|
|---|
| 110 | self.copyright = result.copyright;
|
|---|
| 111 | _panoId = result.location.pano;
|
|---|
| 112 | self.location = location;
|
|---|
| 113 | self.rotation = rotation;
|
|---|
| 114 | self.pitch = pitch;
|
|---|
| 115 | self.image_date = result.imageDate;
|
|---|
| 116 | self.id = _panoId;
|
|---|
| 117 | callback();
|
|---|
| 118 | } else {
|
|---|
| 119 | if( self.onNoPanoramaData ) self.onNoPanoramaData( status );
|
|---|
| 120 | self.throwError('Could not retrieve panorama for the following reason: ' + status);
|
|---|
| 121 | callback();
|
|---|
| 122 | }
|
|---|
| 123 | });
|
|---|
| 124 |
|
|---|
| 125 | };
|
|---|
| 126 |
|
|---|
| 127 | /*this.loadById = function (panoId, callback) {
|
|---|
| 128 |
|
|---|
| 129 | console.log('Load for', location);
|
|---|
| 130 | var self = this;
|
|---|
| 131 | _panoClient.getPanoramaById(panoId, function (result, status) {
|
|---|
| 132 | if (status === google.maps.StreetViewStatus.OK) {
|
|---|
| 133 | if( self.onPanoramaData ) self.onPanoramaData( result );
|
|---|
| 134 | rotation = result.tiles.centerHeading * Math.PI / 180.0;
|
|---|
| 135 | pitch = result.tiles.originPitch;
|
|---|
| 136 | copyright = result.copyright;
|
|---|
| 137 | self.copyright = result.copyright;
|
|---|
| 138 | _panoId = result.location.pano;
|
|---|
| 139 | self.location = location;
|
|---|
| 140 | self.rotation = rotation;
|
|---|
| 141 | self.pitch = pitch;
|
|---|
| 142 | self.image_date = result.imageDate;
|
|---|
| 143 | self.id = _panoId;
|
|---|
| 144 | callback();
|
|---|
| 145 | } else {
|
|---|
| 146 | if( self.onNoPanoramaData ) self.onNoPanoramaData( status );
|
|---|
| 147 | self.throwError('Could not retrieve panorama for the following reason: ' + status);
|
|---|
| 148 | callback();
|
|---|
| 149 | }
|
|---|
| 150 | });
|
|---|
| 151 |
|
|---|
| 152 | };*/
|
|---|
| 153 |
|
|---|
| 154 | this.setZoom = function( z ) {
|
|---|
| 155 | _zoom = z;
|
|---|
| 156 | this.adaptTextureToZoom();
|
|---|
| 157 | };
|
|---|
| 158 |
|
|---|
| 159 | this.setZoom( _parameters.zoom || 1 );
|
|---|
| 160 |
|
|---|
| 161 | }; |
|---|
