如何使用OpenLayers显示,居中和缩放地图?

时间:2018-11-28 15:13:43

标签: javascript openlayers geoserver

我开始学习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);

谢谢。

1 个答案:

答案 0 :(得分:0)

您遇到语法错误:

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>