720全景云系统落地：PHP环境搭建、切片流水线与小程序PC双端接入

简介：这是一套面向全景内容创业者与开发者的720全景云系统源码，支持生成微信小程序并自带PC端管理后台，适合需要快速搭建全景展示平台、实现多端发布的技术人员。系统基于PHP开发，推荐在Linux+Nginx环境下部署，需PHP5.3+、MySQL5.5以上，并配合七牛或阿里云OSS存储，第三方登录与评论功能还需认证公众号接口。压缩包共约2000个文件，整体124.5MB，其中651个php文件构成核心业务逻辑，249个js与68个css负责前端交互与样式，911个png、193个gif及47个jpg提供全景贴图与界面素材，另有118个xml、20个tpl模板及krpano相关工具文件支撑全景漫游与多分辨率发布。资源内附安装教程，目录结构完整，便于二次开发与私有化部署。目前已有456人学习下载，适合具备一定PHP与服务器运维基础、希望低成本切入全景行业的读者参考使用。

1. 全景云系统落地：从 PHP 环境到小程序与 PC 端的完整链路

很多做全景展示的团队都遇到过这种尴尬：本地用工具拼出来的全景页面，发给客户后要么加载卡顿，要么在微信里打不开，想生成小程序和 PC 端站点更是无从下手。这套「720 全景云系统」解决的正是这个问题——它把全景图切片、多分辨率加载、小程序端渲染和 PC 端展示打包成一条可复用的流水线，后端基于 PHP 5.3+ 与 MySQL 5.5+，前端同时输出小程序和 PC 网页两套入口。适合谁？做房产看房、酒店展示、景区导览、展厅数字化的外包团队和独立开发者，尤其是那些不想从零写切片算法、又需要交付小程序和 PC 双端的人。它和网上流传的「全景通 + phpstudy」那类一键包最大的区别在于：官方明确建议跑在 Linux + Nginx 下，安全性和稳定性完全不是一个量级。下面按「环境怎么搭 → 切片怎么跑 → 双端怎么接 → 坑在哪」的顺序拆开讲。

2. 环境选型与部署：为什么 Linux + Nginx 比 phpstudy 更值得折腾

2.1 PHP 5.3+ 与 MySQL 5.5+ 的真实含义

系统要求写的是 PHP 5.3+、MySQL 5.5+，这个「+」很容易被误读成「随便装个新版就行」。实际落地时，PHP 7.x 对老代码里的mysql_*函数和部分正则写法兼容性很差，很多全景系统里的切片回调脚本会直接报 500。我一般会选 PHP 5.6 或 7.0 这两个版本，5.6 兼容性最好，7.0 性能提升明显但需要确认源码里没有已废弃函数。MySQL 5.5+ 相对宽松，5.7 也能跑，但要注意sql_mode里的ONLY_FULL_GROUP_BY在 5.7 默认开启，老系统的 GROUP BY 查询会直接报错。

存储环境是这套系统的一个硬性依赖：需要七牛或阿里云 OSS。原因很简单，全景切片动辄几百 MB 到几个 GB，全放本地磁盘既拖慢加载又占带宽，云存储 + CDN 才是正常做法。如果你只是想本地测试，可以先不接云存储，但正式上线前必须配好，否则小程序端的图片加载会非常慢。

提示：源码包里那批.bat文件（MAKE PANO (MULTIRES) droplet.bat、Convert CUBE to SPHERE droplet.bat等）是 Krpano 的切片工具脚本，Windows 下双击即可运行，但它们依赖 Krpano 的krpanotools可执行文件，不是 PHP 的一部分，别搞混。

2.2 Linux + Nginx 环境搭建步骤

推荐 Ubuntu 20.04 或 CentOS 7，下面以 Ubuntu 20.04 + Nginx + PHP 5.6 为例。先装基础环境：

# 更新源并安装 Nginx、MySQL、PHP 5.6 及常用扩展 sudo apt update sudo apt install -y nginx mysql-server sudo add-apt-repository -y ppa:ondrej/php sudo apt update sudo apt install -y php5.6 php5.6-fpm php5.6-mysql php5.6-gd php5.6-curl php5.6-mbstring php5.6-xml

这段命令做了三件事：装 Nginx 做 Web 服务器，装 MySQL 做数据存储，通过 ondrej PPA 装 PHP 5.6 及全景系统必需的扩展。php5.6-gd用于图片处理，php5.6-curl用于调用七牛/OSS 接口，php5.6-mbstring和php5.6-xml是很多 PHP 框架的基础依赖，缺了会白屏。

接着配置 Nginx 站点：

server { listen 80; server_name your-domain.com; root /var/www/pano; index index.php index.html; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/var/run/php/php5.6-fpm.sock; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } # 全景切片文件较大，放宽上传限制 client_max_body_size 200m; }

try_files是伪静态规则，全景系统的路由依赖它；fastcgi_pass指向 PHP 5.6 的 socket，版本写错会 502；client_max_body_size必须调大，默认 1MB 传全景图必失败。改完执行sudo nginx -t && sudo systemctl reload nginx生效。

2.3 数据库初始化与配置文件对接

建库建用户：

CREATE DATABASE pano_cloud DEFAULT CHARACTER SET utf8mb4; CREATE USER 'pano'@'localhost' IDENTIFIED BY 'StrongPass123!'; GRANT ALL PRIVILEGES ON pano_cloud.* TO 'pano'@'localhost'; FLUSH PRIVILEGES;

字符集用utf8mb4而不是utf8，因为全景项目名称里常有 emoji 或特殊符号，utf8存进去会变问号。导入源码里的.sql文件后，找到系统的数据库配置文件（通常在config/或application/database.php），把 host、user、password、dbname 四项对上。这一步最常见的翻车是密码里带#或@，在配置文件里没转义导致连接失败，建议密码只用字母数字加下划线。

3. 全景切片流水线：那批 .bat 脚本到底怎么用

3.1 Krpano droplet 脚本的分类与选择

源码包里那串.bat文件不是随便放的，它们对应不同的全景输入格式和输出需求。先理清分类：

选哪个取决于交付形态：单张全景展示用MAKE PANO (NORMAL)，多分辨率（手机端加载小图、PC 端加载大图）用MULTIRES，多个场景串起来做导览用VTOUR。MULTIRES是现在的主流选择，因为它能根据设备屏幕自动选层级，小程序端尤其需要。

3.2 切片操作与参数调整

把全景原图拖到对应的.bat文件上即可运行，脚本会调用krpanotools生成切片。以MAKE PANO (MULTIRES) droplet.bat为例，运行后会生成一个以图片名命名的文件夹，里面有pano.xml、tiles/目录和预览图。关键参数在生成的 XML 里：

<image> <cube url="tiles/%l/%v/%h.jpg" multires="512,1024,2048" /> </image>

multires="512,1024,2048"表示三个分辨率层级，数字是每层的立方体面边长。层级越多文件越大但适配越广，一般 3 层够用。如果切片后手机端加载还是慢，把最低层级从 512 降到 256，首屏会明显变快。

注意：.bat脚本在 Windows 下双击运行，但生成的切片文件要上传到 Linux 服务器的 Web 目录或云存储。别在服务器上直接跑.bat，Linux 不认，需要用 Krpano 的 Linux 版命令行工具，或者本地切好再上传。

3.3 切片文件与云存储的对接

切片生成后，tiles/目录和pano.xml需要放到能被 Web 访问的位置。如果接七牛或 OSS，常见做法是用官方 SDK 批量上传：

# 以七牛为例，批量上传切片目录 from qiniu import Auth, put_file, etag import os access_key = 'your_ak' secret_key = 'your_sk' q = Auth(access_key, secret_key) bucket_name = 'pano-bucket' def upload_dir(local_dir, remote_prefix): for root, dirs, files in os.walk(local_dir): for f in files: local_path = os.path.join(root, f) # 保持目录结构作为云端 key remote_key = remote_prefix + os.path.relpath(local_path, local_dir).replace('\\', '/') token = q.upload_token(bucket_name, remote_key, 3600) ret, info = put_file(token, remote_key, local_path) print(remote_key, info.status_code) upload_dir('./tiles', 'pano/tiles/')

upload_token的 3600 是凭证有效期（秒），批量上传时每文件单独生成更稳妥。remote_key保持和本地一致的目录结构，这样pano.xml里的相对路径不用改就能直接访问云端。上传完把 XML 里的url前缀改成 CDN 域名即可。

4. 小程序与 PC 端双端接入：登录、手机号与渲染

4.1 小程序端全景渲染与登录流程

小程序端展示全景，主流做法是用web-view组件加载 H5 全景页，或者用原生canvas渲染。这套系统生成的是标准 Krpano 输出，web-view是最省事的方案：

// 小程序页面中嵌入全景 H5 Page({ data: { panoUrl: '' }, onLoad(options) { // 从后端换取带签名的全景地址 wx.request({ url: 'https://your-domain.com/api/pano/token', data: { sceneId: options.id }, success: (res) => { this.setData({ panoUrl: res.data.url }) } }) } })

web-view加载的域名必须在小程序后台配置为业务域名，否则直接白屏。sceneId从页面参数传入，后端返回带时效签名的 URL，防止全景资源被随意盗链。登录环节，如果需要获取用户手机号，必须用button组件的open-type="getPhoneNumber"，且小程序需已认证：

// 获取手机号并提交后端解密 onGetPhone(e) { if (e.detail.code) { wx.request({ url: 'https://your-domain.com/api/user/phone', method: 'POST', data: { code: e.detail.code }, success: (res) => { /* 绑定成功 */ } }) } }

e.detail.code是动态令牌，后端拿它去微信接口换手机号，前端拿不到明文，这是合规要求。很多团队在这里翻车是因为用了旧的encryptedData方案，新版本基础库已经不支持。

4.2 PC 端展示与第三方登录

PC 端本质是一个普通 Web 页面，Nginx 指向全景系统的public/目录即可。第三方登录（微信扫码、QQ 登录）需要认证过的公众号或开放平台应用，拿到appid和secret后填进系统配置。回调地址必须和开放平台后台登记的一致，差一个斜杠都会报redirect_uri错误。

PC 端和小程序端共用同一套切片资源，区别只在加载策略：PC 端带宽大，可以直接加载高层级；小程序端受限于网络，建议在 XML 里配置按屏幕宽度自动选层。这样一套切片两端复用，是这套系统比较实用的地方。

5. 避坑与排查：五个真实踩过的坑

5.1 上传全景图报 413 或 502

现象：后台上传全景原图，浏览器转圈后报 413，或者直接 502。 原因：Nginx 的client_max_body_size默认 1MB，PHP 的upload_max_filesize和post_max_size默认也偏小。 解决：Nginx 里加client_max_body_size 200m;，PHP 的php.ini里把upload_max_filesize和post_max_size都改成 200M，重启 php-fpm 和 nginx。

5.2 小程序 web-view 白屏

现象：小程序里全景页一片空白，控制台提示域名不合法。 原因：web-view加载的域名没在小程序后台「开发设置 → 业务域名」里配置，或者配置了但没上传校验文件。 解决：把全景 H5 的域名加进业务域名，下载校验文件放到该域名根目录，确保能通过https://域名/校验文件名访问。

5.3 切片上传云存储后图片 404

现象：本地能看的全景，上传七牛/OSS 后部分瓦片 404。 原因：上传时目录结构没保持，或者文件名里的特殊字符被转义。 解决：上传脚本里用os.path.relpath保持相对路径，文件名避免中文和空格，统一用数字和字母。

5.4 MySQL 5.7 下 GROUP BY 报错

现象：后台统计页面报this is incompatible with sql_mode=only_full_group_by。 原因：MySQL 5.7 默认开启ONLY_FULL_GROUP_BY，老系统的查询没写全字段。 解决：临时改sql_mode去掉该项，或永久在my.cnf里设置sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION，重启 MySQL。

5.5 获取手机号返回 47001

现象：小程序调getPhoneNumber后后端换手机号报 47001。 原因：用的是旧的encryptedData+iv方案，新版接口已改为code换取。 解决：前端改用e.detail.code，后端调phonenumber.getPhoneNumber接口传code，别再走解密老路。

6. 进阶技巧：用多分辨率层级把首屏加载压到 1 秒内

全景项目交付后最常被客户投诉的就是「打开慢」。我自己的习惯是，任何全景项目上线前都强制走一遍多分辨率层级调优。核心思路是：让手机端首屏只加载最低层级，用户转动视角时再异步加载高层级。

具体做法是在 Krpano 的 XML 里配置level和preview：

<image> <preview url="preview.jpg" /> <cube url="tiles/%l/%v/%h.jpg" multires="256,512,1024,2048" /> </image>

preview.jpg是一张几十 KB 的模糊预览图，先铺满屏幕，用户感知上「秒开」；multires里最低层 256 保证首屏快速加载，高层级按需拉取。实测在 4G 网络下，首屏从 3 秒降到 1 秒以内。

另一个技巧是切片时开启 Krpano 的jpegquality参数，把默认的 90 降到 80，文件体积能减 30% 左右，肉眼几乎看不出差别。还有，云存储一定要开 CDN 加速，七牛和 OSS 都支持，切片走 CDN 后加载速度提升非常明显。

验证方法很简单：用 Chrome DevTools 的 Network 面板，把网络限速到 Fast 3G，刷新全景页，看首屏图片什么时候出现。如果超过 2 秒，就回去检查 preview 图是不是太大、multires 最低层是不是设高了。

从那以后我每次交付全景项目，都会先在限速环境下跑一遍首屏，确认 1 秒内出图才敢发给客户。希望帮到你。

本文还有配套的精品资源，点击获取