Use openlayers extent with angular

Question

I use angular 6 with openlayers 5.1.3. I try to combine the extent of two vector layers and then fit the view of the map.

I do the following

import Extent from 'ol/interaction/Extent.js';
olextent: Extent;
//then in ngOnInit
ngOnInit() {
  this.olextent = new Extent();
}

//then get the extent of the 2 layers
let relatedext = this.relatedsource.getExtent();
let vectorext = this.vectorsource.getExtent(); 
//then create an empty extent and extent it with the layer extents

ext = this.olextent.createEmpty(); 
ext.extend(this.olextent, relatedext);
ext.extend(this.olextent, vectorext); 

//also create a size and use it with the extent to fit the map view

this.olmap.getView().fit(ext, {size:size, duration: 1500});

This code looks normal to me, but I get this.olextent.createEmpty is not a function and it does not work.

How can I fix this?

You are importing from the wrong module. See this example openlayers.org/en/latest/examples/earthquake-clusters.html for the correct import and use of createEmpty and extend. — Mike
– Mike, Commented Nov 19, 2018 at 21:59
Thanks but if I import from import extent from 'ol/extent.js'; I get a warning "export 'default' (imported as 'extent') was not found in 'ol/extent.js — codebot
– codebot, Commented Nov 20, 2018 at 12:41

Mike · Accepted Answer · 2018-11-20 13:35:06Z

1

I think this is what you may be trying to achieve (unless you have some interaction processing elsewhere in your code)

import {createEmpty, extend} from 'ol/extent.js';

//then in ngOnInit
ngOnInit() {
  this.olextent = createEmpty();
}

//then get the extent of the 2 layers
let relatedext = this.relatedsource.getExtent();
let vectorext = this.vectorsource.getExtent(); 
//then extent empty extent with the layer extents

extend(this.olextent, relatedext);
extend(this.olextent, vectorext); 

//also create a size and use it with the extent to fit the map view

this.olmap.getView().fit(this.olextent, {size:size, duration: 1500});

answered Nov 20, 2018 at 13:35

Mike

18.2k2 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

codebot Over a year ago

Thanks Mike, clean and self-explanatory code. It worked.

Collectives™ on Stack Overflow

Use openlayers extent with angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related