@mapgis/webclient-video-plugin/documention/VideoSketchEditor.html

<header id="page-title" class="page-title">
    
        <span class="page-title-main">类名</span>
        <span class="page-title-sub">VideoSketchEditor</span>
    
</header>





<section>

<article>
    <div class="container-overview">
    
        
            <div class='vertical-section'>
                <div class="members">
                    <div class="member">
                        


    
    <h4 class="name" id="VideoSketchEditor">
        <a class="href-link" href="#VideoSketchEditor">#</a>
        
        <span class="code-name" id="VideoSketchEditor" style="font-size:30px">
            
                new VideoSketchEditor<span class="signature">(options)</span>
            
        </span>
    </h4>
    

    
    <div class="description">
        <p>视频草图编辑类<br/>
<br>[ES5引入方式]：<br/>
const { SketchEditor } = zondy.video.tool.sketch <br/>
[ES6引入方式]：<br/>
import { SketchEditor } from &quot;@mapgis/webclient-leaflet-plugin&quot; <br/></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>options</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Object
    
</span>



  
  </td>

  

  <td class="description last"><p>构造参数</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>view</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             MapView
    
</span>
|

<span class="param-type">
    
             SceneView
    
</span>



  
  </td>

  

  <td class="description last"><p>地图视图对象</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>layer</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             GraphicsLayer
    
</span>



  
  </td>

  

  <td class="description last"><p>草图图层管对象</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>sketchStyle</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             SketchStyle
    
</span>



  
  </td>

  

  <td class="description last"><p>草图符号</p></td>
</tr>


  
    
<tr class="deep-level-1">
  
      <td class="name"><code>snapOption</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>





    <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>
            </ul>
        </div>
    </div>

















<p class="summary"><h5>支持如下方法：</h5>
<a href='#start'>[1、开始绘制草图]</a><br/>
<a href='#stop'>[2、停止绘制]</a><br/>
<a href='#remove'>[3、移除当前草图]</a><br/>
<a href='#addVertex'>[4、向草线或面草图中插入新的顶点]</a><br/>
<a href='#updateVertex'>[5、更新草图图形的某个顶点]</a><br/>
<a href='#removeVertex'>[6、移除草图图形的某个顶点]</a><br/>
<a href='#getSketchDataType'>[7、获取草图图形类型]</a><br/>
<a href='#setSketchStyle'>[8、设置草图样式]</a><br/>
<a href='#getSketchStyle'>[9、获取草图样式]</a><br/>
<a href='#getGeometry'>[10、获取草图几何对象]</a><br/>
<a href='#union'>[11、合并多个区几何]</a><br/>
<a href='#split'>[12、分割草图对象或区几何对象]</a><br/>
<a href='#undo'>[13、撤销当前编辑操作]</a><br/>
<a href='#redo'>[14、恢复被撤销的草图]</a><br/>
<a href='#drawPolylineToPolygon'>[15、拓扑线造区]</a><br/></p>



    <h5>示例</h5>
    
        <p class="code-caption"><h7>初始化一个二维场景草图编辑类</h7></p>
    
    
        <pre class="prettyprint"><code>// [ES5引入方式]：
const { VideoMapView } = zondy.video
const { SketchEditor } = zondy.video.tool.sketch
[ES6引入方式]：
import { VideoMapView, SketchEditor } from "@mapgis/webclient-leaflet-plugin" &lt;br/>
import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" &lt;br/>
var map = new Map()
var mapView = new VideoMapView({
  viewId: "mapgis-2d-viewer",
  map: map,
})
var videoLayer = new VideoMapLayer({})
mapView.add(videoLayer)
var simpleMarkerSymbol = new SimpleMarkerSymbol({
  color: new Color(24, 144, 255, 1),
  size: 10,
});
var sketchStyle = new SketchStyle({
  vertexStyle: simpleMarkerSymbol,
    lineStyle: undefined,
    fillStyle: undefined
  })
var sketchEditor = new SketchEditor({
  view: mapView,
  layer: new GraphicsLayer(),
  vertexStyle: vertexStyle
})
sketchEditor.start(SketchDataType.POINT) // 绘制点
sketchEditor.start(SketchDataType.POLYLINE) // 绘制线
sketchEditor.start(SketchDataType.POLYGON) // 绘制区
*</code></pre>
    



                    </div>
                </div>
            </div>
        
    
    </div>
    
    
        <h3 class="subsection-title">继承关系</h3>

        


    <ul>
        <li>SketchEditor</li>
    </ul>


    

    

    

    

    

    

    

    

    

    
</article>

</section>