Demo
Create initial panorama
* using point and shoot camera take enough pictures to cover all around (8-12 is good enough)
* use stitching software to create equirectangular projection of the panorama
* panorama must be aspect ratio 2:1
Streetview tiles
* if initial panorama size 8192x4096, then for tile size 512x512, we need to create:
convert ${FN}_5.jpg -resize 8192x4096 ${FN}_4.jpg convert ${FN}_4.jpg -resize 4096x2048 ${FN}_3.jpg convert ${FN}_3.jpg -resize 2048x1024 ${FN}_2.jpg convert ${FN}_2.jpg -resize 1024x512 ${FN}_1.jpg convert ${FN}_1.jpg -resize 512x256 ${FN}_0.jpg
* The panorama with a single tile is zoom = 0, then 1,2,3,4
* Name each tile according to its zoom level and position.
* The top left tile is always tile (0,0).
* tile name format = "panorama_z_x_y.jpg".
convert ${FN}_5.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_5_%[filename:tile].jpg" convert ${FN}_4.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_4_%[filename:tile].jpg" convert ${FN}_3.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_3_%[filename:tile].jpg" convert ${FN}_2.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_2_%[filename:tile].jpg" convert ${FN}_1.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_1_%[filename:tile].jpg" # resize to tile size and fill neutral color convert ${FN}_0.jpg -resize 512x512\> -size 512x512 xc:black +swap -composite ${FN}_0_0_0.jpg
Javascript code for streetview
function initialize() { var panorama = new google.maps.StreetViewPanorama( document.getElementById('streetview'), { panoProvider: function(pano) { return { location: { pano: pano }, copyright: 'helmi03', links: [], tiles: { tileSize: new google.maps.Size(512, 512), worldSize: new google.maps.Size(8192, 4096), originHeading: 0, getTileUrl: function(room, zoom, x, y) { return 'tt_' + zoom + '_' + x + '_' + y + '.jpg'; } } }; }, pano: 'tt' } ); }
Demo
Panorama view of playground at Tasik Titiwangsa, Kuala Lumpur
Note that Google Maps v3 use html5 canvas instead of flash in v2.
Credits
Other blogger already give great explanation to create custom streetview and Google Maps had excellent documentation about this feature. Credits to them.
Before this, I display panorama view using java plugin.
2 comments:
Thanks for sharing it but when i use your command my image name looks like this
A.WILMONT_SW_331_tile_%[filename:tile]-0.jpg
here is my code
$file = "A.WILMONT_SW_331.jpg";
$sCropQuery = ' -scale 25%x -crop 267x412@ \ -set filename:tile "%[fx:page.x/267+1]_%[fx:page.y/412+1]" +repage +adjoin \ ';
$sQuery = "/usr/local/bin/convert "
." \"$file\"[0] "
.$sCropQuery
." A.WILMONT_SW_331_tile_%[filename:tile].jpg ";
$sResult = shell_exec( $sQuery );
MaxiMove LTD are a family run removal company offering home removals and same-day collection and delivery services at a competitive price. It's our goal to listen to our customers and put their requirements first and to provide you with an efficient, reliable and personalised service ensuring your moving day runs smoothly.
Moving company St Helens
Post a Comment