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以后的传单版本和0.2.x以后的传单绘图版本。

因此，要使用它，您需要使用旧版的传单和传单绘图，更具体地说是使用传单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

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

1 个答案: