Обновление синглтон-значения не отражено в AGM Map - PullRequest
Новая
       44

Обновление синглтон-значения не отражено в AGM Map

0 голосов
/ 20 февраля 2019

Я пытаюсь программно установить уровень масштабирования для карты AGM.

Если I ...

HTML 

<button (click)="changeZoom(2)">zoom</button>
        <agm-map  
        [latitude]="lat" 
        [longitude]="lng"
        [zoom]="currZoom" 
        [mapTypeId]="mapType" 
        [mapTypeControl]="mapControls" 
        [zoomControl]="mapControls" 
        [streetViewControl]="mapControls">

      </agm-map>

Код компонента 

export class MsMapComponent implements OnInit {

lat: number = msFormValues.googleLat;
lng: number = msFormValues.googleLng;
currZoom: number = msFormValues.googleZoom;
mapType = 'satellite' ;
mapControls = false;
constructor() {

}

ngOnInit() {

const osmLayer = new TileLayer({
source: new OSM()
});

const xyzLayer = new TileLayer({
source: new XYZ({
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
})
});
msFormValues.view = new View({
center: [0,0],
zoom: 0,
projection: 'EPSG:3857',
maxZoom: 20,
minZoom: 5
});
msFormValues.googleZoom = msFormValues.view.getZoom();
msFormValues.map = new olMap({
target: 'map',
layers: [
osmLayer,
// xyzLayer
],
view: msFormValues.view
}); 
msFormValues.view.on('change:center',function(){
var mapCenter = transform(msFormValues.view.getCenter(),'EPSG:3857', 
'EPSG:4326');
msFormValues.googleLat = mapCenter[1];
msFormValues.googleLng = mapCenter[0];
});
msFormValues.view.on('change:resolution',function(){
msFormValues.googleZoom = msFormValues.view.getZoom();
this.currZoom = 2;

});

}
setMapType(mapTypeId: string) {}
changeZoom(zoomLeve: number){
this.currZoom = zoomLeve;
}
}

Singleton Values ​​

@Injectable()
export class msFormValues {
public static cropYear: any = '';
public static map: any = null;
public static view: any = null;
public static googleLat: any = 0;
public static googleLng: any = 0;
public static googleZoom: any = 5;
}

Если я вызываю «changeZoom» нажатием кнопки и обновляю переменную «currZoom», карты AGM отвечают и обновляют уровень масштабирования.Однако, если я обновлю «currZoom» изнутри «change: resolution», посмотрите, что AGM карта не обновляется ... также, если я попытаюсь вызвать «changeZoom» изнутри «change: resolution», посмотрите, что «changeZoom» функцияundefined.

Обновление Похоже, что "this.currZoom" внутри "change: resolution" равно "undefined", не уверен, почему это было бы там, где я его объявляю.

Любая помощь с благодарностью !!

1 Ответ

0 голосов
/ 20 февраля 2019

Хорошо, поэтому тот факт, что "this.currZoom" внутри слова "изменить: разрешение" был неопределен, дал мне подсказку ...

То, что я сделал, было ..

Определите мой синглтон... 

formValues = msFormValues;

Затем указали свойства на одноэлементную переменную, которую я установил 

<agm-map  
        [latitude]=(formValues.googleLat)
        [longitude]=(formValues.googleLng)
        [zoom]=(formValues.googleZoom)
        [mapTypeId]="mapType" 
        [mapTypeControl]="mapControls" 
        [zoomControl]="mapControls" 
        [streetViewControl]="mapControls">

      </agm-map>

Затем я просто обновил значение синглтона внутри 'change: resolution' 

msFormValues.view.on('change:resolution',function(){
  msFormValues.googleZoom = msFormValues.view.getZoom();    

});

... и все счастливы!

...