720全景地图组件：

介绍：

基于真实场景的全景图，低成本实现类数字孪生的应用，展示设备资产信息、运行状态、实时预警等。

• 支持等距矩形投影全景图（后续会按需扩展支持其他投影全景图）
• 支持自主标注点位、点位和真实业务数据绑定。
• 支持点击事件、鼠标移入移出事件，可以和其他组件交互联动。
• 支持自动旋转巡视，逐个设备点位巡视。
• 支持逐个设备自动巡视时触发交互。
• 支持个性化设置点位的样式、提示窗口样式。
• 更多实用的能力，敬请期待......

1. 添加组件

2. 配置样式

选中组件，右侧会出现相应的属性配置表单。

选择选择全景图片后，配置点位数据

配置项	子项	示例值	说明
全景图片			从设计素材库中选择、上传 或 填写外链地址，支持png、jpeg、jpg 等图片格式
点位配置			在弹出的全景编辑器中，自助标记点位 ，主要需要配置的是点位在全景地图中的位置和唯一标识
点位宽度
点位高度
点位自动巡视设置			开启自动巡视
点位名称设置			默认点位名称样式配置，支持通过编写CSS实现个性化样式
点位图标设置			支持使用图片作为点位图标
全景导航栏
提示框设置			点击点位或自动巡视到点位时 弹出的提示框设置。支持编写CSS实现个性化样式
代码扩展

点位配置说明：

1. 新增点位：鼠标左键双击全景图，在弹出的添加窗口中填写点位唯一标识、名称描述。
2. 修改点位：鼠标左键单击已有点位，在弹出的修改窗口中 可修改点位名称描述。
3. 删除点位：鼠标左键单击已有点位，在弹出的窗口中点击【删除】
4. 暂不支持移动点位，如需移动，可以先删除再添加。
5. 点位和业务数据关联：点位的唯一标识 和 业务数据中的唯一标识匹配，业务数据会展示到点位中。

3. 配置数据

切换到数据配置，配置数据来源，关于不同数据类型的区别，请参考文档：组件通用配置说明

零代码绑定数据，数据集中包含以下字段即可。

名称	说明	示例值
点位唯一ID	必须	此ID和底图点位的唯一标识对应
点位名称		点位名称
点位数值
点位图标		点位图标地址
点位描述		默认提示窗口中展示此处的点位描述内容，支持自定义格式化内容，支持富文本内容
扩展字段	可选，可以在点击事件等自定义函数中获取使用

4，自定义数据转换

通过编写 数据转换函数 实现自定义的数据格式转换和 个性化样式设定。
数据格式：

[
    {
        "id": 1,
        "name": "设备A",
        "value": 177,
        "desc": "服务器1<br>IP:x.x.x.1",
        "icon": "/img/example/pin-blue.png"
    },
    {
        "id": 2,
        "name": "设备B",
        "value": 235,
        "desc": "服务器1<br>IP:x.x.x.2",
        "icon": "/img/example/pin-red.png"
    },
    {
        "id": 3,
        "name": "设备C",
        "value": 212,
        "desc": "服务器1<br>IP:x.x.x.3",
        "icon": "/img/example/pin-red.png"
    }
]

基础信息字段说明：

字段名	字段描述	说明/示例值
id	点位唯一ID	必须
name	点位名称
value	点位数值
icon	点位图标
desc	点位描述	提示窗口中展示，支持自定义格式化内容

5. 配置事件

在点击事件、标签格式化、提示格式化 等函数中，可以获得当前点位的数据。

提示格式化：

自定义格式化鼠标移动到点位上时弹出的提示框展示的内容。

(item,data) => {
  //item 当前点位数据对象
  //data 该组件的所有数据
  //返回提示文本
  return item.name + "<br>" + item.desc;
}

配置点击事件：

点击全景地图中的点位时触发点击事件。

在点击事件中可以通过编写少量代码，实现丰富的交互逻辑。
支持对当前看板中其他图层组件显示、隐藏、配置项更新、数据更新；
支持弹窗、跳转等交互操作。
支持单个或按文件夹 批量显示、隐藏 图层。

(item,items,visual)=>{
  //item 说明：点击项数据对象，不同组件有所区别
  //visual 说明：当前组件对象，可以调用内置函数
  console.log(item);
}

点击事件代码编辑器，支持快捷复制图层组件信息，提升编码效率。

标签格式化：

自定义格式化点位的显示内容，支持完全重构点位的展示内容和样式。

(item,data) => {
  //item 当前数据对象
  //data 该组件的所有数据
  //返回需要展示的富文本（HTML）
  return item.name + "   " + item.value;
}

6. 内置函数

属于全景图组件特有的内置函数，用于交互操作，比如可以在按钮的点击事件函数中调用。

切换全景图：

当我们需要通过导航菜单切换多个全景场景时，可以调用下面的函数。

switchPanorama({
	"url": "全景图网址",
	"points": [{
		"position": {
			"pitch": -0.4228505315527591,
			"yaw": 2.334845534505421
		},
		"code": "1",
		"name": "地块1"
	}, {
		"position": {
			"pitch": -0.3364099313671378,
			"yaw": 3.6927007078726977
		},
		"code": "2",
		"name": "地块2"
	}],
	"position": {
		"yaw": 3.258059542666745,
		"pitch": 0.05176311536330447,
		"zoomlvl": 26.781924999996612
	}
});

参数名	描述	说明/示例值
url	全景图网址	必须
points	点位数据	不传，则不更新点位数据。点位数据通过在720全景图组件点位编辑窗口中一键复制。
position	全景默认的显示位置	不传，则不更新显示数据。默认的显示位置数据通过在720全景图组件点位编辑窗口中一键复制。

漫游到指定点位：

全景图中心点漫游至指定的点位
当我们需要通过数据触发全景图漫游至指定的设备点位 时可以调用下面的函数。

gotoTargetPoint( id, option)

参数名	描述	说明/示例值
id	点位唯一标识	必须，一般来说设备点位的唯一标识和业务数据中的唯一标识是一 一对应的
option	数据	可选，{"triggerClick": false}， triggerClick设置为true时将触发指定点位的点击事件

//示例：漫游到唯一标识为 1 的点位
gotoTargetPoint( "1", {
	"triggerClick": false
})

显示 / 隐藏点位的提示窗口：

togglePointTooltip(option)

option 字段说明

名称	描述	说明/示例值
id	点位唯一标识	如果不指定id，则表示显隐所有点位的提示窗口
type	可选 show/hide

//示例1：显示点位标识为1 的点位的提示窗口
togglePointTooltip({
	"id": "1",
	"type": "show"
})

//示例2：显示所有点位的提示窗口
togglePointTooltip({
	"type": "show"
})

更新点位数据：

根据 id ，更新点位数据

updateTargetPoint( id, data)

参数名	描述	说明/示例值
id	点位唯一标识	必须
data	点位的数据	该点位的数据对象（字段参考零代码绑定后的数据字段）

//示例：更新点位名称
updateTargetPoint(id,{
    "name":new Date()
});

事件编写实战代码

点位提示内容格式化

效果如下图

组件的 事件->提示格式化 中配置如下代码：

(item,data) => {
  //item 当前数据对象
  //data 该组件的所有数据
  //返回提示文本
  console.log("item",item);
  let dt = item.extObj || {};
  let content = `<img width="100%" src="/visual_static/ScMaterial/20250720/d5672955-9c93-451e-953e-8733af750fd3.png"><br>名称：${item.name} <br>介绍：${dt["介绍"]} <br>建筑年代：${dt["建筑年代"]} <br>建筑面积：${dt["建筑面积"]}`;
  content += `消防检查情况：${dt["消防检查情况"]} <br>能耗：${dt["能耗数据"]["年度天然气"]}`;
  return content;
}

上面的代码中根据下图中的数据结构来取对应数据字段，实际使用请取你自己的字段。

组件的 扩展样式中配置如下代码：

#itemid .psv-tooltip-content{
    color:#FFF;
    font-size:16px;
    background-color: rgba(0, 0, 0, 0.5);
    width:300px;
    text-shadow: 0 1px #FFF;
    line-height:25px;
}

#itemid .psv-tooltip  {
    box-shadow: 0 -3px 0 #409EFF;
    max-width: none;
    background: transparent;
    border-radius: 4px;
}

#itemid .psv-tooltip-arrow{
    border-top-color: #409EFF;
}

复制