【发布时间】：2018-03-13 08:41:27
【问题描述】：
在我们的 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 到无穷大的范围。我还尝试从我的坐标中获取 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？ 什么是目的地坐标系统来进行转换？
【问题讨论】：
标签： angular openlayers openstreetmap