一个极简的易览云风格 H5 全景应用源码，基于 photo-sphere-viewer 实现（轻量、无需后端，仅需全景图片即可运行），包含核心的全景展示、拖拽旋转、缩放功能，代码简洁易懂，可直接部署使用：
<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>易览云极简全景系统</title>
<!-- 引入全景核心库 -->
<ｓｃｒｉｐｔ src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4.8.0/dist/photo-sphere-viewer.min.js"></ｓｃｒｉｐｔ>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4.8.0/dist/photo-sphere-viewer.min.css">
<style>
/* 全屏样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; overflow: hidden; }
#panorama-container { width: 100%; height: 100%; }
/* 简单控制栏样式 */
.psv-controls {
bottom: 30px !important;
left: 50% !important;
transform: translateX(-50%);
background: rgba(0,0,0,0.5) !important;
border-radius: 30px !important;
padding: 8px 15px !important;
}
</style></head><body>
<!-- 全景容器 -->
<div id="panorama-container"></div>
<ｓｃｒｉｐｔ>
// 初始化全景 viewer
const viewer = new PhotoSphereViewer.Viewer({
// 容器ID
container: 'panorama-container',
// 全景图片（替换为你的全景图URL，支持JPG/PNG格式，建议使用2:1比例图片）
panorama: 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4.8.0/example/assets/pano.jpg',
// 配置参数
defaultLat: 0, // 默认纬度（上下视角）
defaultLng: 0, // 默认经度（左右视角）
defaultZoom: 1, // 默认缩放级别（1-5）
minZoom: 0.5, // 最小缩放
maxZoom: 3, // 最大缩放
// 控制选项
controls: {
zoom: true, // 显示缩放按钮
fullscreen: true, // 显示全屏按钮
gyroscope: true, // 支持手机陀螺仪（需要HTTPS或本地环境）
},
// 加载提示
loadingTxt: '正在加载全景...',
// 错误处理
errorTxt: '全景图片加载失败，请检查链接',
});
// 可选：添加简单交互事件
viewer.on('ready', () => {
console.log('全景加载完成');
});
viewer.on('click', (e) => {
console.log('点击位置：', e.lat, e.lng);
// 可在此添加点击热点逻辑
});
</ｓｃｒｉｐｔ></body></html>- 零后端依赖：纯前端 H5，无需服务器，直接打开 HTML 文件即可运行
- 核心功能齐全：
- 鼠标 / 触摸拖拽旋转全景
- 滚轮 / 双指缩放
- 手机陀螺仪控制（HTTPS 环境下生效）
- 全屏切换
- 加载 / 错误提示
- 轻量化：依赖库总大小 < 500KB，加载快速
- 响应式：适配手机、平板、电脑等所有设备
- 复制上面的代码，保存为
index.html 文件 - 替换代码中的全景图片 URL（
panorama 参数）：- 可以使用自己的全景图（建议 2:1 比例，如 4096x2048 像素）
- 支持本地图片（将图片放在同一文件夹，直接写文件名，如
panorama: 'my-pano.jpg'）
- 用浏览器打开
index.html 文件，即可看到全景效果
- 添加热点标记：
// 在 viewer 初始化后添加viewer.addMarker({
id: 'hotspot1',
position: { lat: 0, lng: 90 }, // 热点位置（纬度/经度）
html: '<div style="width:20px;height:20px;background:red;border-radius:50%;cursor:pointer;"></div>',
anchor: 'center center',
tooltip: '这是一个热点',});- 切换全景图：
// 按钮点击切换（需先添加按钮元素）document.getElementById('change-pano').addEventListener('click', () => {
viewer.setPanorama('new-pano.jpg');});- 自定义控制栏：修改
controls 参数，可添加 / 隐藏功能按钮
这个源码是最简化的全景应用实现，保留了核心功能，同时代码结构清晰，易于修改和扩展，完全符合 "易览云全景系统" 的轻量使用场景。
易览云720VR全景导览系统（即360度全景影像，涵盖水平360°和垂直180°视角）通过捕捉真实场景的全维度画面，结合交互操作（如拖拽、缩放、视角切换），为用户提供高度沉浸的“临场感”体验。其应用领域广泛，覆盖消费、工业、教育、文旅等多个场景，以下是主要应用方向及具体场景：
虚拟样板间、
二手房/租房展示、
装修设计预览、
景区全景导览、
文化遗产复原、
酒店/民宿引流、
工厂/产线展示、
企业园区/展厅、
产品细节展示、
虚拟实验与实训、
历史与文化场景复原、
远程教学互动、
工地进度管理、
设备维护与巡检、
安全培训与演练......
易览云720VR全景系统将不断把全景和导览相结合，让用户不再需要购买昂贵的会员、轻松搭建自己的720°全景，可用于公众号、小程序、app等。
购买者可用大疆mini4pro、air3、insta360等设备拍摄全景，也可以在淘宝搜索如：青岛全景拍摄
重要说明：
本系统只有单开版、基于微擎框架、不开源；php7.4、mysql5.6以上；需要使用微信的一键导航的、必须对接入服务号。
因为大部分服务器配置不足以完成切图，目前只支持单张图、需要控制在10-30M左右、如果需要切图的需要软件配个然后上传到服务器或者第三方储存。
需要小程序的我们会协助打包发布、小程序打包：https://s.w7.cc/module-31796.html
首页列表
单场景
多场景
功能说明：
1、瓦片切图
暂不提供在线切图方式，提供切图软件，可把12000x6000像素的大图切成瓦片图、也可以单图（单图请使用6000x3000像素、大小控制在3-5m内）
2、导航导览
可对全景上的景点（热点）进行标注，添加电话、地理位置坐标、图文并茂的简介等
3、多语言讲解
可以添加中英等mp3文件，切换景点即自动关闭
4、自定义导航
右侧支持自定义导航，可用于返回指定页面
5、多场景选择
由主场景引导，可进入多场景选择，比如：博物馆外部进入内容等
6、首页设置
支持一排两个和一排一个全景的列表界面、
7、天气预报
该插件可以开启或关闭
8、景点评论和留言
该插件可以开启或关闭
9、文章公告
支持发布文章、公告（文章分类链接可用自行增加在右侧自定义导航里面）
更多功能期待您的建议
前台演示：
首页样式
全景样式1
全景样式2
后台演示：
基础设置
全景列表设置
多场景设置
热点设置
标签:
暂无
