首页 > 代码库 > 使用WebGL加载Google街景图
使用WebGL加载Google街景图
我们要实现的功能比较简单：首先通过坐标定位、我的位置、地址搜索等方式，调用google map api获取地址信息。然后根据地址信息中的全景信息获取当前缩放级别的全景信息。最终把这些全景信息通过WebGL方法显示在屏幕上。
了解了Google街景图的呈现原理，像国内的街景呈现，景区全景呈现不外乎都是相似的原理。区别只是调用的api不同而已。在实现功能过程中，我们也可以了解到全景呈现的一些原理。
在介绍代码之前，先大概的描述下实现的步骤：
1）、使用google api呈现地图，实现地图定位、搜索功能。这两种方式我们获取的都是地址信息，地址信息中我们关注两项数据：坐标、全景ID。
2）、使用google提供的全景api，传递zoom和当前坐标位置以及全景ID。获取当前位置全景图片。
3）、把获取的图片集合通过对应的坐标位置，呈现到同一个canvas上，拼凑成一张完整的图片。
4）、把canvas作为一个纹理，贴到类型为Sphere的球体上，摄像头在球体中心位置观察。
通过以上步骤就可实现google街景图的呈现。下面的内容将介绍具体的实现。
google地图呈现
显示看下google地图的界面实现，界面如下：
要使用google地图，先得引入googe api。如何引入，自己查看下google api介绍就知道了。这里需要特别注意的是，如果是本地调试，在获取api时，必须传递key。否则，地图就不能使用。
界面实现代码如下：
<div id="pano"></div> <div id="options" class="hide"> <div id="map"></div> <div class="block"> <form id="map_form"> <input type="text" name="address" id="address" /> <button type="submit" class="primary button" id="searchButton" >查询</button> </form> </div> <div class="block"> <button type="submit" id="myLocationButton" style="width: 148px" class="button">使用我的位置</button> <button type="submit" id="fullscreenButton" style="width: 148px" class="button">全屏</button> </div> <div class="block"> <b>质量</b> <form id="pano_form" style="position: absolute; right: 0; top: 0"> <button name="scale" style="width: 4em" id="scale1" class="left button">低</button> <button name="scale" style="width: 6em" id="scale2" class="middle button">中</button> <button name="scale" style="width: 4em" id="scale3" class="middle button">高</button> <button name="scale" style="width: 7em" id="scale4" class="right button">超清</button> </form> </div> <div class="block" id="status" > <div id="message" ></div> <div id="error" ></div> </div> </div> <div id="preloader"> <div id="bar"></div> </div> <script type="text/javascript" src="http://www.mamicode.com/libs/GSVPano.js"></script> <script type="text/javascript" src="http://www.mamicode.com/libs/three.js"></script> <script type="text/javascript" src="http://www.mamicode.com/libs/RequestAnimationFrame.js"></script> <!-- 本地调试google map api， 必须申请key--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyA6idYqH50rvzc2QBZyBdJT_ipSH2DrABk&sensor=false"></script>
pano是用来渲染全景图的容器。options是显示google地图的容器，可以使用我的位置定位、全屏、地址查询、切换缩放级别。也可以直接在地图上定位。
以上的操作我们可以分为两类，一类是获取坐标，另一类是设置容器大小。像我的位置定位、地址查询、地图定位最终都是为了获取当前地址的经纬度。而设置zoom，最终改变的是绘制全景图的容器的大小。
也就是说，我们操作有两个输出：location、zoom。接下来就介绍着两个输出的使用。
使用zoom设置全景容器大小
界面上有四个按钮，设置Zoom的大小。事件绑定代码如下：
//设置zoom按钮，并绑定事件 for(var j = 1; j < 5; j++){ var el = document.getElementById("scale" + j); scaleButtons.push(el); (function(z){ el.addEventListener("click", function(e){ e.preventDefault(); setZoom(z); }, false); })(j); }
每个事件都会调用setZoom函数设置当前缩放级别。setZoom函数如下：
function setZoom( z ){ zoom = z; loader.setZoom( z); for(var j = 0; j < scaleButtons.length; j++){ scaleButtons[j].className = scaleButtons[j].className.replace("active", ""); if(z == (j + 1)) scaleButtons[j].className += " active"; } if(activeLocation) loader.load(activeLocation); }
这里有两行代码比较重要:loader.setZoom( z )，以及if(activeLocation) ….。第二段代码是和坐标有关系的，现在先不介绍。loader是一个类型为GSVPANO的对象，所有和全景相关的代码都包含在这个类型中。这个对象包含了setZoom函数。setZoom函数代码如下：
this.setZoom = function(z){ _zoom = z; console.log(z); this.adaptTextureToZoom(); };
代码调用了adaptTextureToZoom()函数，从字面上看，是为了把纹理适配到设置的Zoom大小上。代码如下：
this.adaptTextureToZoom = function(){ var w = widths[ _zoom ],//当前zoom,一张图片的宽度 h = heights[ _zoom ]; // 当前zoom，一张图片的高度 _wc = Math.ceil(w / maxW); // x方向，图片数量 _hc = Math.ceil(h / maxH); // y方向，图片数量 _canvas = []; // canvas集合 _ctx = []; //上下文集合 var ptr = 0; for(var y = 0; y < _hc; y++){ // y方向 for(var x = 0; x < _wc; x++ ){ // x方向 var c = document.createElement("canvas"); //创建一个新的canvas if( x < (_wc - 1)) c.width = maxW; else c.width = w - (maxW * x); if( y < (_hc - 1)) c.height = maxH; else c.height = h - (maxH * y ); console.log("新创建canvas:" + c.width + " * " + c.height ); _canvas.push( c ); _ctx.push(c.getContext("2d")); ptr++; } } };
这段代码我也花了一些时间研究，这里有几个参数需要先说明下：
var widths = [416, 832, 1664, 3328, 6656], heights = [416, 416, 832, 1664, 3328];... if(gl){ var maxTexSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); maxW = maxH = maxTexSize; }...
widths和heights存放了每个缩放级别，一张图片的宽度和高度。maxW、maxH为纹理默认的最大尺寸。
adaptTextureToZoom函数中，先获取每张图片的尺寸w、h。然后使用Math.ceil(w / maxW)获取在x方向，图片的个数。但通过我自的调试发现，w、h都是小于maxW、maxH的。所以x、y方向的图片个数_wc、_hc等为1。有了这样的结论，继续看adaptTextureToZoom函数下面的代码。使用for循环遍历依次遍历每一行，每一列。每个位置创建一个canvas。但由于_wc和_hc都为1，所有仅仅会创建一个canvas。
并且这唯一一个canvas的宽度为w、高度为h。_canvas和_ctx集合的长度都为1。
我们在界面上设置zoom，也就是为了获取这个canvas。以提供绘制全景图的容器。但这里有个奇怪的地方，widths和height的尺寸都是416的倍数。而接下里我们获取的全景图，每张的大小确实512。先把这个问题留着。继续看location的使用。
使用location获取当前位置的全景信息
我们先回到之前介绍的setZoom函数，代码如下：
function setZoom( z ){ zoom = z; loader.setZoom( z); ... if(activeLocation) loader.load(activeLocation); }
现在我们就来分析loader.load(activeLocation)函数。activeLocation表示我们已经获取到的位子的坐标经纬度信息。load函数代码如下：
this.load = function(location){ var self = this; var url = ‘https://cbks0.google.com/cbk?cb_client=maps_sv.tactile&authuser=0&hl=en&output=polygon&it=1%3A1&rank=closest&ll=‘ + location.lat() + ‘,‘ + location.lng() + ‘&radius=350‘; var http_request = new XMLHttpRequest(); http_request.open("GET", url, true); http_request.onreadystatechange = function(){ if(http_request.readyState === 4 && http_request.status == 200){ var data =http://www.mamicode.com/ JSON.parse(http_request.responseText); self.loadPano(location, data.result[0].id); } } http_request.send(null); }
代码其实很简单，通过传递的location组装获取地址信息的url。然后使用XMLHttpRequest发送请求。返回的结果信息中，我们主要用到的是地址的id：data.result[0].id。请求回调函数最后调用了self.loadPano(location, data.result[0].id)函数。该函数代码如下：
this.loadPano = function(location, id){ var self = this; _panoClient.getPanoramaById(id, function(result, status){ if(status === google.maps.StreetViewStatus.OK){ …
_panoId = result.location.pano; self.location = location; self.composePanorama(); }else{ if(self.onNoPanoramaData) self.onNoPanoramaData(status); self.throwError("不能获取panorama,原因如下：" + status); } }); };
_panoClient是类型为google.maps.StreetViewService的一个google api对象。包含有getPanoramaById(id, callback)函数。该函数通过传递的地址信息id获取全景信息。这里我们最关系的数据是_panoId(全景信息id)。获取了全景信息id，最后继续调用了self.composePanorama()函数。
this.composePanorama = function(){ this.setProgress(0); var w = levelsW[ _zoom], //x方向的个数 h = levelsH[ _zoom], //y方向的个数 self = this, url, x, y; _count = 0; _total = w * h; var self = this; for(var y = 0; y < h; y++){ for(var x = 0; x < w; x++){ //var url = ‘https://cbks2.google.com/cbk?cb_client=maps_sv.tactile&authuser=0&hl=en&panoid=‘ + _panoId + ‘&output=tile&zoom=‘ + _zoom + ‘&x=‘ + x + ‘&y=‘ + y + ‘&‘ + Date.now(); var url = ‘https://geo0.ggpht.com/cbk?cb_client=maps_sv.tactile&authuser=0&hl=en&panoid=‘ + _panoId + ‘&output=tile&x=‘ + x + ‘&y=‘ + y + ‘&zoom=‘ + _zoom + ‘&nbt&fover=2‘; (function(x, y){ if(_parameters.useWebGL){ var texture = THREE.ImageUtils.loadTexture(url, null, function(){ self.composeFromTile(x, y, texture); }); }else{ var img = new Image(); img.addEventListener("load", function(){ self.composeFromTile(x, y, this); }); img.crossOrigin = ""; img.src = url; } })(x, y); } } };
这里又有两个新变量levelsW、levelsH。还是先看下赋值：
var levelsW = [1, 2, 4, 7, 13, 26];var levelsH = [1, 1, 2, 4, 7, 13];
levelsW存放每个级别x方向图片个数，levelsH存放每个级别y方向图片个数。composePanorama函数中的_total变量有什么用？y用处也不大，加载进度需要用一下。接着每行每列一次遍历每个格子。假如当前zoom级别为2，那么对应的w和h分别是4,2。如下图所示：
遍历上图的每个格子，通过格式的编号x、y组装图片地址，创建一个Image对象（这里我们没有设置useWebGL），设置src等于图片地址url。这样Image就获取到了图片信息。图片加载成功后，调用self.composeFromTile(x, y, this)函数。composeFormTile函数代码如下：
this.composeFromTile = function(x, y, texture){ x *= 512; //x方向编号编号所在像素位置 y *= 512; // y方向编号所在像素位置 var px = Math.floor(x / maxW), py = Math.floor( y / maxH); // px和py表示当前图片所在像素位置 x -= px * maxW; y -= py * maxH; _ctx[py * _wc + px].drawImage(texture, 0, 0, texture.width, texture.height, x, y, 512, 512); //每个canvas上画图的位置和地图上x、y对应上。 this.progress(); }
函数包含三个参数，前两个参数表示格子的位子，而texture表示图片对象。x、y都乘以了512,意思是把格子编号转换为格子左上角坐在的像素坐标。在计算px和py时，这里有个疑问，由于x和y始终是小于maxW和maxH的。所有px和py都等于0。那么x和y的像素位置是没改变的。并且py * _wc + px是指都是0。也就是说，所有格子对应的图片都是存放在_ctx[0]的画布上。这里的drawImage函数需要着重说明下，drawImage函数声明如下：
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);呈现如下：
调用drawImage函数传递的参数，texture表示image对象，第二个参数和第三个参数都为0，表示我们从图片对象上的左上角（0， 0）开始获取，获取的宽度为texture.width，获取的高度为texture.height。也就是说获取整个图片。
接下来是后面的四个参数：x、y表示从canvas上的x、y坐标处开始绘制，绘制的大小为（512，512）。x和y不同，绘制的其实坐标就不一样。最终，我们可以把所有的全景格子图像绘制到canvas上。并呈现出一张完整的全景纹理图。
这里又要提出：为什么这里设置图片尺寸为512 * 512，而画布大小却是416的倍数（而不是512的倍数）？
google地图返回的图片尺寸都是512 * 512,但由于全景相机拍摄有部分是盲区，所有最后一行图片的底下部分都是黑色的被丢弃的。这部分黑色的高度正好是yc * (512 - 416)。我们截取一张最后一行的全景图片：
很明显的看到底部的黑色区域。如果你手动测试，会发现它的高度正好是yc * (512 – 416)。如果黑色部分被丢弃，算下来，相当于每个图片的大小实际为416。这就是为什么画布画每个格子的尺寸是512。而实际画布大小是416的倍数。
现在一个绘制了全景图的完整canvas已经准备好了，剩下的就是把它当做纹理绘制到球体网格上。当加载绘制完了。会触发onPanoramaLoad事件。该事件注册的 函数为：
loader.onPanoramaLoad = function(){ activeLocation = this.location; mesh.material.uniforms.map.value = new THREE.Texture( this.canvas[0]); mesh.material.uniforms.map.value.needsUpdate = true; showMessage(‘Panorama tiles loaded.<br/>The images are ‘ + this.copyright); showProgress( false ); }
首先需要更新网格上材质的map属性，重新创建一个纹理对象赋值给它。这里直接把canvas作为图片传递给了Texture构造函数。下一行代码设置了map的needsUpdate属性为true，表示渲染时需要重新绘制纹理了。
介绍完了
通过以上的介绍，我们应该能大概明白，全景图究竟是如何通过WebGL呈现出来的。也明白了在渲染过程中的一些全景技术。完整的带还包括了像全景图的旋转等功能，这里就不在做介绍了。需要了解的可以以下地址获取实例完整代码：
https://github.com/heavis/threejs-demo/tree/master/google_street
代码中有我申请的google map api，可直接使用。另外，如果想查看实例，自己还得有个FQ工具。over了！！！
使用WebGL加载Google街景图