Maptalks 注册自定义绘图模块

最近在做绘图功能有个点选的功能，就是使用绘图工具点击绘制定长的圆，一开始觉得这个应该很简单（还是太无知）

//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应该用数组。
于是我又改改代码，结果是可以画了，但是只能画一次！后面的画不上去了

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;
  }
}

);

百思不得其解，我咨询了下群里的大佬，参考了点的绘制为啥点的就可以呢?原来是点绘制时候会在第一次点击后触发结束绘制的事件，所以要判断下触发结束绘制事件

  /**
     * 第一次事件创建相关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();
  //绘制开始后，即第一次点击地图，强制结束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