new VideoMap(options)

Usage

import { VideoMap } from "@supermapgis/iclient-mapboxgl";
// 将上面 opencv 源码拷贝到本地路径引用
options.opencv = "your opencv path";
new VideoMap(options);

<script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/web/libs/opencv/3.4/opencv.js"></script>
<script>
  new mapboxgl.supermap.VideoMap(options);

</script>

mapboxgl/mapping/VideoMap.js, line 93

Name Type Description

options

Object

参数

Name	Type	Default	Description
`url`	string		视频或流链接。支持 flv, m3u8, mp4 格式。
`videoParameters`	VideoMap.VideoParameters \| Array.<VideoMap.VideoTimeParameters>		视频地图配准参数。传入对象时为静态配准（相机位置固定）；传入数组时为动态配准，按视频时间动态更新相机参数。
`container`	string \| HTMLElement	'map'	可选地图容器 id 或 DOM 元素。
`opencv`	Object		可选 opencv.js 实例。未传入时取 window.cv；若均不存在将抛出异常。
`videoWidth`	number		可选视频宽度，单位像素。未设置时默认读取视频实际宽度。
`videoHeight`	number		可选视频高度，单位像素。未设置时默认读取视频实际高度。
`styleOptions`	Object		可选视频地图风格配置，对应 mapbox-gl 的 style 对象（sprite、glyphs 等）。
`autoplay`	boolean	true	可选视频是否自动播放。
`loop`	boolean	true	可选视频是否循环播放。
`interval`	number	0.1	可选动态配准参数的时间重采样间隔，单位秒。仅当 videoParameters 为数组时生效：对原始相机参数序列按该间隔做插值或抽稀，决定相机位置随时间变化的精度。

Version:

11.2.0

Fires

API Relations

As constructor parameter: VideoMapDrawControl , VideoPlayControl.

Returned by: VideoMap.addControl , VideoMap.removeControl.

Extends

VideoMap -> mapboxgl.Evented

Events

drawcancel mapboxgl/mapping/VideoMap.js, line 678

取消当前标绘时触发。

Version:

12.1.2

drawclear mapboxgl/mapping/VideoMap.js, line 684

清空标绘结果时触发。

Version:

12.1.2

drawcreate mapboxgl/mapping/VideoMap.js, line 662

完成一个标绘要素时触发。

Properties:

Name	Type	Description
`feature`	Object	新增的 GeoJSON Feature。
`data`	Object	当前全部标绘结果。

Version:

12.1.2

drawdelete mapboxgl/mapping/VideoMap.js, line 705

删除选中要素时触发。

Properties:

Name	Type	Description
`features`	Array	被删除的 GeoJSON Feature。
`data`	Object	删除后的全部标绘结果。

Version:

12.1.2

drawmodechange mapboxgl/mapping/VideoMap.js, line 690

绘制模式变化时触发。

Properties:

Name	Type	Description
`mode`	string	UI 模式，`'simple_select'` \| `'draw_point'` \| `'draw_line_string'` \| `'draw_polygon'`。
`type`	string \| null	GeoJSON 类型，`'Point'` \| `'LineString'` \| `'Polygon'` \| `null`。

Version:

12.1.2

drawselectionchange mapboxgl/mapping/VideoMap.js, line 698

选中要素变化时触发，供后续要素编辑使用。

Properties:

Name	Type	Description
`features`	Array	当前选中的 GeoJSON Feature。

Version:

12.1.2

drawstart mapboxgl/mapping/VideoMap.js, line 655

开始标绘时触发。

Properties:

Name	Type	Description
`type`	string	标绘类型。

Version:

12.1.2

drawupdate mapboxgl/mapping/VideoMap.js, line 670

标绘结果或绘制中的图形发生变化时触发，可用于同步到其它地图。

Properties:

Name	Type	Description
`data`	Object	已完成的 GeoJSON FeatureCollection。
`live`	Object	已完成图形加上当前草稿的 GeoJSON FeatureCollection。

Version:

12.1.2

load mapboxgl/mapping/VideoMap.js, line 1041

视频地图加载完成时触发。此时可调用 addSource/addLayer 叠加矢量数据。

Properties:

Name	Type	Description
`map`	mapboxgl.Map	底层 mapbox-gl 地图实例。

pause mapboxgl/mapping/VideoMap.js, line 966

视频暂停时触发。

play mapboxgl/mapping/VideoMap.js, line 959

视频开始播放时触发。

Methods

addControl(control, position){VideoMap} mapboxgl/mapping/VideoMap.js, line 612

向视频地图添加 MapboxGL 控件。若控件实现了 setTarget 且尚无目标，或实现了 setVideoMap，会自动注入当前 VideoMap。

Name	Type	Description
`control`	Object	MapboxGL IControl 控件。
`position`	string	可选 MapboxGL 原生控件位置：`'top-left'` \| `'top-right'` \| `'bottom-left'` \| `'bottom-right'`。

Version:

12.1.2

Returns:

Type	Description
VideoMap	this。

addLayer(layer, beforeId) mapboxgl/mapping/VideoMap.js, line 312

添加图层。

Name Type Description

layer

Object

图层配置。

Name	Type	Description
`id`	string	图层 id
`type`	string	图层类型
`source`	string \| Object	数据源配置
`filter`	Array	可选过滤配置
`layout`	Object	可选布局配置
`paint`	Object	可选绘制配置
`maxzoom`	number	可选最大级别
`minzoom`	number	可选最小级别

beforeId

string

已经存在的图层 ID。

addSource(id, source) mapboxgl/mapping/VideoMap.js, line 338

添加数据源。

Name Type Description

id

string

数据源 id。

source

Object

图层源配置。

Name	Type	Description
`type`	string	只支持 geojson
`data`	Object	geojson 数据。

cancelDraw() mapboxgl/mapping/VideoMap.js, line 723

取消当前正在绘制的图形并退出标绘。

Version:

12.1.2

changeDrawMode(mode, options) mapboxgl/mapping/VideoMap.js, line 785

切换绘制模式。direct_select 预留给后续顶点编辑，当前按选中处理。

Name	Type	Description
`mode`	string	`'simple_select'` \| `'draw_point'` \| `'draw_line_string'` \| `'draw_polygon'` \| `'direct_select'`。
`options`	Object	可选模式参数，如 `{ featureId }`。

Version:

12.1.2

clearDraw() mapboxgl/mapping/VideoMap.js, line 734

清空已标绘的点、线、面。

Version:

12.1.2

deleteDraw(ids){Object} mapboxgl/mapping/VideoMap.js, line 796

删除标绘要素。不传 ids 时删除当前选中要素。

Name	Type	Description
`ids`	string \| Array.<string>	可选要素 id。

Version:

12.1.2

Returns:

Type	Description
Object	删除后的 GeoJSON FeatureCollection。

destroy() mapboxgl/mapping/VideoMap.js, line 819

销毁视频地图。

finishDraw(){Object|null} mapboxgl/mapping/VideoMap.js, line 713

结束当前线或面标绘并保存图形。点标绘在单击时即完成，无需调用此方法。

Version:

12.1.2

Returns:

Type	Description
Object \| null	完成的 GeoJSON Feature。

getDrawData(){Object} mapboxgl/mapping/VideoMap.js, line 745

获取已标绘要素的 GeoJSON（经纬度，EPSG:4326）。

Version:

12.1.2

Returns:

Type	Description
Object	GeoJSON FeatureCollection。

getDrawLiveData(){Object} mapboxgl/mapping/VideoMap.js, line 755

获取已完成标绘加上当前草稿的 GeoJSON（经纬度，EPSG:4326），可用于同步到真实地图。

Version:

12.1.2

Returns:

Type	Description
Object	GeoJSON FeatureCollection。

getDrawMode(){string|null} mapboxgl/mapping/VideoMap.js, line 765

获取当前标绘类型。未处于标绘状态时返回 null。

Version:

12.1.2

Returns:

Type	Description
string \| null	`'Point'` \| `'LineString'` \| `'Polygon'` \| `null`。

getDrawSelected(){Object} mapboxgl/mapping/VideoMap.js, line 807

获取当前选中的标绘要素。

Version:

12.1.2

Returns:

Type	Description
Object	GeoJSON FeatureCollection。

getDrawUiMode(){string} mapboxgl/mapping/VideoMap.js, line 775

获取当前绘制 UI 模式，对齐 mapbox-gl-draw。

Version:

12.1.2

Returns:

Type	Description
string	`'simple_select'` \| `'draw_point'` \| `'draw_line_string'` \| `'draw_polygon'`。

getSource(id){Object|undefined} mapboxgl/mapping/VideoMap.js, line 358

获取数据源。视频地图 GeoJSON 数据源的 data 为 EPSG:4326 原始数据，其余行为保持 Mapbox source 兼容。

Name	Type	Description
`id`	string	数据源 id。

Returns:

Type	Description
Object \| undefined	Mapbox source 或视频地图 GeoJSON source 代理。

getVideoBounds(options){Object|null} mapboxgl/mapping/VideoMap.js, line 524

获取当前视频画面反投影到地面的覆盖多边形。顶点顺序为左上 → 右上 → 右下 → 左下；坐标为 EPSG:4326，经纬度，环自动闭合。

Name Type Description

options

Object

可选

参数。

Name	Type	Description
`maxDistance`	number	可选地面距离相机的最大长度，单位米（EPSG:3857）；用于截断过远的地平线交点。

Version:

12.1.2

Returns:

Type	Description
Object \| null	GeoJSON Polygon Feature，无法计算时返回 `null`。

on() mapboxgl/mapping/VideoMap.js, line 226

Version:

12.1.2

pause() mapboxgl/mapping/VideoMap.js, line 591

暂停视频。

Version:

12.1.2

paused(){boolean} mapboxgl/mapping/VideoMap.js, line 602

获取当前视频播放状态。返回 true 表示已暂停，返回 false 表示正在播放。

Version:

12.1.2

Returns:

Type	Description
boolean	视频是否暂停。

play() mapboxgl/mapping/VideoMap.js, line 580

播放视频。推荐使用 VideoPlayControl 提供圆形播放/暂停按钮。

Version:

12.1.2

removeControl(control){VideoMap} mapboxgl/mapping/VideoMap.js, line 629

移除控件。

Name	Type	Description
`control`	Object	已添加的控件。

Version:

12.1.2

Returns:

Type	Description
VideoMap	this。

removeLayer(id) mapboxgl/mapping/VideoMap.js, line 548

移除图层。

Name	Type	Description
`id`	string	图层 id。

removeSource(id) mapboxgl/mapping/VideoMap.js, line 564

移除数据源。

Name	Type	Description
`id`	string	数据源 id。

startDraw(type) mapboxgl/mapping/VideoMap.js, line 645

开始点、线、面标绘。单击加点；线、面双击或调用 finishDraw 结束当前图形。坐标会转换为真实地理坐标，并随相机更新重投影。推荐使用 VideoMapDrawControl 提供工具条。

Name	Type	Description
`type`	string	标绘类型，`'Point'` \| `'LineString'` \| `'Polygon'`。

Version:

12.1.2

toSpatialCoordinate(lngLat){Array.<number>|null} mapboxgl/mapping/VideoMap.js, line 449

将视频地图坐标（lngLat）转换为真实地理坐标（EPSG:3857）。

Name	Type	Description
`lngLat`	mapboxgl.LngLat	视频地图坐标。

Returns:

Type	Description
Array.<number> \| null	真实地理坐标 [x, y, z]（EPSG:3857），无法转换时返回 null。

Type Definitions

VideoParametersObject

视频地图配准参数（静态配准，相机位置固定）。

Properties:

Name	Type	Description
`pitch`	number	相机俯仰角，单位：度。
`roll`	number	相机侧偏角，单位：度。
`yaw`	number	相机偏航角，单位：度。
`x`	number	相机位置 x 坐标（投影至 EPSG:3857 后的横坐标）。
`y`	number	相机位置 y 坐标（投影至 EPSG:3857 后的纵坐标）。
`z`	number	相机位置 z 坐标（投影至 EPSG:3857 后的高程）。
`fovX`	number	相机水平视场角，单位：度。内部通过 videoWidth 与该值换算为水平焦距 fx。
`fovY`	number	相机垂直视场角，单位：度。内部通过 videoHeight 与该值换算为垂直焦距 fy。
`centerX`	number	相机主点（光轴与图像平面交点）的水平像素坐标。
`centerY`	number	相机主点（光轴与图像平面交点）的垂直像素坐标。

VideoTimeParametersObject

动态视频配准参数（按视频时间动态更新相机位置）。

Properties:

Name	Type	Description
`time`	number	视频时间戳，单位秒。用于按视频播放时间匹配对应的相机参数。
`pitch`	number	相机俯仰角，单位：度。
`roll`	number	相机侧偏角，单位：度。
`yaw`	number	相机偏航角，单位：度。
`x`	number	相机位置 x 坐标（投影至 EPSG:3857 后的横坐标）。
`y`	number	相机位置 y 坐标（投影至 EPSG:3857 后的纵坐标）。
`z`	number	相机位置 z 坐标（投影至 EPSG:3857 后的高程）。
`fovX`	number	相机水平视场角，单位：度。内部通过 videoWidth 与该值换算为水平焦距 fx。
`fovY`	number	相机垂直视场角，单位：度。内部通过 videoHeight 与该值换算为垂直焦距 fy。
`centerX`	number	相机主点（光轴与图像平面交点）的水平像素坐标。
`centerY`	number	相机主点（光轴与图像平面交点）的垂直像素坐标。

Version:

12.1.2

Class: VideoMap

new VideoMap(options)

Usage

Fires

API Relations

Extends

Events

drawcancel

drawclear

drawcreate

Properties:

drawdelete

Properties:

drawmodechange

Properties:

drawselectionchange

Properties:

drawstart

Properties:

drawupdate

Properties:

load

Properties:

pause

play

Methods

addControl(control, position){VideoMap}

Returns:

addLayer(layer, beforeId)

addSource(id, source)

cancelDraw()

changeDrawMode(mode, options)

clearDraw()

deleteDraw(ids){Object}

Returns:

destroy()

finishDraw(){Object|null}

Returns:

getDrawData(){Object}

Returns:

getDrawLiveData(){Object}

Returns:

getDrawMode(){string|null}

Returns:

getDrawSelected(){Object}

Returns:

getDrawUiMode(){string}

Returns:

getSource(id){Object|undefined}

Returns:

getVideoBounds(options){Object|null}

Returns:

on()

pause()

paused(){boolean}

Returns:

play()

removeControl(control){VideoMap}

Returns:

removeLayer(id)

removeSource(id)

startDraw(type)

toSpatialCoordinate(lngLat){Array.<number>|null}

Returns:

Type Definitions

VideoParametersObject

Properties:

VideoTimeParametersObject

Properties: