Appearance
视频标牌
此功能案例实现点击摄像头图层，添加图层标牌，展示监控画面，点击标牌告警按钮，可添加告警图标，点击标牌关闭按钮，关闭标牌。需使用 flv.min.js。
目录
1. 功能点
- 图层点击事件 onLandmarkLayerClick
- 添加地标图 addLandmarkLayer
- 开启图层事件 pickOverlay
- 添加标牌 addOverlayTip
- 关闭标牌 removeOverlayTip
- 添加 3DMarker add3DMarker
2. 视频演示
3. 核心代码
引入版本：3.1 起支持
第一步
注册地标图点击事件
JavaScript
window.appInstance.uniCall('onLandmarkLayerClick', {}, (res) => {
console.log(res.idObj)
addVideoTip()
})添加地标图，开启图层点击事件
JavaScript
// 准备数据
let pointsData = [
{
id: 'landmarkId1',
label: '',
coord: [113.94163319571, 22.51983158839],
coordZ: 75,
type: 'legendName1'
}
]
// 添加散点
function addPoints() {
let jsonData = {
id: 'layerId', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerName', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
autoScale: true, // 如果开启后，图标会按照摄像机远近自动缩放大小
legends: [ // 定义图层包含图例，支持为不同图例定义各自样式
{
name: 'legendName1',
color: '#FFFFFF',
iconName: 'camera'
},
],
data: pointsData // 定义图层可视化数据
}
window.appInstance.uniCall('addLandmarkLayer', jsonData, (res) => {
window.appInstance.uniCall('pickOverlay', {
overlayType: 'landmarkLayer', // 图层对象类别
idLayer: 'layerId', // 如果具体想限定图层对象，则填写图层对象 id，如不限制，可不填
type: 'click', // 单选模式，click：点击选中；hover：悬停选中
isShowDecorator: false // 表示是否显示选中的高亮装饰符，true：显示，false：不显示，默认：true
})
})
}第二步
添加视频标牌，实例化视频流
JavaScript
// 添加视频标牌
function addVideoTip() {
// 创建标牌html结构
let videoBox = document.createElement('div')
videoBox.className = 'tipDivId'
videoBox.id = 'tipDivId'
videoBox.innerHTML = `
<div class="close">×</div>
<div class="alert">!</div>
<video muted controls autoplay></video>
`
document.body.appendChild(videoBox)
// 找到页面中的按钮，添加点击事件
let closeBtn = videoBox.querySelector('.close')
let alertBtn = videoBox.querySelector('.alert')
closeBtn.onclick = removeOverlay
alertBtn.onclick = addAlert
// 实例化监控视频
let video = videoBox.querySelector('#tipDivId video')
playVideo(video, 'rtsp://127.0.0.1:8554/video01')
// 添加标牌
window.appInstance.uniCall('addOverlayTip', {
id: 'landmarkId1', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
overlayType: 'landmarkLayer', // 图层对象类别
url: '', // Tip 窗口页面地址，如果divId不为“”，则这个属性不起作用
divId: 'tipDivId', // HTML侧弹出标牌的dom div id，如果这个不为""，url属性不起作用
isShowClose: true, // 是否显示右上角关闭按钮，默认显示关闭按钮
size: [320, 180], // Tip 窗口宽高xy，x：窗口宽；y：窗口高（单位：像素）
offset: [0, 0] // Tip 左上角相对 对象中心点 偏移量 xy，x：为正，向右偏移；y：为正，向上偏移（单位：像素）
})
}视频监控相关方法
JavaScript
// 随机guid
function newGuid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return (
S4() +
S4() +
'-' +
S4() +
'-' +
S4() +
'-' +
S4() +
'-' +
S4() +
S4() +
S4()
)
}
// 视频逻辑
function playVideo(video, url) {
let player = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: `ws://localhost:8888/rtsp/${newGuid()}/?url=${url}`
})
player.attachMediaElement(video)
player.load()
player.play()
}第三步
点击告警，添加 3Dmarker
JavaScript
//添加3DMarker
function addAlert() {
window.appInstance.uniCall(
'add3DMarker',
{
id: '3DMarkerId1', // 模型对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
alpha: 1, // 透明度，0：完全透明；1：完全不透明
scale: 25, // 特效整体放缩倍数（单位：倍）
type: 'Spread06', // 特效样式类别，详见下表：特效样式类别
titleText: '警报', // 特效标签文本
titleColor: '#ffffff', // 特效标签文本颜色，可选值，默认白色
titleBackgroundColor: '#333333', // 特效标签文本背景颜色，可选值，默认灰色
coord: [113.94163319571, 22.51983158839], // XY 轴坐标，X：经度；Y：纬度
coordZ: 100, // Z 轴高度（单位：米）
tag: 'tag01', // 用户自动以标签
visible: true // 是否显示
},
(res) => {
console.log('add3DMarker', res)
}
)
}点击关闭标牌按钮，关闭标牌
JavaScript
// 关闭标牌
function removeOverlay() {
window.appInstance.uniCall(
'removeOverlayTip',
{
id: 'landmarkId1', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
overlayType: 'landmarkLayer' // 图层对象类别
},
(res) => {
console.log(res)
}
)
}