Question

我在项目中使用leaflet，leaflet-editable和Angular。我想创建用于在地图上绘制多面体的控件（非常类似于github页面上的给定示例）。我在组件中的代码如下：

import 'leaflet';
import 'leaflet-editable';

...

this.map = L.map('map', {editable: true}).setView([-0.163360, 13.053125], 3).addLayer(osm);
L.NewPolygonControl = L.Control.extend({
  options: {
    position: 'topleft'
  },
  onAdd: function (map) {
    const container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
      link = L.DomUtil.create('a', '', container);
    link.title = 'Create a new polygon';
    link.innerHTML = '▱';
    L.DomEvent.on(link, 'click', L.DomEvent.stop)
      .on(link, 'click', function () {
        map.editTools.startPolygon();
      });
    container.style.display = 'block';
    map.editTools.on('editable:enabled', function (e) {
      container.style.display = 'none';
    });
    map.editTools.on('editable:disable', function (e) {
      container.style.display = 'block';
    });
    map.editTools.on('editable:drawing:move', function (e) {

    });
    return container;
  }
});
L.AddPolygonShapeControl = L.Control.extend({
  options: {
    position: 'topleft'
  },
  onAdd: function (map) {
    const container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
      link = L.DomUtil.create('a', '', container);
    link.title = 'Create a new polygon';
    link.innerHTML = '▱▱';
    L.DomEvent.on(link, 'click', L.DomEvent.stop)
      .on(link, 'click', function () {
        if (!map.editTools.currentPolygon) return;
        map.editTools.currentPolygon.editor.newShape();
      });
    container.style.display = 'none';
    map.editTools.on('editable:enabled', function (e) {
      container.style.display = 'block';
    });
    map.editTools.on('editable:disable', function (e) {
      container.style.display = 'none';
    });
    return container;
  }
});
this.map.addControl(new L.NewPolygonControl());
this.map.addControl(new L.AddPolygonShapeControl());

控件工作正常，但是，编译后出现以下错误消息：

ERROR in src/app/pages/countryEdit/country/country.component.ts(84,7):         
error TS2339: Property 'NewPolygonControl' does not exist on type         
'typeof L'.
src/app/pages/countryEdit/country/country.component.ts(110,7): error 
TS2339: Property 'AddPolygonShapeControl' does not exist on type 
'typeof L'.
src/app/pages/countryEdit/country/country.component.ts(134,31): error 
TS2339: Property 'NewPolygonControl' does not exist on type 'typeof 
L'.
src/app/pages/countryEdit/country/country.component.ts(135,31): error 
TS2339: Property 'AddPolygonShapeControl' does not exist on type 
'typeof L'.

我对angular和Typescript的了解仍然有限，我不知道如何解决此编译错误。我添加了传单和可编辑传单的类型。

Answer 1

对于任何来这里遇到同样问题的人。我只是创建了一个新变量，而不是在L上创建了新属性。因此，我写了L.NewControl = 'bla bla'而不是const newControl = 'bla bla'。我像L.NewControl一样使用了新变量，并且一切正常，没有编译错误。

在Angular 2+中创建新的Leaflet控件

1 个答案: