@mapgis/webclient-leaflet-plugin
Version:
开发时需要引入MapGIS Client for JavaScript（Leaflet）开发包；其中包括必备的 CSS 文件和 JS 文件；
3,444 lines (1,257 loc) • 49 kB
HTML
<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" id="SketchEditorLeaflet" style="font-size:30px">
new SketchEditorLeaflet<span class="signature">(options)</span>
</span>
</h4>
<div class="description">
<p>二维Leaflet引擎草图编辑类<br/>
<br>[ES5引入方式]：<br/>
const { SketchEditor } = zondy.leaflet.tool.sketch <br/>
[ES6引入方式]：<br/>
import { SketchEditor } 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">
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 { Color } = zondy
const { SketchDataType } = zondy.enum
const { SimpleMarkerSymbol } = zondy.symbol
const { SketchStyle } = zondy.tool.sketch
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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 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>
<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="#addVertex">addVertex</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>向当前线或区草图中插入新的顶点</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#canRedo">canRedo</a></code></td>
<td class="name">
<code>
<span class="param-type">
Boolean
</span>
</code>
</td>
<td class="name"><code><p>草图是否可执行恢复操作</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#canUndo">canUndo</a></code></td>
<td class="name">
<code>
<span class="param-type">
Boolean
</span>
</code>
</td>
<td class="name"><code><p>草图是否可执行撤销操作</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#drawPolylineToPolygon">drawPolylineToPolygon</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>线拓扑造区</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#getGeometry">getGeometry</a></code></td>
<td class="name">
<code>
<span class="param-type">
Geometry
</span>
</code>
</td>
<td class="name"><code><p>获取草图几何对象</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#getSketchStyle">getSketchStyle</a></code></td>
<td class="name">
<code>
<span class="param-type">
SketchStyle
</span>
</code>
</td>
<td class="name"><code><p>获取草图样式</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#redo">redo</a></code></td>
<td class="name">
<code>
<span class="param-type">
Geometry
</span>
</code>
</td>
<td class="name"><code><p>恢复被撤销的草图</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#remove">remove</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>移除当前草图</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#removeVertex">removeVertex</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>移除草图图形的某个顶点</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#setSketchStyle">setSketchStyle</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>设置草图样式</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#split">split</a></code></td>
<td class="name">
<code>
<span class="param-type">
Array.<Polygon>
</span>
</code>
</td>
<td class="name"><code><p>分割草图对象或区几何对象</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#start">start</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>开始绘制草图</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#startCustomDrawTool">startCustomDrawTool</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>开始绘制草图</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#stop">stop</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>停止绘制</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#undo">undo</a></code></td>
<td class="name">
<code>
<span class="param-type">
Geometry
</span>
</code>
</td>
<td class="name"><code><p>撤销当前编辑操作</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#union">union</a></code></td>
<td class="name">
<code>
<span class="param-type">
Polygon
</span>
</code>
</td>
<td class="name"><code><p>合并多个区几何</code></td>
</tr>
<tr class="deep-level-0">
<td class="name"><code><a href="#updateVertex">updateVertex</a></code></td>
<td class="name">
<code>
</code>
</td>
<td class="name"><code><p>更新当前草图图形的某个顶点</code></td>
</tr>
</tbody>
</table>
</div>
<h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4>
<div class="member">
<h4 class="name" id="addVertex">
<a class="href-link" href="#addVertex">#</a>
<span class="code-name" id="addVertex" 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">
</dl>
</div>
<div class="member">
<h4 class="name" id="canRedo">
<a class="href-link" href="#canRedo">#</a>
<span class="code-name" id="canRedo" style="font-size:30px">
canRedo<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>草图是否可执行恢复操作<a id='canRedo'></a></p>
</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='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" id="canUndo" style="font-size:30px">
canUndo<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>草图是否可执行撤销操作<a id='canUndo'></a></p>
</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='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" id="drawPolylineToPolygon" 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">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>二维草图线拓扑造区</h7></p>
<pre class="prettyprint"><code>// [ES5引入方式]：
const { Polygon, LineString } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[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 sketchEditor = new SketchEditor({
view: mapView,
layer: new GraphicsLayer()
})
sketchEditor.drawPolylineToPolygon(testGeometries)</code></pre>
</div>
<div class="member">
<h4 class="name" id="getGeometry">
<a class="href-link" href="#getGeometry">#</a>
<span class="code-name" id="getGeometry" style="font-size:30px">
getGeometry<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>获取草图几何对象<a id='getGeometry'></a></p>
</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='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" id="getSketchStyle" style="font-size:30px">
getSketchStyle<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>获取草图样式<a id='getSketchStyle'></a></p>
</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='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" id="redo" style="font-size:30px">
redo<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>恢复被撤销的草图<a id='redo'></a></p>
</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='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 { Polygon, LineString } = zondy.geometry
const { SketchDataType } = zondy.enum
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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 sketchEditor = new SketchEditor({
view: mapView,
layer: new GraphicsLayer()
})
sketchEditor.start(SketchDataType.POLYGON)
console.log("是否可以进行恢复操作：" + sketchEditor.canRedo())
const geometry = sketchEditor.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" id="remove" style="font-size:30px">
remove<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>移除当前草图<a id='remove'></a></p>
</div>
<dl class="details">
</dl>
</div>
<div class="member">
<h4 class="name" id="removeVertex">
<a class="href-link" href="#removeVertex">#</a>
<span class="code-name" id="removeVertex" 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">
</dl>
</div>
<div class="member">
<h4 class="name" id="setSketchStyle">
<a class="href-link" href="#setSketchStyle">#</a>
<span class="code-name" id="setSketchStyle" 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">
</dl>
<h5>示例</h5>
<pre class="prettyprint"><code>// ES5引入方式
const { SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol } = zondy.Symbol
const { Map, Color } = zondy
const { MapView } = zondy.leaflet
const { SketchStyle } = zondy.tool.sketch
const { SketchEditor } = zondy.leaflet.tool.sketch
const { SketchDataType } = zondy.Enum
// ES6引入方式
import { Map, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, Color, SketchStyle, SketchDataType } from "@mapgis/webclient-common"
import { MapView, SketchEditor } 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 SketchEditor({
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" id="split" 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">
SketchEditor
</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">
</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 { Polygon, LineString } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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 sketchEditor = new SketchEditor({
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 = SketchEditor.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" id="start" style="font-size:30px">
start<span class="signature">(dataType, extensionOptions)</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>
<tr class="deep-level-0">
<td class="name"><code>extensionOptions</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>// [ES5引入方式]：
const { Color } = zondy
const { SketchDataType } = zondy.enum
const { SimpleMarkerSymbol } = zondy.symbol
const { SketchStyle } = zondy.tool.sketch
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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 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 class="member">
<h4 class="name" id="startCustomDrawTool">
<a class="href-link" href="#startCustomDrawTool">#</a>
<span class="code-name" id="startCustomDrawTool" style="font-size:30px">
startCustomDrawTool<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">
</dl>
<h5>示例</h5>
<p class="code-caption"><h7>初始化一个二维场景草图编辑类</h7></p>
<pre class="prettyprint"><code>// [ES5引入方式]：
const { Color } = zondy
const { SketchDataType } = zondy.enum
const { SimpleMarkerSymbol } = zondy.symbol
const { SketchStyle } = zondy.tool.sketch
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } from "@mapgis/webclient-leaflet-plugin" <br/>
import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" <br/>
import SketchEllipseDrawTool from "./SketchEllipseDrawTool" <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 sketchEditor = new SketchEditor({
view: mapView,
layer: new GraphicsLayer(),
vertexStyle: vertexStyle
})
sketchEditor.startCustomDrawTool(SketchEllipseDrawTool, "ellipse") // 绘制椭圆</code></pre>
</div>
<div class="member">
<h4 class="name" id="stop">
<a class="href-link" href="#stop">#</a>
<span class="code-name" id="stop" style="font-size:30px">
stop<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>停止绘制<a id='stop'></a></p>
</div>
<dl class="details">
</dl>
</div>
<div class="member">
<h4 class="name" id="undo">
<a class="href-link" href="#undo">#</a>
<span class="code-name" id="undo" style="font-size:30px">
undo<span class="signature">()</span>
</span>
</h4>
<div class="description">
<p>撤销当前编辑操作<a id='undo'></a></p>
</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='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 { Polygon, LineString } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchDataType } = zondy.enum
const { SketchEditor } = zondy.leaflet.tool.sketch
[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 sketchEditor = new SketchEditor({
view: mapView,
layer: new GraphicsLayer()
})
sketchEditor.start(SketchDataType.POLYGON)
console.log("是否可以进行撤销操作：" + sketchEditor.canUndo())
const geometry = sketchEditor.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" id="union" 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">
</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 { Polygon } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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 sketchEditor = new SketchEditor({
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]
sketchEditor.union(polygons)</code></pre>
</div>
<div class="member">
<h4 class="name" id="updateVertex">
<a class="href-link" href="#updateVertex">#</a>
<span class="code-name" id="updateVertex" style="font-size:30px">
updateVertex<span class="signature">(point, index)</span>
</span>
</h4>
<div class="description">
<p>更新当前草图图形的某个顶点<a id='updateVertex'></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">
</dl>
</div>
</div>
</div>
</article>
</section>