web-dev-qa-db-ja.com

Openlayers 3センターマップ

私は OpenLayers を歌って地図を表示しています。 latLon座標を使用して地図を中央に配置します。私は クイックスタートコード を使用しています。このコードを使用して、マップの中心を変更することはできません。これはSpherical Mercator projectionと関係があると思います。唯一のものは、緯度経度の座標しか持っていません。

Openlayers v3からマップを中央に配置する方法を知っている人はいますか？

javascriptopenlayers-3
16
TheatreOfSouls

以下を使用して、経度/緯度座標を正しい投影（または座標系）に変換する必要があります。

var olCoordinates = ol.proj.transform([lon, lat],"WGS84", "EPSG:900913")

これで、olCorrdinatesで中心を設定できます。

プロジェクションごとにコード名が異なります。 WGS84は「通常の」経度/緯度であり、EPSG：900913は、Googleマップ、openstreetmap、bingなどのWebマップでよく使用される投影法です。

OpenLayers 3にはWGS84/EPSG：4326（lon/lat）からの変換のサポートが組み込まれていると思いますが、他の座標系との間で変換する必要がある場合は、proj4jsライブラリを含めることができます。 Openlayersはこのlibと統合され、同じ方法で変換を行うことができます。

ドキュメントの変換 http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html

Proj4 lib https://github.com/proj4js/proj4js

編集：参照している例では、中心位置は実際にはlon/latで設定されています。

view: new ol.View({
    center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
})

EPSG：4326は実際にはWGS84と同じであり、EPSG：3857はEPSG：900913と同じです。これは非常に紛らわしいです。私は自分でそこにいました。

経度37.41と8.82を経度/緯度座標に変更するだけです。初期化後にセンターの場所を変更する場合は、setCenter（）を使用する必要があります。

map.getView().setCenter(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'))
27
Ole Borgersen

OpenLayersに導入された ol.proj.fromLonLat および ol.proj.toLonLat 関数 2015年3月 。

マップを中央に配置するには、初期化中にマップを使用できます

view: new ol.View({
        center: ol.proj.fromLonLat([lon, lat])
      })

またはマップが作成された後

map.getView().setCenter(ol.proj.fromLonLat([lon, lat]))

これらは 単なるラッパー の ol.proj.transform ですが、使用する方が簡単です。

デフォルトのWebメルカトルはEPSG:4326とEPSG:3857です。

Ole Borgersen states のように、WGS84はEPSG:4326と同じです。これは作業に使用されるLong-Lat座標のタイプです。

ol.proj.fromLonLat([lon, lat]);
// is equivalent of
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')

ol.proj.toLonLat([lon, lat]);
// is equivalent of
ol.proj.transform([lon, lat], 'EPSG:3857', 'EPSG:4326')
12
I.G. Pascual

使い方次第ですか？

ブラウザのみで使用する場合：

<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-appの使用

   // 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
    })
  });
0
hoogw