Угловой - Установить значение формы из clickListener OpenLayers - PullRequest
Новая
       8

Угловой - Установить значение формы из clickListener OpenLayers

0 голосов
/ 06 декабря 2018

Я пытаюсь установить текстовое поле простой формы, содержащее longitute и latitute из clicklistener OpenlLayers.В результате я получаю

ОШИБКА TypeError: Невозможно прочитать свойство 'setValue' неопределенного

Почему this.lat и this.long создают неопределенное значение?Я думаю, потому что я нахожусь внутри этого слушателя, потому что, когда я устанавливаю значение в этом методе ngOnInit, это работает.Как я могу установить значение из clickListener?Чего мне не хватает? 

import { FormControl } from "@angular/forms";
import { Component, OnInit } from "@angular/core";

declare var ol: any;

@Component({
  selector: "app-spotcreation",
  templateUrl: "./spotcreation.component.html",
  styleUrls: ["./spotcreation.component.css"]
})
export class SpotcreationComponent implements OnInit {
  source = new ol.source.OSM();

  map: any;

  lon = new FormControl();
  lat = new FormControl();

  ngOnInit() {
    this.map = new ol.Map({
      target: "map",
      controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
      }),
      layers: [
    new ol.layer.Tile({
      source: this.source
    })
      ],
      view: new ol.View({
    center: ol.proj.fromLonLat([18.405, 45.095]),
    zoom: 8
      })
    });

    this.map.on("click", this.clickListener);
  }

  clickListener = function(args) {
    var lonlat = ol.proj.transform(args.coordinate, "EPSG:3857", "EPSG:4326");

    var latitude = lonlat[0];
    var longitude = lonlat[1];

    this.lat.setValue(latitude);
    this.lon.setValue(longitude);
  };
}

1 Ответ

0 голосов
/ 06 декабря 2018

Проблема связана с измененным контекстом.Вот почему lat и lon недоступны.Вы можете изменить свой код, как показано ниже, чтобы не потерять текущий контекст класса. 

    this.map.on("click", args=>{
       var lonlat = ol.proj.transform(args.coordinate, "EPSG:3857", "EPSG:4326");
       var latitude = lonlat[0];
       var longitude = lonlat[1];
       this.lat.setValue(latitude);
       this.lon.setValue(longitude);
    })

Не забудьте удалить функцию clickListener, так как код был перемещен внутри функции map.on.

...