PhotoSphereViewer插件限制水平视角
html页面使用PhotoSphereViewer插件，初始化默认设置longitude_range可以限制水平视角，可以切换到下一张就限制不了了。如果多个场景水平视角限制？
用visible_range插件和setPanorama方法就可以，把源码看下 https://github.com/mistic100/Photo-Sphere-Viewer/releases
全景图Photo Sphere Viewer插件在HTML中的基础使用
可以参考下
https://blog.csdn.net/weixin_48598760/article/details/124387649
要限制多个场景的水平视角，需要在每个场景的初始化代码中设置longitude_range。例如，如果第一个场景的水平视角在-180到180之间，而第二个场景的水平视角在0到360之间
html
<div id="viewer1"></div>
<div id="viewer2"></div>
<script>
var viewer1 = new PhotoSphereViewer.Viewer({
container: 'viewer1',
panorama: 'path/to/your/image1.jpg',
longitude: 180,
latitude: 0,
zoom: 2,
disableDefaultUI: false,
sphereInfo: {
type: 'equirectangular',
width: 800,
height: 400
},
engagement: {
longitude_range: [-180, 180]
}
});
var viewer2 = new PhotoSphereViewer.Viewer({
container: 'viewer2',
panorama: 'path/to/your/image2.jpg',
longitude: 0,
latitude: 0,
zoom: 2,
disableDefaultUI: false,
sphereInfo: {
type: 'equirectangular',
width: 800,
height: 400
},
engagement: {
longitude_range: [0, 360]
}
});
</script>
在 longitude_range 属性中设置限制
初始化中设置longitude_range
对于 PhotoSphereViewer 插件，您可以通过设置 longitude_range 属性来限制水平视角的范围。然而，默认情况下，该属性只会在初始化时生效，并且在切换到下一个场景后不再起作用。
如果您需要多个场景都应用水平视角的限制，您可以使用插件提供的 onpanoramachange 事件来监听场景变化，并在每次切换到新场景时重新设置 longitude_range 的值。
以下是一个示例代码段：
<!DOCTYPE html>
<html>
<head>
<title>PhotoSphereViewer</title>
<link rel="stylesheet" href="photo-sphere-viewer.min.css">
</head>
<body>
<div id="viewer"></div>
<script src="photo-sphere-viewer.min.js"></script>
<script type="text/javascript">
var viewer = new PhotoSphereViewer.Viewer({
container: 'viewer',
panorama: 'scene1.jpg',
longitude_range: [-Math.PI / 2, Math.PI / 2], // 初始水平视角范围
plugins: [
[PhotoSphereViewer.GyroscopePlugin],
[PhotoSphereViewer.MarkersPlugin, {
markers: [
{long: -1.5, lat: 0.5},
{long: -0.8, lat: -0.3}
]
}]
],
navbar_style:{
backgroundColor:'rgba(58,67,77,.7)'
},
onpanoramachange:function () {
// 当切换到新场景时重新设置水平视角范围
viewer.setPanoramaOptions({ longitude_range: [-Math.PI / 2, Math.PI / 2] });
}
});
</script>
</body>
</html>
每一次解答都是一次用心理解的过程，期望对你有所帮助。
参考结合AI智能库，如有帮助，恭请采纳。
如果你希望限制多个场景的水平视角，你需要在初始化时为每一个场景指定不同的longitude_range，提供下面小小示例：
var viewer = new PhotoSphereViewer.Viewer({
container: 'viewer',
panes: [
{
src: 'path/to/image1.jpg',
longitude: 135,
latitude: 30,
scale: 1.5,
longitude_range: [120, 150], // 这是第一个场景的水平视角范围
},
{
src: 'path/to/image2.jpg',
longitude: 45,
latitude: 30,
scale: 1.5,
longitude_range: [30, 70], // 这是第二个场景的水平视角范围
},
]
});
要使用PhotoSphereViewer插件限制水平视角，您可以使用以下代码来实现这个功能：
var viewer = new PhotoSphereViewer({
container: 'your-container-id',
panorama: 'path/to/your/image.jpg',
default_fov: 90, // 设置默认视野角度
// 视野范围限制
longitude_range: [-180, 180], // 设置水平视角范围为-180到180度
// 其他配置项
// ...
});
在上面的代码中，viewer是一个PhotoSphereViewer的实例，your-container-id是一个HTML元素的id，用于容纳全景图。
default_fov属性定义默认的视野角度，可以根据您的需求设置。在这个示例中，将其设置为90度。
longitude_range属性用于限制水平视角范围。在示例中，设置为[-180, 180]，表示水平视角可以在-180到180度之间进行变化。
您可以根据实际需要对其他配置项进行调整，例如背景颜色、导航控件等。
请注意，PhotoSphereViewer插件还有其他可用的配置选项，您可以根据具体需求进行进一步的定制。以上代码示例只是提供了一种限制水平视角的方法，您可以根据插件的文档和示例进行更多的配置和修改。
PhotoSphereViewer插件默认情况下是根据每个场景的longitude_range属性来限制水平视角。如果想要在多个场景中都限制水平视角，可以按照以下步骤进行操作：
在每个场景的配置中设置longitude_range属性来限制水平视角。例如：
javascript
var viewer = new PhotoSphereViewer({
container: 'yourContainerElement',
panorama: 'path/to/your/image.jpg',
longitude_range: [-Math.PI/4, Math.PI/4] // 设置水平视角范围为-45°到45°
});
如果你希望能够在切换到下一张场景时继续限制水平视角，可以监听viewer的panorama-change事件，在事件处理函数中重新设置longitude_range属性。例如：
javascript
viewer.on('panorama-change', function() {
viewer.setPanorama('path/to/next/image.jpg');
viewer.setOptions({ longitude_range: [-Math.PI/4, Math.PI/4] }); // 重新设置水平视角范围
});
通过上述步骤，你可以实现在多个场景中都限制水平视角。每次切换到下一张场景时，都会重新设置水平视角范围。
希望对你有所帮助！如有进一步问题，请随时提问。