在Angular 7 TypeScript组件'；工具栏

我正在尝试使用传单。在我的Angular 7项目中举例说明。我已经尝试在HTML中加载它，但是，即使它确实加载了，也不清楚如何调用

new L.Illustrate.Control({
    edit: { featureGroup: drawnItems }
}).addTo(map);

要将其添加到构建工具栏的现有调用中，我有：

addDraw() {
    if (this.map !== undefined) {
          const leaflet = this.map.leafletMap();
          leaflet.setZoom(3);

          const drawnItems = new L.FeatureGroup();
          leaflet.addLayer(drawnItems);

          const drawControl = new L.Control.Draw({
            position: 'bottomright',
            draw: {
              polygon: {
                allowIntersection: false,
                showArea: true
              }
            },
            edit: {
              featureGroup: drawnItems
            }
          });

          leaflet.addControl(drawControl);

          leaflet.on(L.Draw.Event.CREATED, function (event: any) {
            drawnItems.addLayer(event.layer);
          });
        }
}

---

我一直在寻找@types/传单插图，但运气不好，我甚至打算尝试编写一个index.d.ts来覆盖JavaScript库。是否有其他人有幸做到这一点，或者找到了一个好方法来了解如何编写index.d.ts？

该插件似乎不支持1.0.0之后的传单版本和0.2.x之后的传单绘制版本

因此，为了能够使用它，您需要使用旧版本的传单和传单绘图，更具体地说是传单0.7.x

安装

传单0.7.2

，

传单绘图0.2.4

，

传单插图0.0.3

在angular.json中导入css文件，如下所示：

"styles": [
     "../node_modules/leaflet/dist/leaflet.css",
     "../node_modules/leaflet-draw/dist/leaflet.draw.css",
     "../node_modules/leaflet-illustrate/dist/Leaflet.Illustrate.css",
     "styles.css"
],
...

在.ts内部放置以下代码：

ngOnInit() {
    var map = L.map("map").setView([41.7896, -87.5996], 15);
    L.tileLayer("http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg", {
      attribution:
        'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
    }).addTo(map);

    map.on("click", function(evt) {
      console.log(evt);
    });

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var illustrateControl = new L.Illustrate.Control({
      edit: {
        featureGroup: drawnItems
      }
    });
    map.addControl(illustrateControl);

    drawnItems.addLayer(
      new L.Illustrate.Pointer(L.latLng(41.7868010411136, -87.60601043701172), [
        new L.Point(0, 0),
        new L.Point(100, -100),
        new L.Point(400, -100)
      ])
    );
    drawnItems.addLayer(
      new L.Illustrate.Pointer(
        L.latLng(41.80219068741082, -87.60648250579834),
        [new L.Point(0, 0), new L.Point(100, -100), new L.Point(400, -100)]
      )
    );

    map.on("draw:created", function(evt) {
      var type = evt.layerType,
        layer = evt.layer;

      drawnItems.addLayer(layer);
    });
}

ngOnInit（）{
var map=L.map（“map”）.setView（[41.7896，-87.5996]，15）；
L.Tillelayer（“http://otile1.mqcdn.com/tiles/1.0.0/sat/{z} /{x}/{y}.jpg“{
归属：
“瓷砖由&mdash；部分由NASA/JPL加州理工学院和美国农业部农业服务局提供”
}).addTo（地图）；
映射打开（“单击”，功能（evt）{
控制台日志（evt）；
});
var drawnItems=新的L.FeatureGroup（）；
map.addLayer（drawnItems）；
var illustrateControl=新的L.illustrateControl({
编辑：{
功能组：drawnItems
}
});
map.addControl（illustrateControl）；
drawnItems.addLayer(
新的L.Illustrate.指针（L.latLng（41.786801010411136，-87.60601043701172）[
新的L点（0,0），
新L.点（100，-100），
新L.点（400，-100）
])
);
drawnItems.addLayer(
新的L.指针(
L.latLng（41.80219068741082，-87.60648250579834），
[新L点（0,0），新L点（100，-100），新L点（400，-100）]
)
);
地图上（“绘制：已创建”，函数（evt）{
变量类型=evt.layerType，
层=evt.layer；
drawnItems.addLayer（层）；
});
}

---

谢谢您的回复。我觉得你的演示太棒了。问题是，我可以；不要恢复到以前的版本。我目前正致力于在我本地的传单抽签副本中添加传单插图功能。我希望能够创建一个插件到当前的传单画，并从那里去。我真的只需要文本。到目前为止，情况似乎有点不妙。有没有关于如何为传单绘图1.0.4的JS做插件的建议，这样我就不必有一份传单绘图的副本，它不能有一个npm更新，我会丢失我所有的代码？非常感谢您的帮助。请不要使用当时不推荐使用的库。检查。没有测试它，但可能会工作