# readonly videoPixelCoordTransforms

# geoCoordToPixelCoord(geoCoord)

参数

示例

地理坐标转像素坐标示例

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

# init(videoMetaData)

参数

示例

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)

参数

示例

像素坐标转地理坐标示例

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

# 地图视图加载完毕事件

属性:

示例

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

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

# 鼠标双击事件

属性:

示例

鼠标双击事件

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

# 鼠标抬起事件

属性:

示例

鼠标抬起事件

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

# 鼠标按下事件

属性:

示例

鼠标按下事件

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

# 鼠标点击事件

属性:

示例

鼠标点击事件

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

# 鼠标移入事件

属性:

示例

鼠标移入事件

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

# 鼠标移出事件

属性:

示例

鼠标移出事件

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

# 鼠标移动事件

属性:

示例

鼠标移动事件

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