使用Angular 8和OpenLayers 3从地图中绘制和删除临时矢量图层

我有一个用Angular 8和OpenLayers 3构建的项目。我想能够绘制和删除多边形从地图。我试图将这项工作移植到我的项目中。

这些是相互作用的组件

• 侧边栏.html：包含要单击的按钮
• 侧栏。组件：调用可观察对象的下一个（）
• 侧栏。服务：包含可观察到的服务的实现
• map.component：其中我们订阅（）可观察对象并添加（临时）向量层

使用下面的代码，我可以在地图上绘制多边形，但不能删除它们

在sidebar.html中，一个按钮被设置为调用addInteraction（）

sidebar.html 在侧边栏中，实现了next（）服务

边栏服务 在下一行中，当触发事件时，此.polygonLayer未定义

问题就在这里

在map.component中，我放置了事件的处理程序。触发事件时，向量层（又名polygonLayer）未定义。看起来向量不会绑定到这个。这是一个绑定问题吗？如果是，为什么会发生这种情况

是的，这是您的

此

的绑定（范围）问题。将您的功能更改为：

this.\u map.on（'click'，（evt）=>{
var features=this.polygonLayer.getSource（）.getFeatures（）；
features.forEach（（feature）=>{
this.polygonLayer.getSource（）.removeFeature（功能）；
});
});

自：

箭头函数没有自己的

此

。

此

值 使用封闭的词汇范围；箭头功能遵循正常设置 变量查找规则。因此，在搜索

时，此

不是 在当前作用域中，一个箭头函数最终会找到

this

从它的封闭范围

那么您的

此

具有正确的作用域（您的组件）。

是的，您的

此

存在绑定（作用域）问题。将您的功能更改为：

this.\u map.on（'click'，（evt）=>{
var features=this.polygonLayer.getSource（）.getFeatures（）；
features.forEach（（feature）=>{
this.polygonLayer.getSource（）.removeFeature（功能）；
});
});

自：

箭头函数没有自己的

此

。

此

值 使用封闭的词汇范围；箭头功能遵循正常设置 变量查找规则。因此，在搜索

时，此

不是 在当前作用域中，一个箭头函数最终会找到

this

从它的封闭范围

然后，您的

此

具有正确的范围（您的组件）

  ...
  <mat-button-toggle value="Polygon" (change)="addInteraction()">Draw Polygon
    <mat-icon>crop_original</mat-icon></mat-button-toggle>
  <br><br/>
  ...

  ...
  addInteraction() {
    this._sidebarService.nextDrawAOI('Polygon');
  }
  ...

  private drawAOI = new Subject<string>();

  ...
  getDrawAOI() {
    return this.drawAOI.asObservable();
  }
   ...
  nextDrawAOI(x) {
    this.drawAOI.next(x);
  }

    ...
private polygonLayer: VectorLayer;
private polygonSource: VectorSource;
private modify: Modify;
private draw: Draw;
private snap: Snap;
    ...
ngAfterViewInit() {

..

// Layers
let source = new OlXYZ({
  ..
});

let layer = new OlTileLayer({
  ..
});

// View
let view = new OlView({
  ..
});

const mousePositionControl = new MousePosition({
   ...
});

// Map
this._map = new OlMap({
  controls: defaultControls().extend([
    scaleLineControl, mousePositionControl
  ]),
  interactions: OlXYZ.interactions,
  target: 'map',
  layers: [layer],
  view: view
});


this._sidebarService.getDrawAOI().pipe(map((x) => {
  this.polygonSource = new VectorSource({
    wrapX: false,
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
  });
  this.polygonLayer = new VectorLayer({
    source: this.polygonSource
  });

  this.modify = new Modify({source: this.polygonSource});
  this._map.addInteraction(this.modify);

  this._map.removeInteraction(this.draw);
  this._map.removeInteraction(this.snap);
  this.polygonLayer.setMap(null);

  this.draw = new Draw({
    source: this.polygonSource,
    type: x
  });
  this._map.addInteraction(this.draw);
  this.snap = new Snap({source: this.polygonSource});
  this._map.addInteraction(this.snap);

  this.polygonLayer.setMap(this._map);
  return x;
})).subscribe((x) => {
  console.log(x);
});


this._map.on('click', function(evt) {

  var features = this.polygonLayer.getSource().getFeatures();
  features.forEach((feature) => {
    this.polygonLayer.getSource().removeFeature(feature);
  });
});

}