Angular 如何在传单绘制中创建自定义控件？

我是新的传单画插件和打字脚本，所以我正在寻找方法来扩展传单画，以创建一个自定义控件，绘制一个圆。我看到了一个用JS编写的示例，但不知道如何正确创建基于传单绘制插件的控件

我正在创建基于Angular的web应用程序。 帮助扩展typescript中的控件。我正在使用ars libs

"leaflet": "^1.3.3",
"leaflet-draw": "^1.0.2",
"@types/leaflet": "^1.2.9",

它的代码片段是如何在JS中完成的

 }
/*Class for new polygon shape */
L.Draw.CustomCircle = L.Draw.Circle.extend({
    options: {
        repeatMode: true
    },
    initialize: function (map, options) {
        this.type = 'customCircle';
        L.Draw.Feature.prototype.initialize.call(this, map, options);
    }
});


/*Changes some of the default text for the toolbar buttons*/
L.drawLocal = {
    draw: {
        toolbar: {
            buttons: {
                circle: 'Draw a include circle',
                customCircle: 'Draw a exnclude circle',
            }
        },
        handlers: {
            circle: {
                tooltip: {
                    start: 'Click and drag to include circle.'
                },
                radius: 'Radius'
            },
          customCircle: {
                tooltip: {
                    start: 'Click and drag to exclude circle.'
                },
                radius: 'Radius'
            }
        }
    },
    edit: {        }
};

/*Adds new shape types to the options */
L.DrawToolbar.include({

options: {
        circle: {},
        customCircle: {}
    },
        initialize: function (options) {
    // Ensure that the options are merged correctly since L.extend is only shallow
    for (var type in this.options) {
        if (this.options.hasOwnProperty(type)) {
            if (options[type]) {
                options[type] = L.extend({}, this.options[type], options[type]);
            }
        }
    }

    this._toolbarClass = 'leaflet-draw-draw';
    L.Toolbar.prototype.initialize.call(this, options);
},
    getModeHandlers: function (map) {
        return [
             {
                enabled: this.options.customCircle,
                handler: new L.Draw.CustomCircle(map, this.options.customCircle),
                title: L.drawLocal.draw.toolbar.buttons.customCircle
            },
                             {
                enabled: this.options.circle,
                handler: new l.draw.circle(map, this.options.circle),
                title: l.drawlocal.draw.toolbar.buttons.circle
            },
        ];
    },

    // Get the actions part of the toolbar
    getActions: function (handler) {
        return [
            {
                enabled: handler.completeShape,
                title: L.drawLocal.draw.toolbar.finish.title,
                text: L.drawLocal.draw.toolbar.finish.text,
                callback: handler.completeShape,
                context: handler
            },
        ];
    },

    setOptions: function (options) {
        L.setOptions(this, options);

        for (var type in this._modes) {
            if (this._modes.hasOwnProperty(type) && options.hasOwnProperty(type)) {
                this._modes[type].handler.setOptions(options[type]);
            }
        }
    }
});


var drawControl = new L.Control.Draw();
map.addControl(drawControl);

---

我过去是这样做的，我不确定这是否是正确的方式。它起作用了。它不遵循“角度”的做事方式，但您使用的是一个外部库，它不遵循角度，因此您只能按照它允许的角度来做

当然，我只为你做了一点，但这应该让你开始。这实际上与在JS中做这件事是一样的，只是这次你有了一个typescript类

import * as L from 'leaflet';
@Component({
  selector: 'app-map',
  templateUrl: 'foo.html',
})

export class MapPage implements OnInit {
  public map: L.Map;
  constructor() { }

  public ngOnInit() {
    const config = {};
    this.map = L.map('elementId', config)
    this.addLeafletExtras();
  }

  private addLeafletExtras() {
    L.Draw.CustomCircle = L.Draw.Circle.extend({
      options: {
        repeatMode: true
      },
      initialize: function (map, options) {
        this.type = 'customCircle';
        L.Draw.Feature.prototype.initialize.call(this, map, options);
      }
    });
  }

}

---

需要注意的是，如果您想向传单中的某个调用角度代码中某个内容的内容添加回调，请传递回调并使用。绑定（this），这将将当前角度范围绑定到回调，然后您可以安全地从传单中调用回调，但将其保持在角度范围内（我希望这是有意义的）.

我设法实现了它。它基本上不完全在ts中，但工作正常

declare var L;
export class Ovverides {
addNewTypes() {
    /*change the draw created event to pass in a featureTypeCode.
       This makes it so that when the draw created is triggered, I can fetch the type shape made and
       append that as a property in the generated GeoJSON*/
    L.Draw.Feature.prototype._fireCreatedEvent = function (layer) {
        if (this.featureTypeCode) {
            this._map.fire('draw:created', { layer: layer, layerType: this.type, featureTypeCode: this.featureTypeCode });
        } else {
            this._map.fire('draw:created', { layer: layer, layerType: this.type });
        }
    }

    /*Class for new circle include */
    L.Draw.CircleInclude = L.Draw.Circle.extend({
        options: {
            repeatMode: false
        },
        initialize: function (map, options) {
            this.type = L.Draw.Circle.TYPE;
            this.featureTypeCode = 'include';
            this._initialLabelText = L.drawLocal.draw.handlers.circle.include.tooltip.start;
            this._endLabelText = 'Release mouse to finish drawing.';
            L.Draw.Feature.prototype.initialize.call(this, map, options);
        }
    });
    /*Class for new circle exclude */
    L.Draw.CircleExclude = L.Draw.Circle.extend({
        options: {
            repeatMode: false
        },

        initialize: function (map, options) {
            this.type = L.Draw.Circle.TYPE;
            this.featureTypeCode = 'exclude';
            this._endLabelText = 'Release mouse to finish drawing.';
            this._initialLabelText = L.drawLocal.draw.handlers.circle.exclude.tooltip.start;
            L.Draw.Feature.prototype.initialize.call(this, map, options);
        }
    });

    /*Modify this function to catch the featureCodeType.  This needs to append to the
    Css class name generated so that I can color them and do other stuff appropriately
    based on custom class in our css file*/
    L.Toolbar.prototype._initModeHandler = function (handler, container, buttonIndex, classNamePredix, buttonTitle) {
        var type = handler.type;
        var target = type;
        if (typeof handler.featureTypeCode != 'undefined') {
            target = type + '-' + handler.featureTypeCode;
        }
        this._modes[type] = {};

        this._modes[type].handler = handler;

        this._modes[type].button = this._createButton({
            type: type,
            title: buttonTitle,
            className: classNamePredix + '-' + target,
            container: container,
            callback: this._modes[type].handler.enable,
            context: this._modes[type].handler
        });
        this._modes[type].buttonIndex = buttonIndex;

        this._modes[type].handler
            .on('enabled', this._handlerActivated, this)
            .on('disabled', this._handlerDeactivated, this);
    }

    /*Changes some of the default text for the toolbar buttons*/
    L.drawLocal = {
        draw: {
            toolbar: {
                actions: {
                    title: 'Cancel drawing',
                    text: 'Cancel'
                },
                finish: {
                    title: 'Finish drawing',
                    text: 'Finish'
                },
                undo: {
                    title: 'Delete last point drawn',
                    text: 'Delete last point'
                },
                buttons: {
                    polyline: 'Draw a polyline',
                    polygon: 'Draw a polygon',
                    rectangle: 'Draw a rectangle',
                    circle: {
                        include: 'Create include circle',
                        exclude: 'Create exclude circle',
                    },
                    marker: 'Draw a marker'
                }
            },
            handlers: {
                circle: {
                    radius: 'Radius',
                    include: {
                        tooltip: {
                            start: 'Click to start drawing a circle include',
                        },
                    },
                    exclude: {
                        tooltip: {
                            start: 'Click to start drawing a circle exclude',
                        },
                    },
                },
                marker: {
                    tooltip: {
                        start: 'Click map to place a site marker.'
                    }
                },
                polygon: {
                    tooltip: {
                        start: 'Click to start drawing a site property',
                        cont: 'Click to continue drawing a site property',
                        end: 'Click first point to close this site property'
                    }
                },
                polyline: {
                    error: '<strong>Error:</strong> shape edges cannot cross!',
                    tooltip: {
                        start: 'Click to start drawing line',
                        cont: 'Click to continue drawing line',
                        end: 'Click last point to finish line'
                    }
                },
                rectangle: {
                    tooltip: {
                        start: 'Click and drag to create a site boundary'
                    }
                },
                simpleshape: {
                    tooltip: {
                        end: 'Release mouse to finish drawing.'
                    }
                }
            }
        },
        edit: {
            toolbar: {
                actions: {
                    save: {
                        title: 'Save changes',
                        text: 'Save'
                    },
                    cancel: {
                        title: 'Cancel editing, discards all changes',
                        text: 'Cancel'
                    },
                    clearAll: {
                        title: 'Clear all layers',
                        text: 'Clear All'
                    }
                },
                buttons: {
                    edit: 'Edit layers',
                    editDisabled: 'No layers to edit',
                    remove: 'Delete layers',
                    removeDisabled: 'No layers to delete'
                }
            },
            handlers: {
                edit: {
                    tooltip: {
                        text: 'Drag handles or markers to edit features.',
                        subtext: 'Click cancel to undo changes.'
                    }
                },
                remove: {
                    tooltip: {
                        text: 'Click on a feature to remove.'
                    }
                }
            }
        }
    };

    /*Adds new shape types to the options */
    L.DrawToolbar.include({
        options: {
            polyline: {},
            polygon: {},
            rectangle: {},
            circle: {
                include: {},
                exclude: {}
            },
            marker: {}
        },
        initialize: function (options) {
            // Ensure that the options are merged correctly since L.extend is only shallow
            for (var type in this.options) {
                if (this.options.hasOwnProperty(type)) {
                    if (options[type]) {
                        options[type] = L.extend({}, this.options[type], options[type]);
                    }
                }
            }

            this._toolbarClass = 'leaflet-draw-draw';
            L.Toolbar.prototype.initialize.call(this, options);
        },
        getModeHandlers: function (map) {
            return [
                {
                    enabled: this.options.circle.include,
                    handler: new L.Draw.CircleInclude(map, this.options.circle.include),
                    title: L.drawLocal.draw.toolbar.buttons.circle.include
                },
                {
                    enabled: this.options.circle.exclude,
                    handler: new L.Draw.CircleExclude(map, this.options.circle.exclude),
                    title: L.drawLocal.draw.toolbar.buttons.circle.exclude
                },
            ];
        },

        // Get the actions part of the toolbar
        getActions: function (handler) {
            return [
                {
                    enabled: handler.completeShape,
                    title: L.drawLocal.draw.toolbar.finish.title,
                    text: L.drawLocal.draw.toolbar.finish.text,
                    callback: handler.completeShape,
                    context: handler
                },
                {
                    enabled: handler.deleteLastVertex,
                    title: L.drawLocal.draw.toolbar.undo.title,
                    text: L.drawLocal.draw.toolbar.undo.text,
                    callback: handler.deleteLastVertex,
                    context: handler
                },
                {
                    title: L.drawLocal.draw.toolbar.actions.title,
                    text: L.drawLocal.draw.toolbar.actions.text,
                    callback: this.disable,
                    context: this
                }
            ];
        },

        setOptions: function (options) {
            L.setOptions(this, options);

            for (var type in this._modes) {
                if (this._modes.hasOwnProperty(type) && options.hasOwnProperty(type)) {
                    this._modes[type].handler.setOptions(options[type]);
                }
            }
        }
    });
}

声明变量L；
出口类卵囊{
addNewTypes（）{
/*更改绘图创建事件以传入featureTypeCode。
这样，当创建的绘图被触发时，我就可以获取生成的类型和形状
将其作为属性附加到生成的GeoJSON中*/
L.Draw.Feature.prototype.\u fireCreatedEvent=函数（层）{
if（此.featureTypeCode）{
这个._map.fire（'draw:created'，{layer:layer，layerType:this.type，featureTypeCode:this.featureTypeCode}）；
}否则{
this.\u map.fire（'draw:created'，{layer:layer，layerType:this.type}）；
}
}
/*新圈子的课程包括*/
L.Draw.Circle包含=L.Draw.Circle.extend({
选项：{
重复模式：false
},
初始化：函数（映射、选项）{
this.type=L.Draw.Circle.type；
this.featureTypeCode='include'；
这。_initialLabelText=L.drawLocal.draw.handlers.circle.include.tooltip.start；
这。_endLabelText='释放鼠标完成绘图'；
L.Draw.Feature.prototype.initialize.call（this，map，options）；
}
});
/*新循环排除的类*/
L.Draw.CircleExclude=L.Draw.Circle.extend({
选项：{
重复模式：false
},
初始化：函数（映射、选项）{
this.type=L.Draw.Circle.type；
this.featureTypeCode='exclude'；
这。_endLabelText='释放鼠标完成绘图'；
这。_initialLabelText=L.drawLocal.draw.handlers.circle.exclude.tooltip.start；
L.Draw.Feature.prototype.initialize.call（this，map，options）；
}
});
/*修改此函数以捕获featureCodeType。这需要附加到
生成Css类名，以便我可以为它们着色并适当地执行其他操作
基于css文件中的自定义类*/
prototype.\u initModeHandler=函数（handler、容器、buttonIndex、classNamePredix、ButtonTile）{
var type=handler.type；
var目标=类型；
if（typeof handler.featureTypeCode！=“未定义”）{
target=type+'-'+handler.featureTypeCode；
}
这._模式[类型]={}；
此._模式[类型].handler=handler；
this.\u modes[type].button=this.\u createButton({
类型：类型，
标题：纽扣，
className:classNamePredix+'-'+目标，
货柜:货柜,，
回调：此.u模式[type].handler.enable，
上下文：此.\u模式[type].handler
});
此.u模式[类型].buttonIndex=buttonIndex；
此.\u模式[类型].处理程序
.on（'enabled'，this.\u handleActivated，this）
.on（'disabled'，this.\u handler deactivated，this）；
}
/*更改工具栏按钮的某些默认文本*/
L.本地={
抽签：{
工具栏：{
行动：{
标题：“取消绘图”，
文本：“取消”
},
完成：{
标题：“完成绘制”，
文本：“完成”
},
撤消：{
标题：“删除最后绘制的点”，
文本：“删除最后一点”
},
按钮：{
多段线：“绘制多段线”，
多边形：“绘制多边形”，
矩形：“绘制一个矩形”，
圆圈：{
include:“创建包含圆”，
排除：“创建排除圆”，
},
马克：“画一个马克”
}
},
处理程序：{
圆圈：{
半径：“半径”，
包括：{
工具提示：{
开始：“单击以开始绘制圆，包括”，
},
},
排除：{
工具提示：{
开始：“单击以开始绘制圆排除”，
},
},
},
标记：{
工具提示：{
开始：“单击地图以放置场地标记。”
}
},
多边形：{
工具提示：{
开始：“单击以开始绘制场地属性”，
继续：'单击以继续
import * as L from 'leaflet';

export class Watermark extends L.Control {

  onAdd(map: L.Map) {
    let img = L.DomUtil.create('img') as HTMLImageElement;
    img.src = '../../docs/images/logo.png';
    img.style.width = '200px';
    return img;
  }

  onRemove(map: L.Map) {
    // Nothing to do here
  }

  constructor(options?: L.ControlOptions) {
    super(options);
  }
}

import * as L from 'leaflet';
import { Watermark } from './leaflet-watermark-control';
...

let myMap = L.map("mapId")setView([51.505, -0.09], 13);
new Watermark({position: 'bottomleft'}).addTo(myMap);