ionic（25）：空中全景--pannellum插件在ionic中的使用

1. 在ionic中实现空中全景--使用pannellum插件，pannellum官网，下载插件，然后将插件解压后放到src\assets\lib\目录下，如图：

image.png

2、在项目中引入pannellum的js和css文件

image.png

3、在项目中使用插件加载全景

HTML文件:

    
        空中全景
        {{name}}
    



    

image.png

sass文件:

    #panorama {
        width: 100%;
        height: 100%;
    }

image.png

ts文件：

declare var pannellum: any;//在头部引入全局变量

        //然后在使用插件，具体的参数配置请参看官网对API的介绍
    ionViewDidLoad() {
        pannellum.viewer('panorama', {
            "hfov": 120.0,
            "type": "multires",
            "multiRes": {
                "basePath": this.config.pathPanorama + this.panoName,
                "path": "/%l/%s%y_%x",
                "fallbackPath": "/fallback/%s",
                "extension": "jpg",
                "tileResolution": 512,
                "maxLevel": 5,
                "cubeResolution": 7280
            },
            //"type": "equirectangular",
            //"panorama": "../../R/image/fh1.jpg",
            "compass": false,
            /* "northOffset": 247.5,*/
            "autoLoad": true,
            "showFullscreenCtrl":false
        });
    }

image.png

3、其中basePath是全景图片的文件地址：(例如：)服务器地址+\resource\Panorama\PANO000访问的就是000这个全景

image.png

4、实际在APP中的效果

image.png

5、以上，欢迎交流。