安装pannellum.js

npm install pannellum  --save

代码里引用pannellum

import 'pannellum/build/pannellum.js'; // 引入Pannellum的JS文件
import 'pannellum/build/pannellum.css'; // 引入Pannellum的CSS文件（可选）

前端定义容器

<template>
  <div id="pannellumViewer"></div>
</template>

初始化pannellum

let pannellumViewer = pannellum.viewer('pannellumViewer', {
    type: "equirectangular",
    panorama: panorama, //全景图(要用一张完整的全景图，不是切片)
    preview: panorama, //加载时的背景图
    autoLoad: true, //自动加载
    pitch: pitch,//上下角度
    yaw: yaw,//左右旋转
    hfov: hfov,//视角远近
    showControls: false,//容器自带的控件显示隐藏
    hotSpots:[],//初始化热点(可以用容器对象API:addHotSpot()添加)
});

热点(hotSpots)对象属性

let object = {
    id: item.id,//绑定id
    sceneId:null,//场景id(对应场景下显示热点)
    pitch: item.pitch,//全景图中上下角度位置
    yaw: item.yaw,//全景图中左右旋转位置
    cssClass: "resMarker",//自定义类名
    createTooltipFunc: createLabel,//自定义热点内容函数，
    createTooltipArgs: item,//自定义内容函数传递的参数
    clickHandlerFunc: hotSpotsClickMessage,//自定义点击事件函数
    clickHandlerArgs: {
        id: item.type + index,
        type: item.type,
        name: item.title,
        formid: item.formid
    },//自定义点击事件函数传递参数
    URL:'url',//属性自带的链接属性，默认添加点击事件，点击热点后打开新窗口
}

补充

addHotSpot():传入热点对象

removeHotSpot(id,sceneId):传递sceneId,优先删除场景下的id,没有的话寻找当前场景的id

官方pannellum没有提供一次删除所有热点的方法，可以通过容器对象配置项获取当前热点信息

let hotSpots = cloneDeep(pannellumViewer.getConfig().hotSpots);
//深拷贝，循环执行删除操作不会被索引影响导致少删除
if (hotSpots) {//初始化时没有配置热点默认是undefined hotSpots.forEach((item) => { console.log(item) window.pannellum.removeHotSpot(item.id); }) }