近期有个项目要用到全景图，就开始研究做了一个demo，每次使用一个新东西，迎接的都是挑战

本案例是在uniapp中引入全景图,插入markers节点：

1. 下载依赖包

npm install photo-sphere-viewer

安装之后下载下来的包含 three.js  uevent.js  photo-sphere-viewer

注： 可以不用在当前项目下创建node_modules，只需要把用到的文件复制到项目目录下即可

2.uniapp中使用es6引入外部文件

page.vue 中

引入PhotoSphereViewer，MarkersPlugin，GyroscopePlugin,StereoPlugin，最新PhotoSphereViewer中没有MarkersPlugin，GyroscopePlugin,StereoPlugin，使用时需要单独引入，视情况而定

import { Viewer as PhotoSphereViewer } from 'photo-sphere-viewer';
    import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
    import 'photo-sphere-viewer/dist/plugins/markers.css';
    var viewer = new PhotoSphereViewer({
                    container: ‘container’, //容器
                    panorama: ‘urls’, //拼合图片路径
                    size: {
                        width: '100%',
                        height: screen.availHeight
                    },
                    defaultZoomLvl: 50，
                    navbar        : [
                          'autorotate', 'zoom', 'download', 'markers', 'markersList','caption', 'fullscreen',
                    ],
                    plugins: [
                          // GyroscopePlugin,   //根据需要引入
                          // StereoPlugin,
                          [MarkersPlugin, {
                            markers: (function () {
                              var a = []；                       
                               a.push({
                                  id       : 'circle',
                                  tooltip  : 'A circle of radius 30',
                                  circle   : 30,
                                  svgStyle : {
                                    fill       : 'rgba(255,255,0,0.3)',
                                    stroke     : 'yellow',
                                    strokeWidth: '2px',
                                  },
                                  longitude: -0.5,
                                  latitude : -0.28,
                                  anchor   : 'center right',
                                });
                      
                                a.push({
                                  id       : 'ellipse',
                                  tooltip  : 'An ellipse of radius 60/30',
                                  ellipse  : [60, 30],
                                  svgStyle : {
                                    fill       : 'rgba(255,255,0,0.3)',
                                    stroke     : 'yellow',
                                    strokeWidth: '2px',
                                  },
                                  longitude: -0.5,
                                  latitude : -0.28,
                                  anchor   : 'center left',
                                });
                              
                              return a;
                            }())
                          }],
                        ]
                })

3.获取MarkersPlugin 

const markersPlugin  = viewer.getPlugin(MarkersPlugin);

markersPlugin.addMarker({id: 'new-marker',longitude: '45deg',latitude: '0deg',image: 'assets/pin-red.png',});

markersPlugin.on('select-marker', (e, marker) => {markersPlugin.updateMarker({id: marker.id,image: 'assets/pin-blue.png'});});

4.更多使用 还请看官网案例

https://photo-sphere-viewer.js.org

https://github.com/mistic100/Photo-Sphere-Viewer/issues/377

此版本和上一版本变化比较大，没有头绪时可以看下迭代日志