angular - AGM Angular Google Maps Set程序化缩放

我正在使用AGM（Angular Google Maps）和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移植过来的，在那里我使用了
但是，在Angular 6中，用于google的原始JS似乎只是将google库拉到组件库并不是很简单，并且一旦尝试将组件安装到另一个应用程序中就无法正常工作。

最佳答案

所以根据@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>

根据您的需要进行调整