在我们的Angular 5项目中，我们包含了一个带有ngx-openlayer的openstreetmap。 我有一张包含POI列表的地图。可以按不同标准过滤此列表。我想更改缩放级别，以便显示列表中的所有POI。
我发现我们可以使用
this.map.instance.getView（）。fit（extent1，this.map.instance.getSize（））;
要做到这一点，但我有问题要找到正确的范围。
<aol-map #map [width]="'100%'" [height]="'100%'">
<aol-control-defaults></aol-control-defaults>
<aol-control-scaleline></aol-control-scaleline>
<aol-interaction-default></aol-interaction-default>
<aol-interaction-select (onSelect)="onClick($event)"></aol-interaction-select>
<aol-view #view [zoom]="zoom">
<aol-coordinate [x]="centerlong" [y]="centerlat" [srid]="'EPSG:4326'"></aol-coordinate>
</aol-view>
<!-- aol-layer-tile [postcompose]="onPostcompose" -->
<aol-layer-tile>
<aol-source-osm></aol-source-osm>
</aol-layer-tile>
<!-- List of POIs -->
<aol-layer-vector [opacity]="1" (click)="onClick('Layer')">
<aol-source-vector #source>
<ng-container *ngFor="let item of api.datapoints">
<aol-feature *ngIf="item.icon" [id]="item.uuid">
<aol-geometry-point>
<aol-coordinate [x]="item.longitude" [y]="item.latitude" [srid]="'EPSG:4326'"></aol-coordinate>
</aol-geometry-point>
<aol-style>
<aol-style-icon [src]="'./assets/img/'+item.icon" [anchor]="[0.5, 1]" [anchorXUnits]="'fraction'"
[anchorYUnits]="'fraction'" [scale]="1" [anchorOrigin]="'top-left'"></aol-style-icon>
</aol-style>
</aol-feature>
</ng-container>
</aol-source-vector>
</aol-layer-vector>
<aol-overlay *ngIf="this.api.datapoints.length == 0">
<aol-coordinate
[x]="centerlong"
[y]="centerlat"
[srid]="'EPSG:4326'"
>
</aol-coordinate>
<aol-content>
<div class="alert alert-danger" i18n>No data points found!</div>
</aol-content>
</aol-overlay>
</aol-map>
在Typescript上我试图在源（extent1）上获得所需的范围，但它给了我从-infinity到infinity的范围。我也尝试从我的cooridnates获得minX，maxX，minY和maxY。 （范围）这将放大到中心。我认为这是我需要将我们的坐标从EPSG：4326转换为一些内部坐标的问题。但是我该怎么做呢？
import {Component, OnInit, ViewChild} from '@angular/core';
import {ApiGatewayService} from '../../../service/apigateway.service';
@Component({
selector: 'app-data-map',
templateUrl: './data-map.component.html',
styleUrls: ['./data-map.component.css']
})
export class DataMapComponent implements OnInit {
@ViewChild('view') view: any;
@ViewChild('map') map: any;
@ViewChild('source') source: any;
centerlong = 14.8;
centerlat = 52.50;
zoom = 7;
constructor(public api: ApiGatewayService) {
}
ngOnInit() {
console.log('MAP', this.view);
}
updateZoom() {
if (this.api.datapoints.length > 1) {
console.log("updateZoom")
let minlong = 200;
let maxlong = -200;
let minlat = 100;
let maxlat = -100;
for (const item of this.api.datapoints) {
console.log('Item', item);
if (item.latitude < minlat) {
minlat = item.latitude;
}
if (item.latitude > maxlat) {
maxlat = item.latitude;
}
if (item.longitude < minlong) {
minlong = item.longitude;
}
if (item.longitude > maxlong) {
maxlong = item.longitude;
}
console.log('Box', minlat, minlong, maxlat, maxlong);
}
this.centerlong = (minlong + maxlong) / 2;
this.centerlat = (minlat + maxlat) / 2;
const extent = [minlong, minlat, maxlong, maxlat];
if (this.map.instance) {
var extent1 = this.source.instance.getExtent();
console.log('Set zoom level', extent1);
this.map.instance.getView().fit(extent1,
this.map.instance.getSize());
}
}
}
}
看起来我需要ol.proj.transformExtent（）。 但是如何从ngx-openlayer访问ol.proj？ 什么是目标cooridates系统来进行转型？
答案 0 :(得分：0)
我想我找到了解决方案。
首先，ngx-openlayer依赖于openlayer，因此我们也可以直接导入openlayer：
import {proj} from 'openlayers';
所以现在我们可以在需要调用ol.proj时调用proj。
Openstreetmap使用的Projection是EPSG：3857。 为了将我的范围转移到这个协调系统，我现在打电话给
const extent1 = proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
完整的打字稿：
import {Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from '@angular/core';
import {ApiGatewayService} from '../../../service/apigateway.service';
import {Subscription} from 'rxjs/Subscription';
import {MapEvent, proj} from 'openlayers';
@Component({
selector: 'app-data-map',
templateUrl: './data-map.component.html',
styleUrls: ['./data-map.component.css']
})
export class DataMapComponent implements OnInit, OnDestroy, AfterViewInit {
subscription: Subscription;
@ViewChild('view') view: any;
@ViewChild('map') map: any;
@ViewChild('source') source: any;
centerlong = 14.8;
centerlat = 52.50;
zoom = 7;
constructor(public api: ApiGatewayService) {
}
ngOnInit() {
console.log('MAP', this.view);
this.subscription = this.api.datapointsChanged
.subscribe(item => this.updateZoom());
}
ngAfterViewInit(): void {
this.map.instance.on('moveend', (e: MapEvent) => {
console.log('map-move-end: ' + e.map.getView().getZoom());
this.zoom = e.map.getView().getZoom();
});
}
updateZoom() {
console.log('updateZoom');
if (this.api.datapoints.length > 0) {
console.log('updateZoom::Lenght', this.api.datapoints.length);
let minlong = 200;
let maxlong = -200;
let minlat = 100;
let maxlat = -100;
for (const item of this.api.datapoints) {
console.log('updateZoom::Item', item);
if (item.latitude < minlat) {
minlat = item.latitude;
}
if (item.latitude > maxlat) {
maxlat = item.latitude;
}
if (item.longitude < minlong) {
minlong = item.longitude;
}
if (item.longitude > maxlong) {
maxlong = item.longitude;
}
console.log('updateZoom::Box', minlat, minlong, maxlat, maxlong);
}
this.centerlong = (minlong + maxlong) / 2;
this.centerlat = (minlat + maxlat) / 2;
this.zoom = 7;
if (this.api.datapoints.length > 1) {
const extent: [number, number, number, number] = [minlong, minlat, maxlong, maxlat];
console.log('updateZoom::Extent1', extent);
if (this.map.instance) {
console.log('updateZoom::Map', this.map.instance);
const extent1 = proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
// var extent1 = this.source.instance.getExtent();
console.log('updateZoom::Extent2', extent1);
this.map.instance.getView().fit(extent1, this.map.instance.getSize());
}
}
}
}
}