当前位置：首页 > news >正文

Photo Sphere Viewer 的迷你地图插件map-plugin

news 来源：原创 2025/5/24 10:13:24

Photo Sphere Viewer 的 map-plugin 是一个用于在全景查看器中添加迷你地图（缩略图地图）的插件，帮助用户快速了解当前全景视图在更大场景中的位置和方向。以下是关于该插件的详细说明：

核心功能

位置可视化
在全景查看器中显示一个小型地图，标记当前全景视角的中心点，用户可通过地图快速定位自身在全景空间中的位置。
交互式导航
支持通过点击迷你地图上的不同区域，直接跳转到对应位置的全景视图，实现快速导航。
方向同步
迷你地图的朝向与全景视角同步旋转，确保用户始终能直观理解当前视角的方位关系。

配置选项

地图图像
通过 imageUrl 指定迷你地图的背景图片（如平面图、卫星图等），需确保图片与全景场景的坐标系匹配。
中心点定位
使用 center 参数定义全景视角在迷你地图中的初始位置（以像素坐标表示），例如：

center: { x: 100, y: 200 }
旋转控制
通过 rotation 调整迷你地图的初始旋转角度（支持度数或弧度），确保与全景视角的初始方向一致。
尺寸与样式
自定义迷你地图的尺寸（如 200px）、位置（如 bottom-left）及控件样式（如按钮、边框等），以适配不同界面设计。

选项	类型	描述	默认值
imageUrl	string	地图图片的URL	必填
size	object	地图尺寸 {width, height}	{width: 200, height: 100}
position	string	地图位置 ('top left', 'top right', 'bottom left', 'bottom right')	'bottom right'
overlayColor	string	地图背景颜色	'rgba(0, 0, 0, 0.7)'
overlayOpacity	number	背景透明度	0.7
backgroundUrl	string	背景图片URL	null
backgroundSize	string	背景图片大小	'cover'
rectangleColor	string	视角矩形颜色	'rgba(255, 0, 0, 0.5)'
rectangleStroke	number	视角矩形边框宽度	2
rectangleColorHover	string	鼠标悬停时矩形颜色	'rgba(255, 0, 0, 0.7)'

使用示例

import { Viewer } from 'photo-sphere-viewer';
import { MapPlugin } from '@photo-sphere-viewer/map-plugin';const viewer = new Viewer({container: document.querySelector('#viewer'),panorama: 'path/to/panorama.jpg',plugins: [[MapPlugin,{imageUrl: 'path/to/map.jpg',center: { x: 150, y: 100 },rotation: '0deg',size: '150px',position: 'bottom-right',}]]
});