全景图站点开发

哈喽哈喽大家好，今天和大家分享一下全景图的相关知识。

全景图可以把周围360度的一切都记录下来，用户可以自由调整观看角度，是一种非常新奇的体验。我打赌你肯定也用过全景图，百度的街景就是全景图，如果你没去过那里，街景可以给你一种身历其境的体验。

如果你没用过百度街景，那也没关系，下面是我发布的一个位于南京元通地铁站的全景图，推荐在电脑的大屏幕上观看，效果还是不错的。

http://tsy.zone/site/pano/59/viewer

这里可以查看更多我发布的全景图

http://tsy.zone

现在你知道了什么是全景图，你是否也想拥有这样来记录你身边的环境的能力呢。

（开始劝退）

首先，你需要一个全景图采集工具，目前民用采集工具很多，价格相对亲民，3000以内有很多选择，适应不同的场景。前几年我用的是insta 360. 价格在3000以内，这款相机前后各有一个鱼眼摄像头，可以拍摄360度的画面，包括照片和视频。

全景视频在观看时可以调整观看角度，也可以用insta的app编排导出成普通视频，但是导出后角度就确定了，不能在调整角度观看了。全景照片是拉伸后平铺的，不配合全景查看器，看起来会有点怪

insta360 的像素不是很高，一般照片在15M左右，成片的解析力一般，但好在它只是用两个摄像头同时拍摄，最后只是用两张照片拼接，拼接的痕迹不明显， 比较适合在室内拍摄，比如很多房产中介，会利用它拍房屋内部，以实现在线看房，不用跑现场，基本能了解房屋大概情况。但现在更多的是利用insta360的全景视频能力，作为摩托车爱好者的行车记录仪，一旦发生交通事故，可以360度无死角的还原事故现场。

另一种就是利用无人机拍摄全景照片，目前民用的无人机中的佼佼者，大疆，有不同价位的无人机可以选择，入门版的 大疆mini2，搞活动时只要2600左右，可以航拍全景照片，无人机拍摄照片时，连续变换相机角度，拍摄10多张照片，然后这些照片在电脑上，利用PT Gui拼接成一张全景图， 大疆mini2 合成的照片像素是9537*4767，照片在15M左右，解析力要明显好于insta360.并且目前PT Gui v12可以自动补天（无人机拍摄全景是丢失部分天空信息的，因为摄像头没法向上拍摄），补天的效果还是很好的。无人机适合拍摄室外场景，不适合拍摄室内，因为无人机拍摄不了顶部的照片，顶部实际是ps出来的。

好了，全景照片的素材我们有了，下面我们来看看怎样查看全景照片。

https://720yun.com/

720云是一个全景照片的门户网站，也是PT Gui的国内代理商，只是正版的PT Gui报价有点贵，1000+，可以在720云购买。

有了全景照片，就可以直接在720云上上传，别人就可以访问到了。

720云上有好多资源，你哪里没去过，检索都能找得到。比如下面的链接是三亚 的红树林 酒店

https://720yun.com/t/32d26jOuy4s?scene_id=424708

下面开始介绍怎样搭建一个720云这样的网站。

首先，你需要一台有外网地址的服务器，不推荐使用花生壳这样服务穿透的代理，浏览太慢，要知道全景照片一张就是10几M，速度太慢加载会非常难受，我是在阿里云上，买了一台ecs，Elastic Compute Service,

弹性计算服务器，用人话讲，就是一个虚拟机集群，你可以根据你的财力，目的，来购买不同配置的虚拟机，流量的大小、cpu的计算能力、存储空间，决定了你的购买价格，目前存储都是很便宜的，贵的是流量，最低配置 3年在1000多块，开发者可以租一个玩玩，除了ecs，你还需要买一个域名，域名的价格有高有低，选个好记、喜欢的就行了。有了域名，还不能直接解析到你的ecs上，你还需要做网站的备案，备案手续比较简单，按照阿里云的要求，手写备案声明和承诺，拍照发给阿里云，1个多月即可完成备案，备案通过后，你可以配置dns把你的域名解析到你的ecs上了。这时访问域名，就可以访问到自己的ecs主机了。

我们知道域名只是通过IP指向了ECS服务器，你的服务器上还需要http服务才能正常使用浏览器访问到。

现在我们部署服务基本都是通过docker来完成的。

还不知道docker是什么的，先来这里补充一下基础知识吧
https://www.runoob.com/docker/docker-tutorial.html

简而言之，docker就是抹平了服务器差异，可以让你在window、linux、unix的服务器上，以相同的方式部署服务，没有docker之前，首先不同的服务器按照http服务也是不同的，而且随着服务安装的越来越过，彼此之间可能会互相影响，服务器容易出现不明问题，比如启动的java服务，不同的服务的java参数不一样，可能引发bug，而且一旦服务中断，还需要守护进程来协调服务。有了docker之后，我们都是通过docker拉取对应的服务镜像，每个镜像的运行都是相互隔离的，互不影响，规范了服务使用方式，通过集群管理，可是更好的实现服务守护和降级。

有了docker，我们需要一个http服务，比如nginx，nginx是linux上非常主流http服务器，具体配置过程请参看下面的文章。

https://www.runoob.com/docker/docker-install-nginx.html

当然这里只是最基础的nginx的配置访问，在实际生产环境中，我们通过用docker-compose来启动服务，

docker-compose通过一个yml文件（docker-compose.yml）来配置镜像信息，包括映射端口信息，挂在的磁盘和文件信息等等，之后通过docker-compose up -d 来启动镜像服务。非常方便。

在nginx的配置文件中，通过指定了 静态站点文件在磁盘上的位置，就是利用location标签实现的，就是当浏览器访问相对路径 /site/时，去工作目录下寻找地/site/index.html文件并返回。这个文件其实是一个SPA文件的索引，通常是利用vue或react开发的一个html站点。

关于VUE的开发基础知识，请在vue的官方站点自行充电

https://cn.vuejs.org/v2/guide/

vue的作者 EvanYou是华裔，Vue的官方文档写的非常好，大家不要在别的地方学习了，官方的文档比任何教程都优秀。