angular - 在 Angular 7 TypeScript 组件的工具栏中使用 Leaflet Draw 插件

Question

我正在尝试在我的 Angular 7 项目中使用 Leaflet.Illustrate。我尝试在 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/leaflet-illustrate，但没有运气，我什至打算尝试编写一个index.d.ts来覆盖JavaScript库。有没有其他人有幸做到这一点，或者找到如何编写index.d.ts的好方法？

Answer 1

该插件似乎不支持 1.0.0 之后的 leaflet 版本和 0.2.x 之后的 leaflet-draw 版本

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

安装leaflet 0.7.2、leaflet-draw 0.2.4和leaflet-illustrate 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);
    });
}

Demo