MapView

# new MapView(options)

视频地图视图类
继承自zondy.BaseView
支持MP4,HLS,RTMP视频格式。

参数:

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

绑定事件:

支持如下方法：

[2、像素坐标转地理坐标]
[3、地理坐标转像素坐标]

示例

创建视频地图视图示例

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

继承关系

zondy.BaseView

方法

# geoCoordToPixelCoord(geoCoord)

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

参数:

名称	类型	描述
`geoCoord`	Point	地理坐标,经纬度表示

返回值:

像素坐标,单位为像素值

类型: Point

示例

地理坐标转像素坐标示例

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

# pixelCoordToGeoCoord(pixelCoord)

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

参数:

名称	类型	描述
`pixelCoord`	Point	像素坐标,单位为像素值

返回值:

地理坐标,经纬度表示

类型: Point

示例

像素坐标转地理坐标示例

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

事件

# 地图视图加载完毕事件

属性:

Name	Type	Description
`event`	Object	事件对象

示例

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

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>		鼠标原事件对象

示例

鼠标双击事件

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>		鼠标原事件对象

示例

鼠标抬起事件

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>		鼠标原事件对象

示例

鼠标按下事件

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>		鼠标原事件对象

示例

鼠标点击事件

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>		鼠标原事件对象

示例

鼠标移入事件

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>		鼠标原事件对象

示例

鼠标移出事件

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>		鼠标原事件对象

示例

鼠标移动事件

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

MapGIS Client for JavaScript API