0

I've an array of coordinates that represent a polygon, inspired from this official example I've modified "Fly to Bern" for my aims.

<button id="testID">Test</button>
<script type="text/javascript">

var polygon = [
    [
        13.147888181763385,
        38.696496657431524
    ],
    [
        13.147888181763385,
        38.711500431313084
    ],
    [
        13.16196441467133,
        38.72248334089265
    ],
    [
        13.185997007441344,
        38.7267688965631
    ],
    [
        13.204193113396066,
        38.71069673752169
    ],
    [
        13.197326658318405,
        38.698104355211626
    ],
    [
        13.183593748163982,
        38.68470576954256
    ],
    [
        13.153381345825155,
        38.68470576954256
    ],
    [
        13.151321409301318,
        38.688993589981564
    ],
    [
        13.147888181763385,
        38.696496657431524
    ]
];
var boundaryBox = new ol.extent.boundingExtent(polygon);
console.log(boundaryBox);

function onClick(id, callback) {
  document.getElementById(id).addEventListener('click', callback);
};

function flyTo(location, done) {
  var duration = 2000;
  var zoom = 5;
  var parts = 2;
  var called = false;
  function callback(complete) {
    --parts;
    if (called) {
      return;
    }
    if (parts === 0 || !complete) {
      called = true;
      done(complete);
    }
  }
  view.animate({
    center: boundaryBox,
    duration: duration
  }, callback);
  view.animate({
    zoom: zoom - 1,
    duration: duration / 2
  }, {
    zoom: zoom,
    duration: duration / 2
  }, callback);
};

onClick('testID', function() {
  flyTo(boundaryBox, function() {});
});

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });
</script>

When I click on the button happen that the zoom is on coordinates "0.0, 0.0" instead of the boundary box's coordinates and there aren't errors in console. Probably I've misunderstand something, but what?

2

The code above cannot work at all since view is not defined as separate object as it should be:

var view = new ol.View({
  center: ol.proj.fromLonLat([37.41, 8.82]),
  zoom: 4
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: view
}); 

Also center option in view.animate setting should be flyTo function parameter location:

view.animate({
  center: location,
  duration: duration
}, callback);

Now code indeed behaves as described. Reason for this is that extent is in EPSG:4326, while the view is standard EPSG:3857. What is needed is simple extent transform:

var boundaryBox = ol.proj.transformExtent(new ol.extent.boundingExtent(polygon), 'EPSG:4326', 'EPSG:3857');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.