@mapgis/webclient-video-plugin
Version:
3,655 lines • 46 kB
HTML
<header id="page-title" class="page-title">
<span class="page-title-main">类名</span>
<span class="page-title-sub">VideoMapView</span>
</header>
<section>
<article>
<div class="container-overview">
<div class='vertical-section'>
<div class="members">
<div class="member">
<h4 class="name" id="VideoMapView">
<a class="href-link" href="#VideoMapView">#</a>
<span class="code-name" id="VideoMapView" style="font-size:30px">
new VideoMapView<span class="signature">(options)</span>
</span>
</h4>
<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="#地图视图加载完毕事件">地图视图加载完毕事件</a></li>
<li><a href="#鼠标点击事件">鼠标点击事件</a></li>
<li><a href="#鼠标双击事件">鼠标双击事件</a></li>
<li><a href="#鼠标按下事件">鼠标按下事件</a></li>
<li><a href="#鼠标抬起事件">鼠标抬起事件</a></li>
<li><a href="#鼠标移动事件">鼠标移动事件</a></li>
<li><a href="#鼠标移出事件">鼠标移出事件</a></li>
<li><a href="#鼠标移入事件">鼠标移入事件</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, 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)</code></pre>
</div>
</div>
</div>
</div>
<h3 class="subsection-title">继承关系</h3>
<ul>
<li>Event</li>
</ul>
<div class='vertical-section'>
<h3 id='function'>方法</h3>
<h4 style="margin-top: 20px;margin-bottom: 20px;">方法概述</h4>
<div class="members">
<div class="table-container">
<table class="params table">
<thead>
<tr>
<th>名称</th>
<th>返回值类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code><a href="#geoCoordToPixelCoord">geoCoordToPixelCoord</a></code></td>
<td class="name">
<code>
<span class="param-type">
Point
</span>
</code>
</td>
<td class="name"><code><p>地理坐标转像素坐标，得到的像素坐标会受视频缩放影响</p></code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#pixelCoordToGeoCoord">pixelCoordToGeoCoord</a></code></td>
<td class="name">
<code>
<span class="param-type">
Point
</span>
</code>
</td>
<td class="name"><code><p>像素坐标转地理坐标，传入视频地图视图上的像素坐标</p></code></td>
</tr>
</tbody>
</table>
</div>
<h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4>
<div class="member">
<h4 class="name" id="geoCoordToPixelCoord">
<a class="href-link" href="#geoCoordToPixelCoord">#</a>
<span class="code-name" id="geoCoordToPixelCoord" 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="pixelCoordToGeoCoord">
<a class="href-link" href="#pixelCoordToGeoCoord">#</a>
<span class="code-name" id="pixelCoordToGeoCoord" 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>
<h4 style="margin-top: 20px;margin-bottom: 20px;">事件概述</h4>
<div class="table-container">
<table class="params table">
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr class="deep-level-0">
<td class="name"><code><a href="#地图视图加载完毕事件">地图视图加载完毕事件</a></code></td>
<td class="name"><code>地图视图加载完毕事件</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#鼠标双击事件">鼠标双击事件</a></code></td>
<td class="name"><code>鼠标双击事件</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#鼠标抬起事件">鼠标抬起事件</a></code></td>
<td class="name"><code>鼠标抬起事件</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#鼠标按下事件">鼠标按下事件</a></code></td>
<td class="name"><code>鼠标按下事件</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#鼠标点击事件">鼠标点击事件</a></code></td>
<td class="name"><code>鼠标点击事件</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#鼠标移入事件">鼠标移入事件</a></code></td>
<td class="name"><code>鼠标移入事件</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#鼠标移出事件">鼠标移出事件</a></code></td>
<td class="name"><code>鼠标移出事件</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#鼠标移动事件">鼠标移动事件</a></code></td>
<td class="name"><code>鼠标移动事件</code></td>
</tr>
</tbody>
</table>
</div>
<h4 style="margin-top: 20px;margin-bottom: 20px;">事件详情</h4>
<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" id="地图视图加载完毕事件" 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" id="鼠标双击事件" 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" id="鼠标抬起事件" 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" id="鼠标按下事件" 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" id="鼠标点击事件" 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" id="鼠标移入事件" 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" id="鼠标移出事件" 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" id="鼠标移动事件" 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>