AGM angular Google 地图以编程方式设置缩放

Question

我正在使用 AGM（Angular Google 地图）和 OpenLayers。

我需要以编程方式设置我的 AGM 的缩放，但一直无法弄清楚它是如何工作的。

HTML 地图...

<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>

组件代码

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

我实际上是从 AngularJS 移植这个的 google 的原始 JS 但是在 Angular 6 中似乎只是将 google 库拉到组件库不是很简单，并且一旦您尝试将组件安装到另一个组件中就不起作用申请。

Answer 1

所以根据 @agm/core 文档，有一个缩放 @input https://angular-maps.com/api-docs/agm-core/components/agmmap#zoom

更改此输入的值会影响地图的缩放

将这样的函数添加到您的组件中

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

然后把函数绑定到一个按钮上

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

根据您的需要进行调整

Answer 2

只是为了补充答案，您还可以使用间隔动画缩放

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

然后在你的按钮上

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

Answer 3

未触发缩放更改检测的原因是您的 currZoom 变量从未更改过。我通过保持 currZoom 变量与地图同步来解决这个问题。当用户更改缩放比例时，它将更新您的变量。然后当你想以编程方式改变缩放时，会有一个差异来检测。

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

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

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

现在您可以更新 currZoom 变量，agm-map 元素将检测到更改。

this.currZoom = 5;

AGM angular Google 地图以编程方式设置缩放

AGM angular Google Maps Set Zoom programmatically

angular

angular-components

angular-google-maps

openlayers-5

angular-library