@mapgis/webclient-video-plugin
Version:
3,776 lines • 51.6 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> MapView</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/app.min.css">
<link type="text/css" rel="stylesheet" href="styles/iframe.css">
<link type="text/css" rel="stylesheet" href="">
</head>
<body class="layout small-header">
<div id="stickyNavbarOverlay"></div>
<div class="top-nav">
<div class="inner">
<a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="logo">
<h1> MapGIS Client for JavaScript API</h1>
</div>
<div class="menu">
<div class="navigation">
<a
class="link user-link "
href="/static/modules/common/api/common-mapgis/index.html"
>
Common
</a>
<a
class="link user-link "
href="/static/modules/cesium/api/cesium-mapgis/index.html"
>
Cesium-Plugin
</a>
<a
class="link user-link "
href="/static/modules/mapboxgl/api/mapboxgl-mapgis/index.html"
>
MapboxGL-Plugin
</a>
<a
class="link user-link "
href="/static/modules/leaflet/api/leaflet-mapgis/index.html"
>
Leaflet-Plugin
</a>
<a
class="link user-link "
href="/static/modules/openlayers/api/openLayers-mapgis/index.html"
>
OpenLayers-Plugin
</a>
<a
class="link user-link "
href="/static/modules/video/api/video-mapgis/index.html"
>
Video-Plugin
</a>
</div>
</div>
</div>
</div>
<div id="main">
<div
class="sidebar "
id="sidebarNav"
>
<div>
<span class="mapgis-api-document-span"><a href="index.html">API文档</a></span>
</div>
<div class="search-wrapper">
<input id="search" type="text" placeholder="搜索文档..." class="input">
</div>
<nav>
<div class="category"><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">视图模块</div><ul class="mapgis-sidebar-menus"><li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="MapView"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapView.html">MapView</a><span style="display: none;"><p>视频地图视图类 <br/>
继承自<a href='http://webclient.smaryun.com/static/modules/common/api/common-mapgis/BaseView.html' target='_blank'>zondy.BaseView</a><br/>
支持MP4,HLS,RTMP视频格式。</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">草图编辑模块</div><ul class="mapgis-sidebar-menus"><li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="SketchEditor"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditor.html">SketchEditor</a><span style="display: none;"><p>视频草图编辑类<br/>
继承自<a href='http://webclient.smaryun.com/static/modules/leaflet/api/leaflet-mapgis/SketchEditor.html' target='_blank'>zondy.leaflet.SketchEditor</a><br/>
<br>[ES5引入方式]：<br/>
const { SketchEditor } = zondy.video.tool.sketch <br/>
[ES6引入方式]：<br/>
import { SketchEditor } from "@mapgis/webclient-leaflet-plugin" <br/></p></span></li></ul></div>
</nav>
</div>
<div class="core" id="main-content-wrapper">
<div class="content">
<header id="page-title" class="page-title">
<span class="page-title-main">类名</span>
<span class="page-title-sub">MapView</span>
</header>
<section>
<article>
<div class="container-overview">
<div class='vertical-section'>
<div class="members">
<div class="member">
<h4 class="name" id="MapView">
<a class="href-link" href="#MapView">#</a>
<span class="code-name" style="font-size:30px">
new MapView<span class="signature">(options)</span>
</span>
</h4>
<div class="description">
<p>视频地图视图类 <br/>
继承自<a href='http://webclient.smaryun.com/static/modules/common/api/common-mapgis/BaseView.html' target='_blank'>zondy.BaseView</a><br/>
支持MP4,HLS,RTMP视频格式。</p>
</div>
<h4>参数:</h4>
<div class="table-container">
<table class="params table">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th style="min-width: 100px;">默认值</th>
<th class="last">描述</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="default">
</td>
<td class="description last"><p>构造参数</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>map</code></td>
<td class="type">
<span class="param-type">Map</span>
</td>
<td class="default">
''
</td>
<td class="description last"><p>图层管理器</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>viewId</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
''
</td>
<td class="description last"><p>图层容器ID</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<div class="method-parameter columns">
<div class="column is-2"><label>绑定事件:</label></div>
<div class="column is-10">
<ul>
<li><a href="MapView.html#event:%25E5%259C%25B0%25E5%259B%25BE%25E8%25A7%2586%25E5%259B%25BE%25E5%258A%25A0%25E8%25BD%25BD%25E5%25AE%258C%25E6%25AF%2595%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:地图视图加载完毕事件</a></li>
<li><a href="MapView.html#event:%25E9%25BC%25A0%25E6%25A0%2587%25E7%2582%25B9%25E5%2587%25BB%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:鼠标点击事件</a></li>
<li><a href="MapView.html#event:%25E9%25BC%25A0%25E6%25A0%2587%25E5%258F%258C%25E5%2587%25BB%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:鼠标双击事件</a></li>
<li><a href="MapView.html#event:%25E9%25BC%25A0%25E6%25A0%2587%25E6%258C%2589%25E4%25B8%258B%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:鼠标按下事件</a></li>
<li><a href="MapView.html#event:%25E9%25BC%25A0%25E6%25A0%2587%25E6%258A%25AC%25E8%25B5%25B7%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:鼠标抬起事件</a></li>
<li><a href="MapView.html#event:%25E9%25BC%25A0%25E6%25A0%2587%25E7%25A7%25BB%25E5%258A%25A8%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:鼠标移动事件</a></li>
<li><a href="MapView.html#event:%25E9%25BC%25A0%25E6%25A0%2587%25E7%25A7%25BB%25E5%2587%25BA%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:鼠标移出事件</a></li>
<li><a href="MapView.html#event:%25E9%25BC%25A0%25E6%25A0%2587%25E7%25A7%25BB%25E5%2585%25A5%25E4%25BA%258B%25E4%25BB%25B6">MapView#event:鼠标移入事件</a></li>
</ul>
</div>
</div>
<p class="summary"><h5>支持如下方法：</h5>
<a href='#toMap'>[2、像素坐标转地理坐标]</a><br/>
<a href='#toScreen'>[3、地理坐标转像素坐标]</a><br/></p>
<h5>示例</h5>
<p class="code-caption"><h7>创建视频地图视图示例</h7></p>
<pre class="prettyprint"><code>// ES5引入方式
const { Map } = zondy
const { MapView } = zondy.video
// ES6引入方式
import { Map } from "@mapgis/webclient-common"
import { MapView } from "@mapgis/webclient-video-plugin"
// 新建一个map容器
const videoMap = new Map()
videoMapView = new MapView({
viewId: 'videoMapView-container',
map: videoMap
})
// 传入视频标定数据
videoMapView.init(data)</code></pre>
</div>
</div>
</div>
</div>
<h3 class="subsection-title">继承关系</h3>
<ul>
<li>zondy.BaseView</li>
</ul>
<div class='vertical-section'>
<h3 id='member'>成员变量</h3>
<div class="members">
<div class="member">
<span class="method-parameter is-pulled-right">
<label>类型:</label>
<span class="param-type">Popup</span>
</span>
<h4 class="name" id="popup">
<a class="href-link" href="#popup">#</a>
<span class="code-name">
popup
</span>
</h4>
<div class="description">
<p>地图弹框popup</p>
</div>
<dl class="details">
</dl>
</div>
</div>
</div>
<div class='vertical-section'>
<h3 id='function'>方法</h3>
<div class="members">
<div class="member">
<h4 class="name" id="geoCoordToPixelCoord">
<a class="href-link" href="#geoCoordToPixelCoord">#</a>
<span class="code-name" style="font-size:30px">
geoCoordToPixelCoord<span class="signature">(geoCoord)</span>
</span>
</h4>
<div class="description">
<p>地理坐标转像素坐标，得到的像素坐标会受视频缩放影响</p>
</div>
<h4>参数:</h4>
<div class="table-container">
<table class="params table">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th class="last">描述</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>geoCoord</code></td>
<td class="type">
<span class="param-type">Point</span>
</td>
<td class="description last"><p>地理坐标,经纬度表示</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<div class='columns method-parameter'>
<div class="column is-2"><label>返回值:</label></div>
<div class="column is-10">
<div class="columns">
<div class='param-desc column is-7'><p>像素坐标,单位为像素值</p></div>
<div class='column is-5 has-text-left'>
<label>类型: </label>
<span class="param-type">Point</span>
</div>
</div>
</div>
</div>
<h5>示例</h5>
<p class="code-caption"><h7 id = geoCoordToPixelCoord>地理坐标转像素坐标示例</h7></p>
<pre class="prettyprint"><code>// ES5引入方式
const { Point } = zondy.geometry
// ES6引入方式
import { Point } from "@mapgis/webclient-common"
const pixelCoord = videoMapView.toScreen(new Point({ coordinates: [longitude, latitude] }))</code></pre>
</div>
<div class="member">
<h4 class="name" id="hitTest">
<a class="href-link" href="#hitTest">#</a>
<span class="code-name" style="font-size:30px">
hitTest<span class="signature">(screenPoint)</span>
</span>
</h4>
<div class="description">
<p>穿透检测，图元拾取。目前支持graphic类型拾取结果，支持图层类型GraphicLayer，FeatureLayer。</p>
</div>
<h4>参数:</h4>
<div class="table-container">
<table class="params table">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th class="last">描述</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>screenPoint</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last"><p>屏幕像素坐标点，例如{ x: 900, y: 500 }</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<div class='columns method-parameter'>
<div class="column is-2"><label>返回值:</label></div>
<div class="column is-10">
<div class="columns">
<div class='param-desc column is-7'><p>图元检测结果</p></div>
<div class='column is-5 has-text-left'>
<label>类型: </label>
<span class="param-type">Array</span>
</div>
</div>
</div>
</div>
<h5>示例</h5>
<p class="code-caption"><h7>根据基础图层对象或者图层id查询并返回实际图层</h7></p>
<pre class="prettyprint"><code>// ES5引入方式
const { Map, Feature } = zondy
const { Point, Polygon, MultiPolygon ,Extent, Circle } = zondy.geometry
const { GraphicsLayer, IGSFeatureLayer, IGSTileLayer } = zondy.layer
const { MapView } = zondy.video
// ES6引入方式
import { MapView } from "@mapgis/webclient-video-plugin";
import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle} from "@mapgis/webclient-common";
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
this.mapView = new MapView({
// 视图id
viewId: "mapgis-2d-viewer",
// 图层管理容器
map: map,
})
// 创建一个要素
const feature = [
new Feature({
id: '11113',
geometry: new Circle({
center: [113, 35],
radius: 10000,
radiusUnit: 'kilometers',
})
}),
new Feature({
id: '11114',
geometry: new Polygon({
coordinates: [
// 外圈
[
[113.0, 29.0],
[116.0, 29.0],
[116.0, 35.0],
[113.0, 35.0],
[113.0, 29.0]
]
]
})
}),
new Feature({
id: '11115',
geometry:new MultiPolygon({
coordinates: [
[
// 外圈
[
[112.0, 28.0],
[115.0, 28.0],
[115.0, 30.0],
[112.0, 30.0],
[112.0, 28.0]
],
// 第一个内圈
[
[112.2, 28.2],
[112.2, 29.8],
[114.8, 29.8],
[114.8, 28.2],
[112.2, 28.2]
]
]
]
})
})
]
// 初始化几何图层
const graphicsLayer = new GraphicsLayer({
graphics:feature
})
map.add(this.graphicsLayer)
const result = this.mapView.hitTest({x:1100,y:600})</code></pre>
</div>
<div class="member">
<h4 class="name" id="pixelCoordToGeoCoord">
<a class="href-link" href="#pixelCoordToGeoCoord">#</a>
<span class="code-name" style="font-size:30px">
pixelCoordToGeoCoord<span class="signature">(pixelCoord)</span>
</span>
</h4>
<div class="description">
<p>像素坐标转地理坐标，传入视频地图视图上的像素坐标</p>
</div>
<h4>参数:</h4>
<div class="table-container">
<table class="params table">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th class="last">描述</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>pixelCoord</code></td>
<td class="type">
<span class="param-type">Point</span>
</td>
<td class="description last"><p>像素坐标,单位为像素值</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<div class='columns method-parameter'>
<div class="column is-2"><label>返回值:</label></div>
<div class="column is-10">
<div class="columns">
<div class='param-desc column is-7'><p>地理坐标,经纬度表示</p></div>
<div class='column is-5 has-text-left'>
<label>类型: </label>
<span class="param-type">Point</span>
</div>
</div>
</div>
</div>
<h5>示例</h5>
<p class="code-caption"><h7 id = pixelCoordToGeoCoord>像素坐标转地理坐标示例</h7></p>
<pre class="prettyprint"><code>// ES5引入方式
const { Point } = zondy.geometry
// ES6引入方式
import { Point } from "@mapgis/webclient-common"
const geoCoord = videoMapView.toMap(new Point({ coordinates: [0, 0] }))</code></pre>
</div>
</div>
</div>
<div class='vertical-section' style='margin-top: 10px'>
<h3 id='event'>事件</h3>
<div class="members">
<div class="member">
<h4 class="name" id="event:%E5%9C%B0%E5%9B%BE%E8%A7%86%E5%9B%BE%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E5%9C%B0%E5%9B%BE%E8%A7%86%E5%9B%BE%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
地图视图加载完毕事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>视频地图视图加载完毕事件</h7></p>
<pre class="prettyprint"><code>view.on('loaded', (event) => {
console.log("视频地图加载完成事件:", event)
})</code></pre>
</div>
<div class="member">
<h4 class="name" id="event:%E9%BC%A0%E6%A0%87%E5%8F%8C%E5%87%BB%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E9%BC%A0%E6%A0%87%E5%8F%8C%E5%87%BB%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
鼠标双击事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">ViewEventType</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'double-click'
</td>
<td class="description last"><p>事件类型</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>absolutePointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的绝对位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>pointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的像素位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>视图上被点击到的几何图形</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>isClick</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>是否是点击事件</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标原事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>鼠标双击事件</h7></p>
<pre class="prettyprint"><code>view.on('double-click', (event) => {
console.log("双击事件:", event)
})</code></pre>
</div>
<div class="member">
<h4 class="name" id="event:%E9%BC%A0%E6%A0%87%E6%8A%AC%E8%B5%B7%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E9%BC%A0%E6%A0%87%E6%8A%AC%E8%B5%B7%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
鼠标抬起事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">ViewEventType</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'mouse-up'
</td>
<td class="description last"><p>事件类型</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>absolutePointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的绝对位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>pointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的像素位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>视图上被点击到的几何图形</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>isClick</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>是否是点击事件</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标原事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>鼠标抬起事件</h7></p>
<pre class="prettyprint"><code>view.on('mouse-up', (event) => {
console.log("抬起事件:", event)
})</code></pre>
</div>
<div class="member">
<h4 class="name" id="event:%E9%BC%A0%E6%A0%87%E6%8C%89%E4%B8%8B%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E9%BC%A0%E6%A0%87%E6%8C%89%E4%B8%8B%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
鼠标按下事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">ViewEventType</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'mouse-down'
</td>
<td class="description last"><p>事件类型</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>absolutePointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的绝对位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>pointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的像素位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>视图上被点击到的几何图形</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>isClick</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>是否是点击事件</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标原事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>鼠标按下事件</h7></p>
<pre class="prettyprint"><code>view.on('mouse-down', (event) => {
console.log("按下事件:", event)
})</code></pre>
</div>
<div class="member">
<h4 class="name" id="event:%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
鼠标点击事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">ViewEventType</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'click'
</td>
<td class="description last"><p>事件类型</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>absolutePointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的绝对位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>pointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的像素位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>视图上被点击到的几何图形</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>isClick</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>是否是点击事件</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标原事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>鼠标点击事件</h7></p>
<pre class="prettyprint"><code>view.on('click', (event) => {
console.log("点击事件:", event)
})</code></pre>
</div>
<div class="member">
<h4 class="name" id="event:%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%85%A5%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%85%A5%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
鼠标移入事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">ViewEventType</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'mouse-over'
</td>
<td class="description last"><p>事件类型</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>视图上的几何图形</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标原事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>鼠标移入事件</h7></p>
<pre class="prettyprint"><code>view.on('mouse-over', (event) => {
console.log("移入事件:", event)
})</code></pre>
</div>
<div class="member">
<h4 class="name" id="event:%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%87%BA%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%87%BA%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
鼠标移出事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">ViewEventType</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'mouse-out'
</td>
<td class="description last"><p>事件类型</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>视图上的几何图形</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标原事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>鼠标移出事件</h7></p>
<pre class="prettyprint"><code>view.on('mouse-out', (event) => {
console.log("移出事件:", event)
})</code></pre>
</div>
<div class="member">
<h4 class="name" id="event:%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E4%BA%8B%E4%BB%B6">
<a class="href-link" href="#event:%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E4%BA%8B%E4%BB%B6">#</a>
<span class="code-name" style="font-size:30px">
鼠标移动事件
</span>
</h4>
<h5 class="subsection-title">属性:</h5>
<div class="table-container">
<table class="props table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>事件对象</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">ViewEventType</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'mouse-move'
</td>
<td class="description last"><p>事件类型</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>absolutePointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的绝对位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>pointer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标在视图的像素位置</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>视图上的几何图形</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>isClick</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>是否是点击事件</p></td>
</tr>
<tr class="deep-level-1">
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>鼠标原事件对象</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>鼠标移动事件</h7></p>
<pre class="prettyprint"><code>view.on('mouse-move', (event) => {
console.log("移动事件:", event)
})</code></pre>
</div>
</div>
</div>
</article>
</section>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
<p class="sidebar-created-by">
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
<a href="http://webclient.smaryun.com:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
</p>
</div>
</footer>
</div>
<div id="side-nav" class="side-nav">
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
</div>
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
</div>
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
</div>
<div>
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
</div>
</div>
</div>
<script src="scripts/linenumber.js"> </script>
<script src="scripts/search.js"> </script>
</body>
</html>