@mapgis/webclient-leaflet-plugin

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> SketchEditorLeaflet</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="/docs/cesium/index.html" > Cesium </a> <a class="link user-link " href="/docs/mapboxgl/index.html" > MapboxGL </a> <a class="link user-link " href="/docs/leaflet/index.html" > Leaflet </a> <a class="link user-link " href="/docs/openlayers/index.html" > OpenLayers </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><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="DrawControl.html">DrawControl</a><span style="display: none;"><p>绘制工具</p></span></li><li><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>二维场景视图(leaflet引擎)，对地图引擎进行管理，如果要对地图图层进行管理请参考<code>Map</code>，<br/> 参考示例： <a href='#MapView'>[初始化二维场景视图]</a> <br>[ES5引入方式]：<br/> Zondy.MapView() <br/> [ES6引入方式]：<br/> import { MapView } from '@mapgis/webclient-leaflet-plugin' <br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Popup.html">Popup</a><span style="display: none;"><p>二维场景信息弹窗(leaflet引擎) 参考示例： <a href='#MapView'>[初始化二维场景视图]</a> [ES6引入方式]：<br/> import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/> 自定义样式说明：<br/> zondy-popup__content 弹窗容器样式<br/> zondy-popup__tip 弹窗对话框箭头样式<br/> zondy-popup__header 弹窗头部样式<br/> zondy-popup__content 弹窗主体样式<br/> zondy-popup__footer 弹窗底部样式<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Screenshot.html">Screenshot</a><span style="display: none;"><p>屏幕打印工具</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><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorLeaflet.html">SketchEditorLeaflet</a><span style="display: none;"><p>二维场景草图编辑类<br/> <br>[ES5引入方式]：<br/> const { SketchEditorLeaflet } = Zondy <br/> [ES6引入方式]：<br/> import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/></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><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Zondy.ThemeLayer.GraphThemeLayer.html">GraphThemeLayer</a><span style="display: none;"><p>统计专题图通过为每个要素绘制统计图表来反映其对应的专题值的大小。它可同时表示多个字段属性信息，在区域本身与各区域之间形成横向和纵向的对比。<br>统计专题图多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。目前提供的统计图类型有：柱状图（Bar），折线图（Line），饼图（Pie），三维柱状图（Bar3D），点状图（Point），环状图（Ring）。</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">SketchEditorLeaflet</span> </header> <section> <article> <div class="container-overview"> <div class='vertical-section'> <div class="members"> <div class="member"> <h4 class="name" id="SketchEditorLeaflet"> <a class="href-link" href="#SketchEditorLeaflet">#</a> <span class="code-name" style="font-size:30px"> new SketchEditorLeaflet<span class="signature">(options)</span> </span> </h4> <div class="description"> <p>二维场景草图编辑类<br/> <br>[ES5引入方式]：<br/> const { SketchEditorLeaflet } = Zondy <br/> [ES6引入方式]：<br/> import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <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"><a href="MapView.html">MapView</a></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"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line10">line 10</a> </span> </p> </dl> <div class="method-parameter columns"> <div class="column is-2"><label>绑定事件:</label></div> <div class="column is-10"> <ul> <li>SketchEditor#event:草图绘制完成事件</li> <li>SketchEditor#event:草图被选中事件</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 { SketchEditorLeaflet } = Zondy [ES6引入方式]： import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) var simpleMarkerSymbol = new SimpleMarkerSymbol({ color: new Color(24, 144, 255, 1), size: 10, }); var sketchStyle = new SketchStyle({ vertexStyle: simpleMarkerSymbol, lineStyle: undefined, fillStyle: undefined }) var SketchEditorLeaflet = new SketchEditorLeaflet({ view: mapView, layer: new GraphicsLayer(), vertexStyle: vertexStyle }) SketchEditorLeaflet.start(SketchDataType.POINT) // 绘制点 SketchEditorLeaflet.start(SketchDataType.POLYLINE) // 绘制线 SketchEditorLeaflet.start(SketchDataType.POLYGON) // 绘制区 *</code></pre> </div> </div> </div> </div> <h3 class="subsection-title">继承关系</h3> <ul> <li><a href="SketchEditor.html">SketchEditor</a></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">Number</span> </span> <h4 class="name" id="_drawTool"> <a class="href-link" href="#_drawTool">#</a> <span class="code-name"> _drawTool </span> </h4> <div class="description"> <p>草图绘制工具</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="SketchEditor.html#_drawTool">SketchEditor#_drawTool</a> </li></ul></dd> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line113">line 113</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">SketchStyle</span> </span> <h4 class="name" id="_editable"> <a class="href-link" href="#_editable">#</a> <span class="code-name"> _editable </span> </h4> <div class="description"> <p>草图是否可编辑</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="SketchEditor.html#_editable">SketchEditor#_editable</a> </li></ul></dd> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line93">line 93</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">Number</span> </span> <h4 class="name" id="_sketchDataType"> <a class="href-link" href="#_sketchDataType">#</a> <span class="code-name"> _sketchDataType </span> </h4> <div class="description"> <p>草图绘制类型</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="SketchEditor.html#_sketchDataType">SketchEditor#_sketchDataType</a> </li></ul></dd> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line118">line 118</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">GraphicsLayer</span> </span> <h4 class="name" id="layer"> <a class="href-link" href="#layer">#</a> <span class="code-name"> layer </span> </h4> <div class="description"> <p>草图图层</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="SketchEditor.html#layer">SketchEditor#layer</a> </li></ul></dd> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line83">line 83</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">Number</span> </span> <h4 class="name" id="measureOption"> <a class="href-link" href="#measureOption">#</a> <span class="code-name"> measureOption </span> </h4> <div class="description"> <p>草图量算配置项</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="SketchEditor.html#measureOption">SketchEditor#measureOption</a> </li></ul></dd> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line108">line 108</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">SketchStyle</span> </span> <h4 class="name" id="sketchStyle"> <a class="href-link" href="#sketchStyle">#</a> <span class="code-name"> sketchStyle </span> </h4> <div class="description"> <p>草图符号</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="SketchEditor.html#sketchStyle">SketchEditor#sketchStyle</a> </li></ul></dd> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line88">line 88</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">Object</span> </span> <h4 class="name" id="snapOption"> <a class="href-link" href="#snapOption">#</a> <span class="code-name"> snapOption </span> <span class='tag'>Optional</span> </h4> <div class="description"> <p>草图捕获配置项</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="SketchEditor.html#snapOption">SketchEditor#snapOption</a> </li></ul></dd> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line98">line 98</a> </span> </p> </dl> </div> </div> </div> <div class='vertical-section'> <h3 id='function'>方法</h3> <div class="members"> <div class="member"> <h4 class="name" id="addVertex"> <a class="href-link" href="#addVertex">#</a> <span class="code-name" style="font-size:30px"> addVertex<span class="signature">(point, index)</span> </span> </h4> <div class="description"> <p>向当前线或区草图中插入新的顶点<a id='addVertex'></a></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>point</code></td> <td class="type"> <span class="param-type">Point</span> </td> <td class="description last"><p>新增/插入顶点</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>index</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="description last"><p>新增/新增点的序号</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line188">line 188</a> </span> </p> </dl> </div> <div class="member"> <h4 class="name" id="canRedo"> <a class="href-link" href="#canRedo">#</a> <span class="code-name" style="font-size:30px"> canRedo<span class="signature">()</span> </span> </h4> <div class="description"> <p>草图是否可执行恢复操作<a id='canRedo'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line554">line 554</a> </span> </p> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值:</label></div> <div class="column is-10"> <div class="columns"> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type">Boolean</span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="canUndo"> <a class="href-link" href="#canUndo">#</a> <span class="code-name" style="font-size:30px"> canUndo<span class="signature">()</span> </span> </h4> <div class="description"> <p>草图是否可执行撤销操作<a id='canUndo'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line546">line 546</a> </span> </p> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值:</label></div> <div class="column is-10"> <div class="columns"> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type">Boolean</span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="drawPolylineToPolygon"> <a class="href-link" href="#drawPolylineToPolygon">#</a> <span class="code-name" style="font-size:30px"> drawPolylineToPolygon<span class="signature">(snapAndReferGeometries)</span> </span> </h4> <div class="description"> <p>线拓扑造区<a id='drawPolylineToPolygon'></a></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>snapAndReferGeometries</code></td> <td class="type"> <span class="param-type">Array.<Polygon></span> </td> <td class="description last"><p>捕获参考几何对象数组</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line484">line 484</a> </span> </p> </dl> <h5>示例</h5> <p class="code-caption"><h7>二维草图线拓扑造区</h7></p> <pre class="prettyprint"><code>// [ES5引入方式]： const { MapView, SketchEditorLeaflet, Polygon, LineString } = Zondy [ES6引入方式]： import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> import { Polygon, LineString } from "@mapgis/webclient-common" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) var testGeometries = [ new Polygon({ coordinates: [ [ [114.0, 29.0], [117.0, 29.0], [117.0, 35.0], [114.0, 35.0], [114.0, 29.0] ] ] }), new Polygon({ coordinates: [ [ [113.0, 29.0], [116.0, 29.0], [116.0, 35.0], [113.0, 35.0], [113.0, 29.0] ] ] }) ] testFeatures = [ new Feature({ id: '11114', geometry: this.testGeometries[0], symbol: new SimpleFillSymbol({ color: new Color(0, 255, 255, 0.5), outline: new SimpleLineSymbol({ color: new Color(0, 255, 255, 0.8), width: 2 }) }) }), new Feature({ id: '11115', geometry: this.testGeometries[1], symbol: new SimpleFillSymbol({ color: new Color(0, 255, 255, 0.5), outline: new SimpleLineSymbol({ color: new Color(0, 255, 255, 0.8), width: 2 }) }) }), ] var testLayer = new GraphicsLayer({ graphics: this.testFeatures }) map.add(testLayer) var sketchEditorLeaflet = new SketchEditorLeaflet({ view: mapView, layer: new GraphicsLayer() }) sketchEditorLeaflet.drawPolylineToPolygon(testGeometries)</code></pre> </div> <div class="member"> <h4 class="name" id="getGeometry"> <a class="href-link" href="#getGeometry">#</a> <span class="code-name" style="font-size:30px"> getGeometry<span class="signature">()</span> </span> </h4> <div class="description"> <p>获取草图几何对象<a id='getGeometry'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line317">line 317</a> </span> </p> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值:</label></div> <div class="column is-10"> <div class="columns"> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type">Geometry</span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="getSketchStyle"> <a class="href-link" href="#getSketchStyle">#</a> <span class="code-name" style="font-size:30px"> getSketchStyle<span class="signature">()</span> </span> </h4> <div class="description"> <p>获取草图样式<a id='getSketchStyle'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line309">line 309</a> </span> </p> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值:</label></div> <div class="column is-10"> <div class="columns"> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type">SketchStyle</span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="redo"> <a class="href-link" href="#redo">#</a> <span class="code-name" style="font-size:30px"> redo<span class="signature">()</span> </span> </h4> <div class="description"> <p>恢复被撤销的草图<a id='redo'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line538">line 538</a> </span> </p> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值:</label></div> <div class="column is-10"> <div class="columns"> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type">Geometry</span> </div> </div> </div> </div> <h5>示例</h5> <p class="code-caption"><h7>二维草图几何分割</h7></p> <pre class="prettyprint"><code>// [ES5引入方式]： const { SketchEditorLeaflet } = Zondy [ES6引入方式]： import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> import { Polygon, LineString } from "@mapgis/webclient-common" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) var SketchEditorLeaflet = new SketchEditorLeaflet({ view: mapView, layer: new GraphicsLayer() }) SketchEditorLeaflet.start(SketchDataType.POLYGON) console.log("是否可以进行恢复操作：" + this.SketchEditorLeaflet.canRedo()) const geometry = this.SketchEditorLeaflet.redo() console.log("恢复后的几何对象" + geometry)</code></pre> </div> <div class="member"> <h4 class="name" id="remove"> <a class="href-link" href="#remove">#</a> <span class="code-name" style="font-size:30px"> remove<span class="signature">()</span> </span> </h4> <div class="description"> <p>移除当前草图<a id='remove'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line171">line 171</a> </span> </p> </dl> </div> <div class="member"> <h4 class="name" id="removeVertex"> <a class="href-link" href="#removeVertex">#</a> <span class="code-name" style="font-size:30px"> removeVertex<span class="signature">(index)</span> </span> </h4> <div class="description"> <p>移除草图图形的某个顶点<a id='removeVertex'></a></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>index</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="description last"><p>需更新的顶点的序号</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line205">line 205</a> </span> </p> </dl> </div> <div class="member"> <h4 class="name" id="setSketchStyle"> <a class="href-link" href="#setSketchStyle">#</a> <span class="code-name" style="font-size:30px"> setSketchStyle<span class="signature">(sketchStyle)</span> </span> </h4> <div class="description"> <p>设置草图样式<a id='setSketchStyle'></a></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>sketchStyle</code></td> <td class="type"> <span class="param-type">SketchStyle</span> </td> <td class="description last"></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line301">line 301</a> </span> </p> </dl> <h5>示例</h5> <pre class="prettyprint"><code>// ES5引入方式 const { SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol } = Zondy.Symbol const { Map, MapView, Color, SketchStyle, SketchEditorLeaflet } = Zondy const { SketchDataType } = Zondy.Enum // ES6引入方式 import { Map, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, Color, SketchStyle, SketchDataType } from "@mapgis/webclient-common" import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) // 新建一个填充样式 var fillStyle = new SimpleFillSymbol({ color: new Color(0, 255, 255, 1), outline: new SimpleLineSymbol({ color: new Color(255, 0, 0, 1), width: 2 }) }) // 新建一个草图样式 var sketchStyle = new SketchStyle({ vertexStyle: new SimpleMarkerSymbol({ color: new Color(0, 255, 255, 1), size: 10, outline: new SimpleLineSymbol({ color: new Color(255, 255, 255, 1), width: 3 }) }), lineStyle: new SimpleLineSymbol({ color: new Color(0, 255, 255, 0.8), width: 3 }), fillStyle: new SimpleFillSymbol({ color: new Color(0, 255, 255, 0.5), outline: new SimpleLineSymbol({ color: new Color(0, 255, 255, 0.8), width: 2 }) }), selectBoxStyle: new SimpleFillSymbol({ color: new Color(122, 22, 255, 0.5), outline: new SimpleLineSymbol({ color: new Color(122, 22, 255, 0.8), width: 1 }) }), selectVertexStyle: new SimpleMarkerSymbol({ color: new Color(122, 22, 255, 1), size: 12, outline: new SimpleLineSymbol({ color: new Color(255, 255, 255, 1), width: 1 }) }), selectVertexStyle: new SimpleMarkerSymbol({ color: new Color(0, 188, 0, 1), size: 11, outline: new SimpleLineSymbol({ color: new Color(255, 255, 255, 1), width: 1 }) }), selectMidVertexStyle: new SimpleMarkerSymbol({ color: new Color(0, 0, 255, 1), size: 8, outline: new SimpleLineSymbol({ color: new Color(255, 255, 255, 1), width: 1 }) }) }) var sketchEditor = new SketchEditorLeaflet({ view: mapView, layer: graphicsLayer, }) sketchEditor.setSketchStyle(sketchStyle) sketchEditor.start(SketchDataType.POLYGON)</code></pre> </div> <div class="member"> <h4 class="name" id="split"> <a class="href-link" href="#split">#</a> <span class="code-name" style="font-size:30px"> split<span class="signature">(target, splitPolyline)</span> </span> </h4> <div class="description"> <p>分割草图对象或区几何对象<a id='split'></a></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>target</code></td> <td class="type"> <span class="param-type">Polygon</span> | <span class="param-type"><a href="SketchEditor.html">SketchEditor</a></span> </td> <td class="description last"><p>被分割的几何/草图对象</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>splitPolyline</code></td> <td class="type"> <span class="param-type">Polyline</span> </td> <td class="description last"><p>线几何对象</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line408">line 408</a> </span> </p> </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.<Polygon></span> </div> </div> </div> </div> <h5>示例</h5> <p class="code-caption"><h7>二维草图几何分割</h7></p> <pre class="prettyprint"><code>// [ES5引入方式]： const { MapView, SketchEditorLeaflet, Polygon, LineString } = Zondy [ES6引入方式]： import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> import { Polygon, LineString } from "@mapgis/webclient-common" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) var SketchEditorLeaflet = new SketchEditorLeaflet({ view: mapView, layer: new GraphicsLayer() }) const polygon = new Polygon({ coordinates: [ [ [108, 29], [116, 29], [116, 33], [108, 33], [108, 29] ] ] }) const polyline = new LineString({ coordinates: [ [100, 30], [120, 30] ] }) const newSketchEditors = SketchEditorLeaflet.split(polygon,polyline)</code></pre> </div> <div class="member"> <h4 class="name" id="start"> <a class="href-link" href="#start">#</a> <span class="code-name" style="font-size:30px"> start<span class="signature">(dataType)</span> </span> </h4> <div class="description"> <p>开始绘制草图<a id='start'></a></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>dataType</code></td> <td class="type"> <span class="param-type">SketchDataType</span> </td> <td class="description last"><p>草图编辑类型</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line157">line 157</a> </span> </p> </dl> <h5>示例</h5> <p class="code-caption"><h7>初始化一个二维场景草图编辑类</h7></p> <pre class="prettyprint"><code>// [ES5引入方式]： const { SketchEditorLeaflet } = Zondy [ES6引入方式]： import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) var simpleMarkerSymbol = new SimpleMarkerSymbol({ color: new Color(24, 144, 255, 1), size: 10, }); var sketchStyle = new SketchStyle({ vertexStyle: simpleMarkerSymbol, lineStyle: undefined, fillStyle: undefined }) var SketchEditorLeaflet = new SketchEditorLeaflet({ view: mapView, layer: new GraphicsLayer(), vertexStyle: vertexStyle }) SketchEditorLeaflet.start(SketchDataType.POINT) // 绘制点 SketchEditorLeaflet.start(SketchDataType.POLYLINE) // 绘制线 SketchEditorLeaflet.start(SketchDataType.POLYGON) // 绘制区</code></pre> </div> <div class="member"> <h4 class="name" id="stop"> <a class="href-link" href="#stop">#</a> <span class="code-name" style="font-size:30px"> stop<span class="signature">()</span> </span> </h4> <div class="description"> <p>停止绘制<a id='stop'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line164">line 164</a> </span> </p> </dl> </div> <div class="member"> <h4 class="name" id="undo"> <a class="href-link" href="#undo">#</a> <span class="code-name" style="font-size:30px"> undo<span class="signature">()</span> </span> </h4> <div class="description"> <p>撤销当前编辑操作<a id='undo'></a></p> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line511">line 511</a> </span> </p> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值:</label></div> <div class="column is-10"> <div class="columns"> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type">Geometry</span> </div> </div> </div> </div> <h5>示例</h5> <p class="code-caption"><h7>二维草图几何分割</h7></p> <pre class="prettyprint"><code>// [ES5引入方式]： const { MapView, SketchEditorLeaflet, Polygon, LineString, SketchDataType } = Zondy [ES6引入方式]： import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> import { Polygon, LineString, SketchDataType } from "@mapgis/webclient-common" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) var SketchEditorLeaflet = new SketchEditorLeaflet({ view: mapView, layer: new GraphicsLayer() }) SketchEditorLeaflet.start(SketchDataType.POLYGON) console.log("是否可以进行撤销操作：" + this.SketchEditorLeaflet.canUndo()) const geometry = this.SketchEditorLeaflet.undo() console.log("恢复后的几何对象" + geometry)</code></pre> </div> <div class="member"> <h4 class="name" id="union"> <a class="href-link" href="#union">#</a> <span class="code-name" style="font-size:30px"> union<span class="signature">(polygons)</span> </span> </h4> <div class="description"> <p>合并多个区几何<a id='union'></a></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>polygons</code></td> <td class="type"> <span class="param-type">Polygon</span> </td> <td class="description last"><p>被合并的区几何对象</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="sketchEditor_SketchEditorLeaflet.js.html" class="button">查看源代码</a> <span> <a href="sketchEditor_SketchEditorLeaflet.js.html">sketchEditor/SketchEditorLeaflet.js</a>, <a href="sketchEditor_SketchEditorLeaflet.js.html#line365">line 365</a> </span> </p> </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">Polygon</span> </div> </div> </div> </div> <h5>示例</h5> <p class="code-caption"><h7>二维草图几何合并</h7></p> <pre class="prettyprint"><code>// [ES5引入方式]： const { MapView, SketchEditorLeaflet, polygon } = Zondy [ES6引入方式]： import { MapView, SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/> import { polygon } from "@mapgis/webclient-common" <br/> var map = new Map() var mapView = new MapView({ viewId: "mapgis-2d-viewer", map: map, }) var SketchEditorLeaflet = new SketchEditorLeaflet({ view: mapView, layer: new GraphicsLayer() }) const polygon = new Polygon({ coordinates: [ [ [0, -60], [0, 60], [160, 60], [160, -60], [0, -60] ] ] }) const polygon1 = new Polygon({ coordinates: [ [ [10, -60], [10, 60], [170, 60], [170, -60], [10, -60] ] ] }) const polygons = [polygon,polygon1] SketchEditorLeaflet.union(polygons)</code></pre> </div> <div class="member"> <h