Змініть центр перегляду OpenLayers 3

Я використовую OpenLayers 3 для взаємодії з деякими картами. Я спочатку оголошую свою карту:

map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
                ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

У мене подія, яка запускає дію, щоб змінити центр перегляду моєї карти. Таким чином, (мої координати у EPSG:4326форматі):

function CenterMap(lat, long) {
     console.log("Lat: " + lat + " Long: " + long);
     map.setView(new ol.View({
            center: ol.proj.transform([lat, long], 'EPSG:3857', 'EPSG:4326'),
            zoom: 5
     }));
}

Коли функція запускається, я отримую це на консолі провідника:

Lat: 9.0412851667 Long: -79.5658145000

Але карти іде [0,0], хтось знає, чому це відбувається?

— Гільйон
джерело

Відповіді:

У ol.proj.transform вам потрібно вказати fromProjection перед toProjection, тоді він повинен працювати.

Як пояснює у своїй відповіді Майкл Дентрі, ще одна проблема полягає в тому, що вам слід спочатку вказати довготу (захід-схід, таким чином x), а потім широту (таким чином, південь-північ y).

І кращий спосіб встановити центр - це отримати поточний вигляд і встановити центр там, а не завжди створювати новий.

function CenterMap(long, lat) {
    console.log("Long: " + long + " Lat: " + lat);
    map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);
}

— Саймон Зікс
джерело

Добре, я отримав подяку. Ще одна річ, якщо я її зміню таким чином, я отримую нову помилку

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length

. Я думаю, це тому, що мої координати занадто довгі. Якщо я його зміню, [131.044922, -25.363882]він працює нормально. Тож мої координати занадто довгі ??

— Гільйон

це не повинно бути проблемою. з якими координатами сталася помилка? ті, про кого ви згадали вище?

— Simon Zyx

так, той, хто там

— Гільєлон,

Я спробував ці координати з картою MapQuest, і це спрацювало. Довгота -79 все ще знаходиться в межах EPSG: 4326 (в межах +/- 90 градусів) і EPSG: 3857 (в межах +/- 85 градусів).

— Саймон Зікс

її машинна помилка, що виникає всередині рендерінга, і рейнджер

— Simon Zyx

У мене новий обліковий запис стека і не маю достатньо високої репутації, щоб прокоментувати "Uncaught TypeError: Не вдалося виконати" putImageData "на" CanvasRenderingContext2D ": параметр float 3 не є кінцевим." помилка. Це відбувається тому, що ви маєте lat і довгі входи назад.

map.getView().setCenter(ol.proj.transform([lat, long], 'EPSG:4326', 'EPSG:3857'));

має бути:

map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));

у випадку, якщо хтось інший має цю проблему.

— Михайло Джентрі
джерело

так, ти маєш рацію - я відповідно оновлю свою відповідь.

— Simon Zyx

Для використання лише в браузері:

<script src='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js'></script>


  ol.proj.transform() 

  ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857');

Для використання js-додатків

   // for projection
  import {transform} from 'ol/proj.js';

  // use this one : transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857')





   var map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
      //center: [-118.246521, 34.049039],
        center: transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857'),
      zoom: 16
    })
  });

— hoogw
джерело