Cesium MapboxGL Leaflet OpenLayers
API文档
类名 VideoMapView

# new VideoMapView(options)

参数:

名称 类型 默认值 描述
options Object

构造参数
map Map ''

图层管理器
viewId String ''

图层容器ID

查看源代码 common/videoGIS/VideoMapView.js, line 154

支持如下方法：
[1、初始化视频地图视图]
[2、像素坐标转地理坐标]
[3、地理坐标转像素坐标]

示例

创建视频地图视图示例

// ES5引入方式
const { Map, VideoMapView } = Zondy
// ES6引入方式
import { Map, VideoMapView } from "@mapgis/webclient-common"
// 新建一个map容器
const videoMap = new Map()
videoMapView = new VideoMapView({
  viewId: 'videoMapView-container',
  map: videoMap
})
// 传入视频标定数据
videoMapView.init(data)

继承关系

  • Event

成员变量

VideoPixelCoordTransforms

# readonly videoPixelCoordTransforms

像素坐标与地理坐标转换对象

查看源代码 common/videoGIS/VideoMapView.js, line 226

方法

# geoCoordToPixelCoord(geoCoord)

地理坐标转像素坐标，得到的像素坐标会受视频缩放影响

参数:

名称 类型 描述
geoCoord Point

地理坐标,经纬度表示

查看源代码 common/videoGIS/VideoMapView.js, line 339

像素坐标,单位为像素值

Point
示例

地理坐标转像素坐标示例

// ES5引入方式
const { Point } = Zondy.Geometry
// ES6引入方式
import { Point } from "@mapgis/webclient-common"
const pixelCoord = videoMapView.geoCoordToPixelCoord(new Point({ coordinates: [longitude, latitude] }))

# init(videoMetaData)

初始化视频地图视图
支持播放MP4，HLS，RTMP格式视频，支持传入HTMLVideoElement标签，支持传入videojs实例化对象。HLS与RTMP视频流播放时会有延迟。

参数:

名称 类型 描述
videoMetaData VideoMetaData

视频元数据
视频标定数据使用的地图数据与运行时的地图数据要保持一致。如：标定数据是基于天地图的影像数据得到的，则运行时也需要使用天地图的影像数据。
参考示例：
[1、由视频地图内部自己创建HTMLVideoElement示例]

支持传入外部的video播放器

  1. 传入的视频播放器的宽高需要和传给VideoMapView的div容器的宽高保存一致，否则会出现草图编辑区域与视频区域无法重合的问题。

  2. 视频可进行同比例的缩放，不可拉伸变形。如400*300的视频可以等比例缩放为200*150，不可拉伸为300*300。

  3. 参考示例：
    外部video播放器播放MP4格式视频,传HTMLVideoElement。
    [2、传入HTMLVideoElement,视频为MP4格式]
    外部video播放器播放HLS格式视频流，传HTMLVideoElement。
    [3、传入HTMLVideoElement,视频为HLS格式]
    外部video播放器播放RTMP格式视频流，传入videojs对象。
    [4、传入videojs对象,视频为RTMP格式]

查看源代码 common/videoGIS/VideoMapView.js, line 235

示例

1. 由视频地图内部自己创建videoHTML示例

// ES5引入方式
const { Map, VideoMapView } = Zondy
// ES6引入方式
import { Map, VideoMapView } from "@mapgis/webclient-common"
// 新建一个map容器
const videoMap = new Map()
videoMapView = new VideoMapView({
  viewId: 'videoMapView-container',
  map: videoMap
})

videoMapView.init(mockData)

2. 传入HTMLVideoElement,视频为MP4格式

const videodom = document.getElementById('videolayer')
videodom.play()
// 使用HTMLVideoElement替换视频源
mockData.videoSource = videodom
videoMapView.init(mockData)

3. 传入HTMLVideoElement,视频为HLS格式

const videodom = document.getElementById('videolayer')
const player = videojs(videodom)
player.play()
// 使用HTMLVideoElement替换视频源
mockData.videoSource = player.el().querySelector('video')

videoMapView.init(mockData)

4. 传入videojs对象,视频为RTMP格式

const videodom = document.getElementById('videolayer')
const player = videojs(videodom)
player.play()
// 使用videojs对象替换视频源
mockData.videoSource = player
videoMapView.init(mockData)

# pixelCoordToGeoCoord(pixelCoord)

像素坐标转地理坐标，传入视频地图视图上的像素坐标

参数:

名称 类型 描述
pixelCoord Point

像素坐标,单位为像素值

查看源代码 common/videoGIS/VideoMapView.js, line 316

地理坐标,经纬度表示

Point
示例

像素坐标转地理坐标示例

// ES5引入方式
const { Point } = Zondy.Geometry
// ES6引入方式
import { Point } from "@mapgis/webclient-common"
const geoCoord = videoMapView.pixelCoordToGeoCoord(new Point({ coordinates: [0, 0] }))

事件

# 地图视图加载完毕事件

属性:
Name Type Description
event Object

事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 10

示例

视频地图视图加载完毕事件

view.on('loaded', (event) => {
  console.log("视频地图加载完成事件:", event)
})

# 鼠标双击事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type ViewEventType <optional>
 'double-click'

事件类型
absolutePointer Object <optional>

鼠标在视图的绝对位置
pointer Object <optional>

鼠标在视图的像素位置
target Object <optional>

视图上被点击到的几何图形
isClick Boolean <optional>
 false

是否是点击事件
e Object <optional>

鼠标原事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 64

示例

鼠标双击事件

view.on('double-click', (event) => {
  console.log("双击事件:", event)
})

# 鼠标抬起事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type ViewEventType <optional>
 'mouse-up'

事件类型
absolutePointer Object <optional>

鼠标在视图的绝对位置
pointer Object <optional>

鼠标在视图的像素位置
target Object <optional>

视图上被点击到的几何图形
isClick Boolean <optional>
 false

是否是点击事件
e Object <optional>

鼠标原事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 49

示例

鼠标抬起事件

view.on('mouse-up', (event) => {
  console.log("抬起事件:", event)
})

# 鼠标按下事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type ViewEventType <optional>
 'mouse-down'

事件类型
absolutePointer Object <optional>

鼠标在视图的绝对位置
pointer Object <optional>

鼠标在视图的像素位置
target Object <optional>

视图上被点击到的几何图形
isClick Boolean <optional>
 false

是否是点击事件
e Object <optional>

鼠标原事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 34

示例

鼠标按下事件

view.on('mouse-down', (event) => {
  console.log("按下事件:", event)
})

# 鼠标点击事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type ViewEventType <optional>
 'click'

事件类型
absolutePointer Object <optional>

鼠标在视图的绝对位置
pointer Object <optional>

鼠标在视图的像素位置
target Object <optional>

视图上被点击到的几何图形
isClick Boolean <optional>
 false

是否是点击事件
e Object <optional>

鼠标原事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 19

示例

鼠标点击事件

view.on('click', (event) => {
  console.log("点击事件:", event)
})

# 鼠标移入事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type ViewEventType <optional>
 'mouse-over'

事件类型
target Object <optional>

视图上的几何图形
e Object <optional>

鼠标原事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 106

示例

鼠标移入事件

view.on('mouse-over', (event) => {
  console.log("移入事件:", event)
})

# 鼠标移出事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type ViewEventType <optional>
 'mouse-out'

事件类型
target Object <optional>

视图上的几何图形
e Object <optional>

鼠标原事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 94

示例

鼠标移出事件

view.on('mouse-out', (event) => {
  console.log("移出事件:", event)
})

# 鼠标移动事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type ViewEventType <optional>
 'mouse-move'

事件类型
absolutePointer Object <optional>

鼠标在视图的绝对位置
pointer Object <optional>

鼠标在视图的像素位置
target Object <optional>

视图上的几何图形
isClick Boolean <optional>
 false

是否是点击事件
e Object <optional>

鼠标原事件对象

查看源代码 common/videoGIS/VideoMapView.js, line 79

示例

鼠标移动事件

view.on('mouse-move', (event) => {
  console.log("移动事件:", event)
})
构造函数
成员变量
方法
事件