@mapgis/webclient-leaflet-plugin
Version:
893 lines (827 loc) • 33.1 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> sketchEditor/SketchEditorLeaflet.js</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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引擎)，对地图引擎进行管理，如果要对地图图层进行管理请参考[Map]{@link Map}，<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">sketchEditor/SketchEditorLeaflet.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import {
Zondy,
SketchEditor,
defaultValue,
SketchStyle,
Point,
SpatialReference,
Projection
} from '@mapgis/webclient-common'
/**
* 二维场景草图编辑类<br/>
* <br>[ES5引入方式]：<br/>
* const { SketchEditorLeaflet } = Zondy <br/>
* [ES6引入方式]：<br/>
* import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/>
* @classdesc 二维草图编辑类
* @class SketchEditorLeaflet
* @extends SketchEditor
* @moduleEX SketchEditorModule
* @fires SketchEditor#草图绘制完成事件
* @fires SketchEditor#草图被选中事件
* @param {Object} options 构造参数
* @param {MapView|SceneView} [options.view] 地图视图对象
* @param {GraphicsLayer} [options.layer] 草图图层管对象
* @param {SketchStyle} [options.sketchStyle] 草图符号
* @param {Object} [options.snapOption] 草图捕获配置项
*
* @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/>
*
* @example <caption><h7>初始化一个二维场景草图编辑类</h7></caption>
* // [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) // 绘制区
* * */
class SketchEditorLeaflet extends SketchEditor {
constructor(options) {
super(options)
options = defaultValue(options, {})
/**
* 地图视图
* @member {MapView|SceneView} SketchEditor.prototype.this.view
*/
this.view = options.view
/**
* 草图图层
* @member {GraphicsLayer} SketchEditor.prototype.layer
*/
this.layer = defaultValue(options.layer, undefined)
/**
* 草图符号
* @member {SketchStyle} SketchEditor.prototype.sketchStyle
*/
this.sketchStyle = defaultValue(options.sketchStyle, new SketchStyle())
/**
* 草图是否可编辑
* @member {SketchStyle} SketchEditor.prototype._editable
*/
this._editable = defaultValue(options.editable, true)
/**
* 草图捕获配置项
* @member {Object} [SketchEditor.prototype.snapOption = undefined]
* @param {Boolean} [snapOption.isSnapVertexCoincident = false] 是否自动捕捉顶点重合
* @param {Boolean} [snapOption.isSnapVertexInLine = false] 是否自动捕捉线上的点
* @param {Boolean} [snapOption.isSnapPerpendicular = false] 是否自动捕捉垂线垂点
* @param {Boolean} [snapOption.isSnapParallel = false] 是否自动捕捉平行线
* @param {Boolean} [snapOption.snapSketchGeometry = false] 是否捕捉正在绘制的图形的边界
*/
this.snapOption = defaultValue(options.snapOption, {})
/**
* 草图量算配置项
* @member {Number} SketchEditor.prototype.measureOption
*/
this.measureOption = defaultValue(options.measureOption, undefined)
/**
* 草图绘制工具
* @member {Number} SketchEditor.prototype._drawTool
*/
this._drawTool = null
/**
* 草图绘制类型
* @member {Number} SketchEditor.prototype._sketchDataType
*/
this._sketchDataType = null
}
/**
* 开始绘制草图<a id='start'></a>
* @param {SketchDataType} dataType 草图编辑类型
* @example <caption><h7>初始化一个二维场景草图编辑类</h7></caption>
* // [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) // 绘制区
*/
start(dataType) {
super.start(dataType)
}
/**
* 停止绘制<a id='stop'></a>
*/
stop() {
super.stop()
}
/**
* 移除当前草图<a id='remove'></a>
*/
remove() {
super.remove()
}
/**
* 更新当前选中的草图
* @private
*/
update(data, featureId) {
super.updateFeature(data, featureId)
}
/**
* 向当前线或区草图中插入新的顶点<a id='addVertex'></a>
* @param {Point} point 新增/插入顶点
* @param {Number} index 新增/新增点的序号
*/
addVertex(point, index) {
super.addVertex(point, index)
}
/**
* 更新当前草图图形的某个顶点<a id='updateVertex'></a>
* @param {Point} point 新的顶点
* @param {Number} index 需更新的顶点的序号
*/
updateVertex(point, index) {
super.updateVertex(point, index)
}
/**
* 移除草图图形的某个顶点<a id='removeVertex'></a>
* @param {Number} index 需更新的顶点的序号
*/
removeVertex(index) {
super.removeVertex(index)
}
/**
* 获取草图图形类型<a id='getSketchDataType'></a>
* @private
*/
getSketchDataType() {
super.getSketchDataType()
}
/**
* 设置草图样式<a id='setSketchStyle'></a>
* @param {SketchStyle} sketchStyle
* @example
* // 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)
*/
setSketchStyle(sketchStyle) {
super.setSketchStyle(sketchStyle)
}
/**
* 获取草图样式<a id='getSketchStyle'></a>
* @returns {SketchStyle}
*/
getSketchStyle() {
return super.getSketchStyle()
}
/**
* 获取草图几何对象<a id='getGeometry'></a>
* @returns {Geometry}
*/
getGeometry() {
return super.getGeometry()
}
/**
* 合并多个区几何<a id='union'></a>
* @param {Polygon} polygons 被合并的区几何对象
* @returns {Polygon} 合并后的几何对象
* @example <caption><h7>二维草图几何合并</h7></caption>
* // [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)
*/
union(polygons) {
return super.union(polygons)
}
/**
* 分割草图对象或区几何对象<a id='split'></a>
* @param {Polygon|SketchEditor} target 被分割的几何/草图对象
* @param {Polyline} splitPolyline 线几何对象
* @returns {Array<Polygon>} 分割后的几何对象
* @example <caption><h7>二维草图几何分割</h7></caption>
* // [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)
*/
split(target, splitPolyline) {
return super.split(target, splitPolyline)
}
/**
* 线拓扑造区<a id='drawPolylineToPolygon'></a>
* @param {Array<Polygon>} snapAndReferGeometries 捕获参考几何对象数组
* @example <caption><h7>二维草图线拓扑造区</h7></caption>
* // [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)
*/
drawPolylineToPolygon(snapAndReferGeometries) {
super.drawPolylineToPolygon(snapAndReferGeometries)
}
/**
* 撤销当前编辑操作<a id='undo'></a>
* @returns {Geometry}
* @example <caption><h7>二维草图几何分割</h7></caption>
* // [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)
*/
undo() {
return super.undo()
}
/**
* 恢复被撤销的草图<a id='redo'></a>
* @returns {Geometry}
* @example <caption><h7>二维草图几何分割</h7></caption>
* // [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)
*/
redo() {
return super.redo()
}
/**
* 草图是否可执行撤销操作<a id='canUndo'></a>
* @returns {Boolean}
*/
canUndo() {
return super.canUndo()
}
/**
* 草图是否可执行恢复操作<a id='canRedo'></a>
* @returns {Boolean}
*/
canRedo() {
return super.canRedo()
}
/**
* 二维leaflet草图拾取事件
* @private
*/
_hitTestSketchEvent() {
// 实例化sketchEditor之后，将拾取事件注册
const self = this
self.testNum = 0
// 拾取草图：1.监听引擎原生layer的layeradd 事件 2.获取当前图形drawTool
const targetLayer = this.view._mapCollection.filter(
(item) => item.id === this.layer.id
)
if (targetLayer.length > 0) {
targetLayer[0].innerLayer.on('layeradd', (event) => {
const iLayer = event.layer
if (!iLayer || !iLayer.commonFeatureId || !self._drawTool) return
let curDrawTool = self._drawTool._getDrawToolByFeatureId(
iLayer.commonFeatureId
)
if (!curDrawTool) {
if (
self._drawTool.sketchStage.entityGraphic &&
self._drawTool.state === 'drawn'
) {
const layer = self.view.getLayer(iLayer.commonLayerId)
const features = layer.graphics.filter((item) => {
if (item.id === iLayer.commonFeatureId) {
return item
}
})
const feature =
features && features.items.length > 0 ? features.items[0] : null
this._addFeatureToSketchEditor(feature)
curDrawTool = self._drawTool._getDrawToolByFeatureId(
iLayer.commonFeatureId
)
} else {
return
}
}
if (curDrawTool === self._drawTool && curDrawTool.state !== 'drawn') {
// 如果是绘制时触发的事件，则不是拾取 返回
return
}
self._bindHit(curDrawTool, iLayer)
})
}
}
// 向当前drawTool发送被拾取的feature对象
_bindHit(curDrawTool, iLayer) {
const self = this
const feature = curDrawTool.sketchStage.entityGraphic
const mode = curDrawTool.editOption._hitTestMode
if (!iLayer) {
const targetLayer = this.view._mapCollection.filter(
(item) => item.id === this.layer.id
)
for (const key in targetLayer[0].innerLayer._layers) {
const item = targetLayer[0].innerLayer._layers[key]
if (item.commonFeatureId === feature.id) {
iLayer = item
break
}
}
if (!iLayer) return
}
const callbackFun = function (event) {
// 不可编辑状态直接返回
if (!self._editable) {
return
}
// 当前图形正在绘制时，则不会触发拾取其他图形
if (
self._drawTool !== undefined &&
self._drawTool !== null &&
self._drawTool._editMode === 3 // || self._drawTool._editMode === 0
) {
return
}
const _spatialReference = new SpatialReference(self.view.crs.code)
let mapPoint
if (!_spatialReference.isGeographic) {
mapPoint = Projection.project(
new Point({
coordinates: [event.latlng.lng, event.latlng.lat]
}),
new SpatialReference(self.view.crs.code)
)
} else {
mapPoint = new Point({
coordinates: [event.latlng.lng, event.latlng.lat]
})
}
event.mapPoint = mapPoint
// 切换图形drawTool和编辑器drawTool不同，则此时编辑器drawTool为当前图形drawTool改变
// 拾取时：情景1.（同一个图形）拾取到的当前drawTool为该草图本图entityGraphic的drawTool，则该草图进入整体图形编辑状态，编辑器drawTool不变）
// 情景2.（同一个图形）拾取到的当前drawTool有parent，且parent的草图本图entityGraphic和编辑器的drawTool相同，则该草图进由整体图形编辑切换到顶点编辑状态，编辑器drawTool不变）
// 情景3.（切换到其他已绘制的图形时）拾取到的当前drawTool为该图形草图本图entityGraphic的drawTool，编辑器drawTool需变为当前drawTool
if (!curDrawTool._parent) {
// 如果当前拾取的图形有parent，则拾取的是编辑辅助图形，判断当编辑辅助图形的草图本图和草图编辑器本图是否是同一个：
// 如果相同，即为情景1，不需要特殊处理；
// 如果不相同，即为情景3，则需清空上次草图编辑时的辅助图形，然后将编辑器drawTool赋值为当前图形草图本图drawTool。
if (!self._drawTool) {
self._drawTool = curDrawTool
self._undoRedoManager.reset()
self._drawTools = [self._drawTool]
} else if (self._drawTool._id !== curDrawTool._id) {
self._drawTool._clearEditGraphics(self._editMode)
self._drawTool = curDrawTool
self._undoRedoManager.reset()
self._drawTools = [self._drawTool]
}
} else {
// 如果当前拾取的图形没有parent，即为情景2，则需清空上次草图编辑时的辅助图形。
if (self._drawTool._id !== curDrawTool._parent._id) {
self._drawTool._clearEditGraphics(self._editMode)
}
}
// 发送草图被选中事件
self.fire(
'selected',
{
isSelected: true,
selectedDrawTool: self._drawTool,
selectedGeometry: self._drawTool.sketchStage.entityGraphic.geometry
},
self
)
curDrawTool.hitTestFeature(feature, event)
}
if (mode === 0) {
iLayer.on('click', (event) => {
callbackFun(event)
})
} else {
iLayer.on('mousedown', (event) => {
// mouseDown拖动点图形时，地图拖拽事件会触发
// self._disableMapDrag()
callbackFun(event)
})
}
}
/**
* 根据两个坐标获取坐标中点
* @private
* @param {Array} coordinate1 第一个坐标
* @param {Array} coordinates2 第一个坐标
* @returns {Array} 中点坐标
* */
_getCenterCoordinate(coordinate1, coordinates2) {
return [
(coordinate1[0] + coordinates2[0]) / 2,
(coordinate1[1] + coordinates2[1]) / 2
]
}
}
Zondy.SketchEditorLeaflet = SketchEditorLeaflet
export default SketchEditorLeaflet
</code></pre>
</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://192.168.82.89: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>