Моя кнопка onClick Renter для OpenLayers не работает - PullRequest
Новая
       15

Моя кнопка onClick Renter для OpenLayers не работает

0 голосов
/ 15 октября 2018

Я создаю угловое приложение, используя openlayers, чтобы при нажатии на кнопку оно заново центрировало мою карту. Я пытаюсь перецентрировать мою карту, когда нажимаю на кнопку, но это не работает.

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

Может кто-нибудь сказать мне, что я делаю неправильно.Заранее спасибо! 

import { Component } from '@angular/core';
import {fromLonLat} from 'ol/proj'
import {view} from 'ol/View';
import * as ol from 'openlayers';

export class AppComponent {
  distance = 60;
  points: Array<{ x: number; y: number; }> = [];
  position : Array<{ x: number; y: number; id: string; radius: number,color:string, place:string}> = 
  [
      {x:11.5820,y:48.1351,id:"munich",radius:20, color:"red", place:"m"},
      {x:13.388866,y:52.517071,id:"berlin", radius:40,color:"blue", place:"b"},
  ];

  coords = {
    berlin: [13.388866, 52.517071]
 };

 onClick (city: string) {
  view.setCenter({
     center: fromLonLat(this.coords[city]),
     duration: 2000
  });
}

  mapOnClick(evt) {
    console.log(evt);
    const map = evt.map;
    // this bit checks if user clicked on a feature
    const p = map.forEachFeatureAtPixel(evt.pixel,
     function(feature, layer) {
      console.log("got feature" + feature.getId());
      return feature;

    });
  }
}

<button id='berlin' (click)="onClick('berlin')">Zoom to Berlin</button>

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Если вы пытаетесь recenter , то уже должно быть представление, но если оно было построено внутри конструктора карты, переменная представления не будет, и вам нужно будет ссылаться на нее с помощью map.getView.().Также setCenter () не выполняет анимацию.Предполагая, что ваша переменная карты map try: 

  map.getView().animate({
     center: fromLonLat(this.coords[city]),
     duration: 2000
  })
0 голосов
/ 15 октября 2018

Давайте попробуем это один раз только для предложения, 

import OlView from 'ol/View';

view: OlView;

 ngOnInit() {
    this.view = new OlView({
      center: fromLonLat(this.coords[city]),
      zoom: 3
    });
  }

Я надеюсь, это решит вашу проблему, если вы получили правильные данные для переменной this.coords[city].Вам нужно передать данные, как это, center: fromLonLat([6.661594, 10.32371]).

Для получения дополнительной справки, Используйте OpenLayers 4 с Angular 5

Вы можете получить некоторую идею из приведенного выше примера URL.

Спасибо,

Muthukumar

...