6

我正在使用 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 移植这个的您的组件到另一个应用程序。

4

3 回答 3

3

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

根据您的需要进行调整

于 2019-02-20T10:45:25.910 回答
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>
于 2019-05-11T06:08:47.410 回答
2

未触发缩放更改检测的原因是因为您的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;
于 2020-08-26T22:24:01.587 回答