4
votes

Google Maps angulaire AGM Réglez le zoom par programmation

Je travaille avec AGM (Angular Google Maps) et OpenLayers.

Je dois régler le zoom de mon AGM par programmation, mais je n'ai pas été en mesure de comprendre comment cela fonctionne.

Cartes HTML ...

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';
import { GoogleMap } from '@agm/core/services/google-maps-types';

import olMap from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import OSM from 'ol/source/OSM.js';
import XYZ from 'ol/source/XYZ';
import {transform} from 'ol/proj';
import {msFormValues} from './../values/ms-form-values';

@Component({
  selector: 'ms-map',
  templateUrl: './ms-map.component.html',
  styleUrls: ['./ms-map.component.scss']
})
export class MsMapComponent implements OnInit {

// testCoord = 
transform([msFormValues.googleLng,msFormValues.googleLat],'EPSG:3857', 
'EPSG:4326');

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();   
  });

  }
  setMapType(mapTypeId: string) {}
}

Code du composant

<div id="mapWrap" class="mapWrap" style="padding: 0px; width: 100%; height: 
100%; text-align: left">

  <agm-map  
    [latitude]="lat" 
    [longitude]="lng"
    [zoom]="currZoom" 
    [mapTypeId]="mapType" 
    [mapTypeControl]="mapControls" 
    [zoomControl]="mapControls" 
    [streetViewControl]="mapControls" 
  ></agm-map>

  <div id="map" class="map" style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: absolute; opacity: 0.5"></div>
</div>

Je porte en fait ceci à partir d'AngularJS où j'ai eu tout cela en travaillant avec le Cependant, dans Angular 6, le JS raw pour google semble simplement tirer les bibliothèques google vers une bibliothèque de composants n'était pas très simple et ne fonctionnait pas une fois que vous avez essayé d'installer votre composant dans une autre application.

angular angular-library angular-components angular-google-maps openlayers-5

2 commentaires

Quel est le problème exactement? vous semblez initialiser la vue google maps avec un zoom de 0? ne pouvez-vous pas simplement le changer pour ce que vous désirez? ou demandez-vous comment écrire une fonction qui change le zoom?

Désolé, donc dans le code du composant où je ".on ('change: resolution'", je change le zoom mais rien ne se passe ... Je sais que je pouvais appeler "setZoom" mais je ne sais pas comment faire faire cela avec AGM

3 Réponses :

2
votes

donc selon la documentation @ agm / core il y a un zoom @input https://angular-maps.com/api-docs/agm-core/components/agmmap#zoom

modification de la valeur de cette entrée affecte le zoom de la carte

ajouter une fonction comme celle-ci à votre composant

<button (click)="setZoom()">Set Zoom</button>

puis lier la fonction sur un bouton p>

public setZoom(): void {
  this.zoom = 10;
}

ajustez-le à vos besoins

2 commentaires

Oui, cela fonctionne ... J'ai ajusté mes tests pour inclure uniquement la carte de l'AGA et cela fonctionne, je publierai des problèmes supplémentaires que je rencontre. Merci

@jahller Cela ne fonctionne pas quand nous avons un cluster de marqueurs.Même après avoir défini le niveau de zoom, il reste zoomé parce que le cluster de marqueurs effectue un zoom sur la carte lorsque nous cliquons sur cluster.Y a-t-il une solution à cela

1
votes

Juste pour ajouter à la réponse, vous pouvez également animer le zoom en utilisant l'intervalle

<button (click)="zoomIn()"> Animate Zoom</button>

puis sur votre bouton

zoomIn(){
   const interValZoom = setInterval(() => {
    this.zoom = this.zoom + 1 ;
        if (this.zoom > 15) {
            clearInterval(interValZoom); 
             // stop the zoom at your desired number
            }
    }, 100);
}

0 commentaires

0
votes

La raison pour laquelle la détection de changement de zoom n'est pas déclenchée est que votre variable currZoom n'est jamais modifiée. J'ai résolu ce problème en gardant la variable currZoom synchronisée avec la carte. Lorsque l'utilisateur modifie le zoom, il met à jour votre variable. Ensuite, lorsque vous souhaitez modifier le zoom par programmation, il y aura une différence à détecter.

this.currZoom = 5;

currZoom: number = 4       // <---- Example 4 for initial value

onZoomChange(newZoomValue) {
    this.currZoom = newZoomValue;
}

Vous pouvez maintenant mettre à jour le currZoom variable et l'élément agm-map détectera le changement.

<agm-map  
       [zoom]="currZoom"
       (zoomChange)="onZoomChange($event)" <---------- Add this
></agm-map>

0 commentaires