@mapgis/webclient-video-plugin

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> MapView</title>  <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>