文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用OpenLayers显示、居中和缩放地图？

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

Stack Overflow用户

提问于 2018-11-28 23:13:43

回答 1查看 2K关注 0票数 2

我开始学习OpenLayers和GeoServer。该层是使用OSM形状文件在GeoServer处添加的，该文件表示为具有边界[68.5094575, 6.6791812, 97.0315678, 35.3123975]的EPSG:4326。使用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);

提前谢谢。

javascript

openlayers

geoserver

回答 1

Stack Overflow用户

发布于 2018-11-29 01:11:19

你有一个语法错误：

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53522600

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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