On our Angular 5 project we have included an openstreetmap with ngx-openlayer. I have an Map with a list of POI's. This list can be filtered by different criteria. I want to change the zoom level so that all POI's on the list are shown.
As I have found we can use
this.map.instance.getView().fit(extent1, this.map.instance.getSize());
to do that, but I have the problem to get the correct extent for that.
<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>
On the Typescript I have try to get that needed extent over the source ( extent1 ) but it give me a extent from -infinity to infinity. I have also try to get minX, maxX, minY and maxY from my cooridnates. (extent) This will zoom deeply to the center. I think here is the problem that I need convert our coordinates from EPSG:4326 to some internal coordiantes. But how can I do that?
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());
}
}
}
}
It looks like I need ol.proj.transformExtent(). But how can I access the ol.proj from ngx-openlayer? And what is the destination cooridates system to get make the transformation?
I think I have found the solution.
First of all ngx-openlayer depends on openlayer, so we can also import openlayer directly:
import {proj} from 'openlayers';
So now we can call proj when we need to call ol.proj.
The Projection which is used by Openstreetmap is EPSG:3857. To transfer my extent to this coordiates system I will now call
const extent1 = proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
The whole typescript as refenece:
import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {MapEvent, proj} from 'openlayers';
import {Subscription} from 'rxjs';
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, OnDestroy, AfterViewInit {
subscription: Subscription;
@ViewChild('map', {static: true}) map: any;
centerlong = 10.447683;
centerlat = 51.163375;
datapoints = [];
tempZoom = 0;
zoom = 7;
constructor(public api: ApiGatewayService) {
}
ngOnInit() {
this.subscription = this.api.datapointsChanged
.subscribe(item => {
console.log('DataMapComponent::DatapointsChanged', item);
this.datapoints = this.api.datapoints;
this.updateZoom();
});
this.updateZoom();
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
onMoveEnd(e: MapEvent) {
console.log('DataMapComponent::onMoveEnd::getZoom' + e.map.getView().getZoom());
this.zoom = e.map.getView().getZoom();
if (this.tempZoom > 0) {
if (this.zoom > this.tempZoom) {
const zoom = this.tempZoom;
this.tempZoom = 0;
this.zoom = zoom;
}
}
}
updateZoom() {
console.log('DataMapComponent::updateZoom');
if (this.api.datapoints.length > 0) {
console.log('DataMapComponent::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) {
if (this.useCoord(item.longitude, item.longitude)) {
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;
}
}
}
this.centerlong = (minlong + maxlong) / 2;
this.centerlat = (minlat + maxlat) / 2;
if (this.map.instance) {
if (this.api.datapoints.length > 1) {
const extent: [number, number, number, number] = [minlong, minlat, maxlong, maxlat];
console.log('DataMapComponent::updateZoom::Extent1', extent);
console.log('DataMapComponent::updateZoom::Map', this.map.instance);
const extent1 = proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
// var extent1 = this.source.instance.getExtent();
console.log('DataMapComponent::updateZoom::Extent2', extent1);
this.map.instance.getView().fit(extent1, this.map.instance.getSize());
this.tempZoom = 10;
} else {
this.map.instance.getView().setCenter(proj.transform([this.centerlong, this.centerlat], 'EPSG:4326', 'EPSG:3857'));
this.zoom = 10;
}
} else {
console.log('DataMapComponent::updateZoom Map not ready!');
setTimeout(_ => {
this.updateZoom();
}, 200);
}
}
}
useCoord(lat, long): boolean {
const result = !Number.isNaN(Number(lat)) && !Number.isNaN(Number(long)) && (Number(lat) !== 0.0 || Number(long) !== 0.0);
// console.log('DataDetailJobComponent::useCoord::lat,long,result', lat, Number.isNaN(lat), long, Number.isNaN(long), result);
return result;
}
}
And on the html code we need to listen onMoveEnd Events
<aol-map #map [width]="'100%'" [height]="'100%'" (onMoveEnd)="onMoveEnd($event)">
<aol-control-defaults > </aol-control-defaults>
<!-- [units]="'degrees', 'imperial', 'nautical', 'metric', 'us'" -->
<aol-control-scaleline></aol-control-scaleline>
<aol-interaction-default></aol-interaction-default>
<aol-view [zoom]="zoom" [maxZoom]="20">
<aol-coordinate [x]="centerlong" [y]="centerlat" [srid]="'EPSG:4326'"></aol-coordinate>
</aol-view>
<!-- aol-layer-tile [postcompose]="onPostcompose" -->
<aol-layer-tile [zIndex]="1">
<aol-source-osm></aol-source-osm>
</aol-layer-tile>
<aol-layer-tile [zIndex]="2">
<aol-source-osm ></aol-source-osm>
</aol-layer-tile>
<aol-layer-vector [opacity]="1" [zIndex]="3">
<aol-source-vector>
<ng-container *ngFor="let item of api.datapoints">
<ng-container *ngIf="useCoord(item.latitude , item.longitude)">
<aol-feature [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, 0.5]"
[anchorXUnits]="'fraction'"
[anchorYUnits]="'fraction'" [scale]="1" [anchorOrigin]="'top-left'">
</aol-style-icon>
</aol-style>
</aol-feature>
</ng-container>
</ng-container>
</aol-source-vector>
</aol-layer-vector>
</aol-map>