最近在做繪圖功能有個點選的功能，就是使用繪圖工具點擊繪制定長的圓，一開始覺得這個應(yīng)該很簡單（還是太無知）

//Register "CubicBezierCurve" mode to draw Cubic Bezier Curves. DrawTool.registerMode('CubicBezierCurve', 
{ 'action': 'clickDblclick',
'create': path => new CubicBezierCurve(path),
'update': (path, geometry) => { geometry.setCoordinates(path); }, 
'generate': geometry => geometry } });

照慣例還是看看文檔,文檔里的居然兩處問題，一是多了一個括號，二是action應(yīng)該用數(shù)組。
于是我又改改代碼，結(jié)果是可以畫了，但是只能畫一次！后面的畫不上去了

maptalks.DrawTool.registerMode('Buffer',

  {
  'clickLimit': 1,
    'action': ['click'],
    name: "Buffer",
  create: function (projection, prjCoord) {
    const center = projection.unproject(prjCoord[0]);
    const circle = new maptalks.Circle(center, 500);
    circle._setPrjCoordinates(prjCoord[0]);

    return circle;
  },
  update: function (projection, prjPath, geometry) {
    const map = geometry.getMap();
    const prjCoord = Array.isArray(prjPath)
      ? prjPath[prjPath.length - 1]
      : prjPath;
    const nextCoord = projection.unproject(prjCoord);
    const radius = map.computeLength(geometry.getCenter(), nextCoord);
    geometry.setRadius(radius);
  },
  generate: function (geometry) {
    return geometry;
  }
}

);

百思不得其解，我咨詢了下群里的大佬，參考了點的繪制為啥點的就可以呢?原來是點繪制時候會在第一次點擊后觸發(fā)結(jié)束繪制的事件，所以要判斷下觸發(fā)結(jié)束繪制事件

  /**
     * 第一次事件創(chuàng)建相關(guān)geometry
     * @param event
     * @private
     */
    _createGeometry(event) {
        const mode = this.getMode();
        const registerMode = this._getRegisterMode();
        const prjCoord = this.getMap()._pointToPrj(event['point2d']);
        const symbol = this.getSymbol();
        if (!this._geometry) {
            this._clickCoords = [prjCoord];
            event.drawTool = this;
            this._geometry = registerMode['create'](this.getMap().getProjection(), this._clickCoords, event);
            if (symbol && mode !== 'point') {
                this._geometry.setSymbol(symbol);
            } else if (this.options.hasOwnProperty('symbol')) {
                this._geometry.setSymbol(this.options['symbol']);
            }
            this._addGeometryToStage(this._geometry);
            /**
             * drawstart event.
             *
             * @event DrawTool#drawstart
             * @type {Object}
             * @property {String} type - drawstart
             * @property {DrawTool} target - draw tool
             * @property {Coordinate} coordinate - coordinate of the event
             * @property {Point} containerPoint  - container point of the event
             * @property {Point} viewPoint       - view point of the event
             * @property {Event} domEvent                 - dom event
             */
            this._fireEvent('drawstart', event);
        }
        if (mode === 'point') {
            this.endDraw(event);
        }
    }

在代碼里增加name還有如下代碼后，程序正常運行了

drawTool.on("drawstart", function (event) {
  const registerMode = this._getRegisterMode();
  //繪制開始后，即第一次點擊地圖，強制結(jié)束draw
  //if (drawTool.getMode()=="Buffer".toLowerCase()) {
  if (registerMode.name === "Buffer") {
    debugger
    this.endDraw(event);
  }
});

dbdcd7633bd6402094a17885df69b7f3_tplv-k3u1fbpfcp-watermark.png

參考資料：

https://github.com/maptalks/maptalks.js/blob/fdf2708baeb52755900e23692ed26042dec9b991/src/map/tool/DrawTool.js#L601

https://github.com/maptalks/maptalks.js/blob/fdf2708baeb52755900e23692ed26042dec9b991/src/map/tool/DrawToolRegister.js