diff --git a/examples/index.html b/examples/index.html index 7ceae2d..257ee2d 100644 --- a/examples/index.html +++ b/examples/index.html @@ -22,8 +22,6 @@ diff --git a/src/core/PlotDraw.js b/src/core/PlotDraw.js index e1d5311..a1849c6 100644 --- a/src/core/PlotDraw.js +++ b/src/core/PlotDraw.js @@ -42,6 +42,13 @@ class PlotDraw extends maptalks.MapTool { */ this.drawLayer = null + /** + * 是否处于激活状态 + * @type {boolean} + * @private + */ + this._isActive = false + /** * events * @type {{click: PlotDraw._firstClickHandler, mousemove: PlotDraw._mouseMoveHandler, dblclick: PlotDraw._doubleClickHandler}} @@ -84,6 +91,7 @@ class PlotDraw extends maptalks.MapTool { this._switchEvents('on') this._deactiveMapInteractions() } + this._isActive = true return this } @@ -415,6 +423,7 @@ class PlotDraw extends maptalks.MapTool { if (this._map) { map.removeLayer(this._getDrawLayer(this.layerName)) } + this._isActive = false return this } @@ -440,6 +449,14 @@ class PlotDraw extends maptalks.MapTool { return this } + /** + * check isActive + * @returns {boolean} + */ + isActive () { + return this._isActive + } + /** * 加载资源 * @private diff --git a/src/core/PlotEditor.js b/src/core/PlotEditor.js index 1de2efb..e7d6e02 100644 --- a/src/core/PlotEditor.js +++ b/src/core/PlotEditor.js @@ -47,7 +47,6 @@ class PlotEditor extends EventAble(Class) { activate (plot) { this.deactivate() this._geometry = plot - console.log(plot, this) this.initControlPoints() this.fire('editStart', { geometry: this._geometry @@ -140,11 +139,40 @@ class PlotEditor extends EventAble(Class) { this.controlPoints.push(_marker) } + /** + * handle drag start + * @param event + * @private + */ _handleDragStart (event) { this.isDragging = true } + /** + * handle dragging + * @param event + * @private + */ _handleDragging (event) { + this._handleGeometryChange(event) + } + + /** + * handle drag end + * @param event + * @private + */ + _handleDragEnd (event) { + this._handleGeometryChange(event) + this.isDragging = false + } + + /** + * handle geometry change + * @param event + * @private + */ + _handleGeometryChange (event) { if (this.isDragging && event.target) { const _index = event.target.getProperties() && event.target.getProperties()['index'] const sourcePoints = this._geometry.getPoints() @@ -155,10 +183,6 @@ class PlotEditor extends EventAble(Class) { } } - _handleDragEnd (event) { - this.isDragging = false - } - /** * 创建矢量图层 * @param layerName @@ -303,23 +327,6 @@ class PlotEditor extends EventAble(Class) { } return points } - - /** - * 根据控制点个数生成控制点 - * @param points - * @param limit - * @returns {Array} - */ - static getLimitControlPoints (points, limit) { - const _coordinates = [] - if (points && points.length > 0) { - const _n = Math.floor(points.length / limit) || 1 - for (let i = 0; i < limit; i++) { - _coordinates.push(points[(i + 1) * _n - 1]) - } - } - return _coordinates - } } export default PlotEditor diff --git a/src/geometry/Circle/Circle.js b/src/geometry/Circle/Circle.js index eb51bfa..bf82466 100644 --- a/src/geometry/Circle/Circle.js +++ b/src/geometry/Circle/Circle.js @@ -7,9 +7,10 @@ import * as maptalks from 'maptalks' const Coordinate = maptalks.Coordinate class PlotCircle extends maptalks.Circle { - constructor (coordinate, radius, options = {}) { + constructor (coordinate, radius, points, options = {}) { super(null, options) this.type = 'PlotCircle' + this._points = points || [] if (coordinate) { this.setCoordinates(coordinate) } @@ -24,6 +25,25 @@ class PlotCircle extends maptalks.Circle { return this.type } + /** + * 更新控制点 + * @param coordinates + */ + setPoints (coordinates) { + this._points = !coordinates ? [] : [coordinates[0], coordinates[coordinates.length - 1]] + const map = this.getMap() + const radius = map.computeLength(this.getCenter(), coordinates[coordinates.length - 1]) + this.setRadius(radius) + } + + /** + * 获取控制点 + * @returns {Array|*} + */ + getPoints () { + return this._points + } + _exportGeoJSONGeometry () { const coordinates = Coordinate.toNumberArrays([this.getShell()]) return { @@ -44,13 +64,14 @@ class PlotCircle extends maptalks.Circle { 'feature': feature, 'subType': 'PlotCircle', 'coordinates': [center.x, center.y], - 'radius': this.getRadius() + 'radius': this.getRadius(), + 'points': this.getPoints() } } static fromJSON (json) { const GeoJSON = json['feature'] - const feature = new PlotCircle(json['coordinates'], json['radius'], json['options']) + const feature = new PlotCircle(json['coordinates'], json['radius'], json['points'], json['options']) feature.setProperties(GeoJSON['properties']) return feature } diff --git a/src/geometry/index.js b/src/geometry/index.js index c05dd53..66c20c7 100644 --- a/src/geometry/index.js +++ b/src/geometry/index.js @@ -357,9 +357,7 @@ RegisterModes[PlotTypes.CIRCLE] = { return new PlotCircle(coordinate[0], 0) }, 'update': function (path, geometry) { - const map = geometry.getMap() - const radius = map.computeLength(geometry.getCenter(), path[path.length - 1]) - geometry.setRadius(radius) + geometry.setPoints(path) }, 'generate': function (geometry) { return geometry