如何使用 OpenLayers 显示、居中和缩放地图？

Posted 2023-03-25

【中文标题】如何使用 OpenLayers 显示、居中和缩放地图？

【英文标题】：How to display, center and zoom a map using OpenLayers?

【发布时间】：2018-11-28 15:13:43

【问题描述】：

我开始学习 OpenLayers 和 GeoServer。该层使用 OSM 形状文件添加到 GeoServer，该文件表示为EPSG:4326，边界为[68.5094575, 6.6791812, 97.0315678, 35.3123975]。使用 OpenLayers，该层作为 WMS 获得并显示。

为了显示地图，使用以下代码行：

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

现在地图正在显示。但是当我使用下面的代码时，地图没有显示出来：

map.getView().fit(bounds, map.getSize());
map.getView().setCenter(ol.proj.transform[77.216574, 28.627671], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(5);

提前致谢。

【问题讨论】：

什么是bounds？是数组[68.5094575, 6.6791812, 97.0315678, 35.3123975]吗？

【参考方案1】：

你有一个语法错误：

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

应该是：

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

如果我改变它并删除map.getView().fit(bounds, map.getSize());

地图有效：

html,
body 
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;


.map 
  height: 95%;
  width: 100%;

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map" class="map"></div>
<script>
  var map = new ol.Map(
    layers: [
      new ol.layer.Tile( // TileLayer(
        source: new ol.source.OSM()
      )
    ],
    target: 'map',
    view: new ol.View()
  );
  map.getView().setCenter(ol.proj.transform([77.216574, 28.627671], 'EPSG:4326', 'EPSG:3857'));
  map.getView().setZoom(5);
</script>