photo-sphere-viewer 加载瓦片，大大优化加载速度_地图,GIS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

photo-sphere-viewer 加载瓦片，大大优化加载速度

来源：作者：woaimoban 类型：图文教程点击次数：发布时间：2024-03-09 17:41:08

photo-sphere-viewer实现全景的方法如下：

01import { onMounted, reactive, ref } from 'vue'
02import { Viewer } from '@photo-sphere-viewer/core'
03import '@photo-sphere-viewer/core/index.css'
04import {MarkersPlugin} from '@photo-sphere-viewer/markers-plugin'
05import '@photo-sphere-viewer/markers-plugin/index.css'
06let viewer = null
07onMounted(() => {
08   viewer = new Viewer({
09       container: document.querySelector("#viewer"),
10       adapter: EquirectangularTilesAdapter,
11       // 一张图，加载非常慢
12       panorama: '/oss/1.jpg',
13       caption: '博物馆',
14       size: {
15           width: "100%",
16           height: "100%",
17       },
18       loadingTxt:"加载中...",
19   })
20})

这个的确能实现，但是由于全景图太大，导致加载速度太慢，所以要用瓦片去实现。点击ImageMagick瓦片切片方式，查看如何用ImageMagick将图片切成瓦片。下面是重新加载瓦片的代码：

1、安装equirectangular-tiles-adapter

`1`	`npm i @photo-sphere-viewer/equirectangular-tiles-adapter@5.7.1`

注意，这里要锁定版本，版本号和您的@photo-sphere-viewer/core一致，否则可能安装失败

2、使用EquirectangularTilesAdapter

01// 加载相关adapter
02import { EquirectangularTilesAdapter } from '@photo-sphere-viewer/equirectangular-tiles-adapter'
03onMounted(() => {
04   viewer = new Viewer({
05       container: document.querySelector("#viewer"),
06       adapter: EquirectangularTilesAdapter,
07       panorama: {
08       // 原始图片尺寸
09        width: 8192,
10   cols: 32,
11   rows: 16,
12   // 这里为压缩后的全景图，用来首次加载
13   baseUrl: `./oss/s1.jpg`,
14   // 这里是加载当前场景的瓦片
15   tileUrl: (col, row) => {
16   return `/oss/1_${col}_${row}.jpg`
17   }
18        },
19       caption: '博物馆',
20       size: {
21           width: "100%",
22           height: "100%",
23       },
24       loadingTxt:"加载中...",
25   })
26})

这时，加载速度明显快多了，看下效果图：

全景图加载效果图