- 安装 photo-sphere-viewer 运行终端命令
npm install photo-sphere-viewer
- 安装后在页面内引入
// 主体 import { Viewer } from "photo-sphere-viewer"; import "photo-sphere-viewer/dist/photo-sphere-viewer.css"; // 点位插件 import MarkersPlugin from "photo-sphere-viewer/dist/plugins/markers"; import "photo-sphere-viewer/dist/plugins/markers.css";
- 设置标签容器
<div id="viewer"></div>
- 初始化配置
- vue项目需要在 onMounted methods 生命周期中创建; 也就是dom渲染之后使用
// 以下版本为 v4.8.1 官方文档 https://photo-sphere-viewer-4.netlify.app/guide/config.html let viewer = new Viewer({ // *****初始配置******* container: document.querySelector("#viewer"), // 容器 panorama: img, // 图片地址 可用数组六个图片 // 设置图片标题 caption: "这是一个标题", // 设置图片描述 description: "这是一个描述,xxxxxxxxxxxxxxxxx", // 下载图片的链接地址 // downloadUrl: img, // 设置图片高度 size: { width: "100%", height: "100%", }, /* 功能按钮显示 可包含以下选项 zoomOut // 缩小 zoomRange // 缩放范围 zoomIn // 放大 zoom = zoomOut + zoomRange + zoomIn // 缩放 = 缩小 + 缩放范围 + 放大 moveLeft // 左移 moveRight // 右移 moveTop // 上移 moveDown // 下移 move = moveLeft + moveRight + moveTop + moveDown // 移动 = 左移 + 右移 + 上移 + 下移 download // 下载 description // 描述 caption // 标题 fullscreen // 全屏 */ navbar: [ "autorotate", // 自动旋转按钮 "zoom", // 缩放按钮 "caption", // 标题按钮 "fullscreen", // 全屏按钮 "download", // 下载按钮 "description", // 描述按钮 // 自定义按钮 /* { id: "my-button", content: "<svg...>", title: "Hello world", className: "custom-button", onClick: viewer => { alert("Hello from custom button"); }, }, */ ], // minFov: 30, // 最小视角 1-30之间 默认30 // maxFov: 90, // 最大视角 minFov-180之间 默认90 defaultZoomLvl: 1, // 初始缩放比例 在minFov和maxFov之间 默认50 // fisheye: true, // 鱼眼效果 默认false 此设置可能会导致部分适配错误 // defaultLong: 0, // 初始水平角度 0-360之间 默认0 // defaultLat: 0, // 初始垂直角度 -90-90之间 默认0 autorotateDelay: 800, // 自动旋转延迟时间 默认3000 设置后在延迟时间后自动旋转 // autorotateIdle: 3000, // 自动旋转空闲时间 默认3000 设置后在无操作时间后开始自动旋转 // autorotateSpeed: 0.5, // 自动旋转速度 默认0.5 设置负数可反向旋转 // autorotateLat: 0, // 自动旋转垂直角度 -90-90之间 默认0 // autorotateZoomLvl: 1, // v4.7.3 自动旋转缩放比例 在minFov和maxFov之间 默认50 lang: { // 语言设置 autorotate: "自动旋转", // 自动旋转按钮 zoom: "缩放", // 缩放按钮 zoomOut: "缩小", // 缩小 zoomIn: "放大", // 放大 move: "移动", // 移动 download: "下载", // 下载 fullscreen: "全屏", // 全屏 menu: "菜单", // 菜单 twoFingers: "双指导航", // 双指导航 ctrlZoom: "ctrl + 滚轮缩放", // ctrl + 滚轮缩放 loadError: "The panorama can't be loaded", // 图片加载失败 }, // loadingImg: "", // 显示在加载圆圈中心的图像的路径 // loadingTxt: "Loading...", // 显示在加载圆圈中心的文本 // mousewheel: true, // 鼠标滚轮缩放 默认true // mousemove: true, // 鼠标手指双指移动缩放 默认true mousewheelCtrlKey: false, // 是否需要使用ctrl键缩放全景。默认 false 。如果启用，当用户没有按下ctrl键时，将显示一个覆盖，要求用户使用ctrl +滚动 默认 false touchmoveTwoFingers: true, // 是否使用两个手指移动全景。启用后一个手指触摸会提示使用双指才行,默认 false // *****高级配置******* // overlay: true, // 是否显示覆盖层 默认true // overlayOpacity: 0.5, // 覆盖层透明度 0-1之间 默认0.5 /* sphereCorrection: { // 是否启用 3D 球体校正 默认false pan: 0, // 水平角度 -180-180之间 默认0 tilt: 0, // 垂直角度 -90-90之间 默认0 roll: 0, // 旋转角度 -180-180之间 默认0 }, */ // moveSpeed: 1, // 移动速度 0-1之间 默认1 // zoomSpeed: 1, // 缩放速度 0-1之间 默认1 // useXmpData: true, // 是否使用XMP数据 默认true /* panoData: { // 全景数据 // fullwidth: 4000, // 全景图片宽度 // fullheight: 2000, // 全景图片高度 // croppedwidth: 4000, // 全景图片裁剪宽度 // croppedheight: 2000, // 全景图片裁剪高度 // croppedx: 0, // 全景图片裁剪x坐标 // croppedy: 0, // 全景图片裁剪y坐标 // poseHeadingDegrees: 0, // 全景图片水平角度 // posePitchDegrees: 0, // 全景图片垂直角度 // poseRollDegrees: 0, // 全景图片旋转角度 }, */ // 也可以是个函数 /* panoData: image => ({ fullWidth: image.width, fullHeight: Math.round(image.width / 2), croppedWidth: image.width, croppedHeight: image.height, croppedX: 0, croppedY: Math.round( (image.width / 2 - image.height) / 2, ), }), */ /* requestHeaders: { // 加载图片时请求头 // 'X-Requested-With': 'XMLHttpRequest', // header: value, }, // 也可以是个函数 requestHeaders: url => ({ header: value, }), */ // canvasBackground: "#000", // 画布背景色 // moveInertia: true, // 是否启用惯性移动 默认true // withCredentials: false, // 是否允许跨域请求 默认false // keyboard: true, // boolean | object 是否启用键盘控制 默认true /* keyboard: { 'ArrowUp': 'rotateLatitudeUp', // 上 'ArrowDown': 'rotateLatitudeDown', // 下 'ArrowRight': 'rotateLongitudeRight', // 右 'ArrowLeft': 'rotateLongitudeLeft', // 左 'PageUp': 'zoomIn', // 上一页 'PageDown': 'zoomOut', // 下一页 '+': 'zoomIn', // 放大 '-': 'zoomOut', // 缩小 ' ': 'toggleAutorotate', // 空格 } */ // 启用的插件列表 官方文档 https://photo-sphere-viewer-4.netlify.app/plugins/ /* plugins: [], */ }); // *****事件配置******* // 全景图加载完成事件 viewer.on("ready", () => { // viewer.once("ready", () => { // 只执行一次 console.log("ready"); // *****事件触发******* // viewer.animate({longitude: Math.PI / 2,}).then(() => {/* 动画完成之后 */}); // 自定义动画效果 // viewer.getPosition():Position // 获取视图的当前位置 // viewer.getZoomLevel():number; // 获取视图的缩放比例 // viewer.rotate({ x: 1500, y: 1000 }); // 设置旋转 // viewer.setOption('fisheye', true); // 设置配置项 不能更改 panorama, panoData, container, adapter, plugins // viewer.setOption({fisheye: true}); // 可设置多个配置项 // viewer.setPanorama(panorama[, options]): Promise; // 设置全景图 viewer.setPanorama('image.jpg').then(() => /* update complete */); // zoom(level) | zoomIn() | zoomOut() 更改缩放比例 viewer.zoom(50) // viewer.navbar.getButton('my-button').show() // 设置按钮显示 }); // click dblclick 点击事件 // viewer.on("click" /* click 单击 || dblclick 双击 */, () => {}); // position-updated 位置更新事件 /* viewer.on("position-updated", (e, position) => { console.log(`new position is longitude: ${position.longitude} latitude: ${position.latitude}`); }); */ // zoom-updated 缩放更新事件 /* viewer.on("zoom-updated", (e, level) => { console.log(`new zoom level is ${level}`); }); */
初始化完成