Question

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

Answer 1

只需添加到答案中，您还可以使用间隔为缩放动画设置动画

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 2

因此根据@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 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角度Google地图以编程方式设置缩放

3 个答案: