openlayers 地图中心问题答案

【问题标题】：openlayers map center issueopenlayers 地图中心问题
【发布时间】：2019-09-25 23:18:32
【问题描述】：

我对使用 openlayers 非常陌生。下面的教程教如何显示地图并在本地构建，但问题是我无法更改地图的中心。即使我改变了位置，它也会显示地图的“零”点。

https://openlayers.org/en/latest/doc/tutorials/bundle.html

下面是 .js 示例和 .html，问题是中心：我无法更改地图中心

 import 'ol/ol.css';
 import {Map, View} from 'ol';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';

 const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
       source: new OSM()
     })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

【问题讨论】：

嗨，Adm，欢迎来到 SO :) 能否请您展示一下代码示例，以便我们可以为您指明正确的方向，或者至少尝试一下 :)
刚刚编辑了 Svinjica，感谢您的帮助
尝试将此添加到中心属性center:fromLonLat([37.6178, 55.7517]); 在此之前您必须导入import {fromLonLat} from 'ol/proj.js'; 另外，值得一读openlayers.org/en/latest/doc/faq.html

标签： javascript openlayers

【解决方案1】：

每个 GIS 地图都有一个坐标系。 GIS Web 应用程序与桌面 GIS 地图非常相似，因此它们也具有坐标系。在 OpenLayers 中称为投影。

在 OpenLayers 中，每个 Web 应用都由 Map() 类组成，需要 view() 来显示地图。默认情况下，每个view() 都使用Web Mercator projection 或EPSG:3857 作为其投影。所以在你的代码中，你应该把中心放在EPSG:3857 坐标系中。如果您想在 WGS 84 或经纬度数字中使用中心坐标，您应该将视图投影更改为 EPSG:4326，如下所示：

view: new ol.View({
    center: [0,0],
    projection: 'EPSG:4326',
    zoom: 0
})

投影对于进一步的使用非常重要。如果您在特定投影中有一些数据，Openlayers 无法将它们显示在具有另一个投影的地图上。例如，如果您在 WGS 84 中有一些数据，则不能在默认视图上使用它们（因为它是 Web Mercator）。
因此，在选择视图投影之前，请阅读限制。例如底图并非在每个投影中都可用，就像普通图层一样。

此外，您还可以使用另一个选项。动态投影整个图层（在客户端浏览器中）需要一个庞大的过程，但我们总是可以投影一个点或单个要素，并在我们的图层或基础地图中使用它们。在您的情况下，您只能投影您的中心点并使用 Web Mercator 中的地图。对于此选项，您需要像这样使用fromLonLat()：

center: ol.proj.fromLonLat([0,0])

希望清楚。

【讨论】：

【解决方案2】：

在你的中心试试这个：

center: ol.proj.fromLonLat([longitude,latitude])

【讨论】：