#### # new VideoMapView(options)

#### 参数:

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
`options` | Object |  | 构造参数
`map` | Map | '' | 图层管理器
`viewId` | String | '' | 图层容器ID

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

绑定事件:

- VideoMapView#event:地图视图加载完毕事件
- VideoMapView#event:鼠标点击事件
- VideoMapView#event:鼠标双击事件
- VideoMapView#event:鼠标按下事件
- VideoMapView#event:鼠标抬起事件
- VideoMapView#event:鼠标移动事件
- VideoMapView#event:鼠标移出事件
- VideoMapView#event:鼠标移入事件

##### 支持如下方法：

[1、初始化视频地图视图]
[2、像素坐标转地理坐标]
[3、地理坐标转像素坐标]

##### 示例

<h7>创建视频地图视图示例</h7>

    // 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

##### 示例

<h7>视频地图视图加载完毕事件

    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

##### 示例

<h7>鼠标双击事件

    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

##### 示例

<h7>鼠标抬起事件

    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

##### 示例

<h7>鼠标按下事件

    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

##### 示例

<h7>鼠标点击事件

    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

##### 示例

<h7>鼠标移入事件

    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

##### 示例

<h7>鼠标移出事件

    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

##### 示例

<h7>鼠标移动事件

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