Используйте Angular 8 и OpenLayers 3 для рисования и удаления временных векторных слоев с карты. - PullRequest
Новая
       30

Используйте Angular 8 и OpenLayers 3 для рисования и удаления временных векторных слоев с карты.

1 голос
/ 08 апреля 2020

У меня есть проект, построенный с Angular 8 и OpenLayers 3. Я хочу иметь возможность рисовать, а также удалять полигоны с карты. Я попытался перенести этот рабочий пример в мой проект.

Это взаимодействующие компоненты.

  • боковая панель. html: содержит кнопку, которую нужно нажать
  • sidebar.component : вызывает next ( ) наблюдаемого.
  • sidebar.service : содержит реализацию наблюдаемой.
  • map.component : в которой мы subscribe () к наблюдаемой и добавить (временный) векторный слой.

С помощью следующего кода я могу рисовать многоугольники на карте, но не могу их удалить.

В боковой панели. html установлена ​​кнопка для вызова addInteraction () .

боковой панели. html

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

В Компонент боковой панели, который мы называем next ()

sidebar.component 

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

В сервисе боковой панели есть next () реализовано.

sidebar.service 

  private drawAOI = new Subject<string>();

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

В компоненте map функция subscribe () вызывается и. .

  1. Создан векторный слой.
  2. Добавлены взаимодействия Draw, Snap и Modify.
  3. Карта добавляется в векторный слой с помощью setMap (this.map) . Слой не будет обрабатываться картой, но он будет временно добавлен к нему.

map.component 

    ...
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) {

В следующей строке при возникновении события this.polygonLayer равно undefined ! 

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

}

Проблема заключается здесь.

В map.component я поместил обработчик события. Когда происходит событие, векторный слой (он же. polygonLayer ) не определен. Кажется, что вектор не будет связываться с этим . Это обязательная проблема? И если это так, то почему это происходит?

1 Ответ

0 голосов
/ 09 апреля 2020

Да, это проблема привязки (объема) с вашим this. Измените свою функцию на функцию стрелки : 

this._map.on('click', (evt) => {
  var features = this.polygonLayer.getSource().getFeatures();
  features.forEach((feature) => {
    this.polygonLayer.getSource().removeFeature(feature);
  });
});

Поскольку:

Функция стрелки не имеет своей собственной this. Используется значение this заключительной лексической области; Функции стрелок следуют нормальным правилам поиска переменных. Таким образом, при поиске this, которого нет в текущей области видимости, функция стрелки в конечном итоге находит this из входящей в нее области видимости.

Тогда ваша this имеет правильную область видимости (ваш компонент).

...