# fix circle editor

examples/index.html

@@ -22,8 +22,6 @@
 <!--<script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.js"></script>-->
 <script src="../dist/maptalks.plot.js"></script>
 <script type="text/javascript">
-  var id = MaptalksPlot.utils.uuid();
-  MaptalksPlot.utils.addClass(document.getElementById('map'), id);
   var map = new maptalks.Map('map', {
     center: [108.93, 34.27],
     zoom: 5,
@@ -56,7 +54,6 @@
       })
     }
     layer.addGeometry(param.geometry);
-    editor.activate(param.geometry);
   });
   var itemsLeft = ['Point', 'Polyline', 'Curve',
     'Arc', 'FreeLine',
@@ -157,6 +154,22 @@
       }
     ]
   }).addTo(map);
+
+  map.on('click', function (event) {
+    if (!drawTool.isActive()) {
+      map.identify({
+        coordinate: event.coordinate,
+        layers: [layer]
+      }, function (geom) {
+        if (geom.length > 0) {
+          editor.activate(geom[0]);
+        }
+      })
+    }
+  });
+  layer.on('clear', function () {
+    editor.deactivate()
+  })
 </script>
 </body>
 </html>

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

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

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
   }

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