Angular

Question

我正在开发 Angular CLI，我在其中构建了传单地图。
目标是 select 带有复选框的层以在地图中显示它们作为 HTML 部分显示：

 <div class="form-check">
 <input class="form-check-input" type="checkbox" (change)="testCheck($event)" name="releves">
 <label class="form-check-label">Layer 1</label>
 </div>

当我 select“第 1 层”时，复选框被选中并运行 testCheck($event)。

正如 Typescript 部分所示，我添加了代码行以在地图上显示图层：

 testCheck(event: any){
      if (event.target.name == 'releves'){
         var releves = L.tileLayer.wms('https://URL_TO_THE_WMS', {layers: 'myLayer',format: 'image/png',transparent:true});
         if (event.target.checked === true){ 
                 if (! this.mymap.hasLayer(releves)) {
                    releves.addTo(this.mymap);
                 }
                 else if (this.mymap.hasLayer(releves)) {
                    // do nothing
                 }
            let i = 0;
            this.mymap.eachLayer(function(){ i += 1; });
            console.log('Map has', i, 'layers.');
         }
         else {
                if (this.mymap.hasLayer(releves)) {
                    console.log ("has layer 1");
                    this.mymap.removeLayer(releves);
                }
            }
        }
    }

Layer 1 在地图上显示的很好，这里没问题（见releves.addTo(this.mymap)）。但是我有两个问题无法解决:

当我取消选中“第 1 层”时（意味着 event.target.name 在 else 条件部分 中不是 true），该层不会被删除，而我使用 removeLayer 方法。
hasLayer方法好像不行。事实上，在显示第 1 层之后，当我取消选中并测试该层是否存在时，我应该在删除之前收到 console.log 消息 "has layer 1"。但是什么都没有...

你知道如何调试吗？
非常感谢任何帮助，谢谢

Answer 1

每次调用 testCheck 方法时都会创建一个全新的 releves 层，因此 hasLayer(releves) 将始终是 false。

将您的层存储在“永久”状态，通常作为您的 Angular 组件的成员，就像您对 mymap:

所做的一样

@Component({})
export class MyComponent {
  releves = L.tileLayer.wms();

  testCheck(event) {
    if (this.mymap.hasLayer(this.releves)) {
      // etc.
    }
  }
}

Angular - 使用复选框到 Leaflet 地图上的 display/remove 图层

Angular - use checkboxes to display/remove layers on a Leaflet map

javascript

if-statement

leaflet

typescript