javascript - OpenLayers 3: Zoom map to coordinates in array - Stack Overflow

admin管理员组

文章数量:1289845

I need to zoom my OpenLayers map (which uses a Google Maps baselayer) to fit all of a given list of coordinates into the view.

I've stored the coordinates in an array of longitude and latitude pairs named pointsDecimal which looks like this:

pointsDecimal: Array[50]
  0: 148.77638
  1: -34.491728
  2: 148.77896
  3: -34.492302
  4: 148.778090711323
  ...

Even-numbered indices (0, 2, 4 etc) are longitude, and odd-numbered indices (1, 3, 5 etc) are latitude.

This is the code I'm trying to use:

map.getView().fit(pointsDecimal, map.getSize());

But for some reason this puts me at maximum zoom level at the coordinates [0,0] - in the Gulf of Guinea, not in southeastern New South Wales where I'd like to be!

I know this would be much easier if I was using an OpenLayers source (e.g. source.getExtent()) in place of my pointsDecimal array, but this is not an option in this case for reasons I won't go into right now - I can only use the array.

Can anyone give me any hints please?

EDIT: I think I'm nearly there, thanks to Anupam. This is what I have now:

var extent = [pointsLongMin,pointsLatMin,pointsLongMax,pointsLatMax];
map.getView().fit(extent,map.getSize());

The values I'm passing to the array are as follows:

pointsLongMin: 148.771162
pointsLatMin: -34.5029736405108
pointsLongMax: 148.77896
pointsLatMax: -34.491728

But I'm still getting dumped out in the ocean at [0,0]. What am I doing wrong here?

I need to zoom my OpenLayers map (which uses a Google Maps baselayer) to fit all of a given list of coordinates into the view.

I've stored the coordinates in an array of longitude and latitude pairs named pointsDecimal which looks like this:

pointsDecimal: Array[50]
  0: 148.77638
  1: -34.491728
  2: 148.77896
  3: -34.492302
  4: 148.778090711323
  ...

Even-numbered indices (0, 2, 4 etc) are longitude, and odd-numbered indices (1, 3, 5 etc) are latitude.

This is the code I'm trying to use:

map.getView().fit(pointsDecimal, map.getSize());

But for some reason this puts me at maximum zoom level at the coordinates [0,0] - in the Gulf of Guinea, not in southeastern New South Wales where I'd like to be!

I know this would be much easier if I was using an OpenLayers source (e.g. source.getExtent()) in place of my pointsDecimal array, but this is not an option in this case for reasons I won't go into right now - I can only use the array.

Can anyone give me any hints please?

EDIT: I think I'm nearly there, thanks to Anupam. This is what I have now:

var extent = [pointsLongMin,pointsLatMin,pointsLongMax,pointsLatMax];
map.getView().fit(extent,map.getSize());

The values I'm passing to the array are as follows:

pointsLongMin: 148.771162
pointsLatMin: -34.5029736405108
pointsLongMax: 148.77896
pointsLatMax: -34.491728

But I'm still getting dumped out in the ocean at [0,0]. What am I doing wrong here?

• javascript
• openlayers-3

Share Improve this question Follow edited Jul 10, 2016 at 22:14 Gareth Jones asked Jul 10, 2016 at 11:41 Gareth JonesGareth Jones 53411 gold badge1010 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In order to use map.getView().fit(extent,size). extent denotes four points as [minx, miny, maxx,maxy].

It is actually a rectangle. try

var extent=[148.77638,-34.491728,148.77896,-34.492302];

map.getView().fit(extent,map.getSize());

most propable reason is that your map is projected on EPSG:3857while your extent EPSG:4326. So you need to transform your extent to your map projection.

var coordMin = ol.proj.fromLonLat([148.77638,-34.491728], 'EPSG:3857');
var coordMax = ol.proj.fromLonLat([148.77896,-34.492302], 'EPSG:3857');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
map.getView().fit(extent,map.getSize());

You may find a more elegand way to do the extent transformation. Unless you provide your full code we can only guess what is your map projection. I am just guessing is EPSG:3857 cause thats the default ol3 use.

本文标签： javascriptOpenLayers 3 Zoom map to coordinates in arrayStack Overflow