[英]How to display, center and zoom a map using OpenLayers?
I started learning the OpenLayers and GeoServer. 我开始学习OpenLayers和GeoServer。 The layer is added at GeoServer using the OSM shape file which is indicated as EPSG:4326
with bounds [68.5094575, 6.6791812, 97.0315678, 35.3123975]
. 使用OSM形状文件将其添加到GeoServer上,该文件以边界[68.5094575, 6.6791812, 97.0315678, 35.3123975]
表示为EPSG:4326
。 Using OpenLayers this layer is obtained as WMS and getting displayed. 使用OpenLayers,该层将作为WMS获得并显示出来。
For displaying the map the following line of code is used: 为了显示地图,使用了以下代码行:
map.getView().fit(bounds, map.getSize());
Now the map is getting displayed. 现在正在显示地图。 But when I use the below code, the map is not getting displayed: 但是,当我使用以下代码时,该地图未显示:
map.getView().fit(bounds, map.getSize());
map.getView().setCenter(ol.proj.transform[77.216574, 28.627671], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(5);
Thanks in advance. 提前致谢。
You have a syntax error: 您有语法错误:
map.getView().setCenter(ol.proj.transform[77.216574, 28.627671], 'EPSG:4326', 'EPSG:3857'));
should be: 应该:
map.getView().setCenter(ol.proj.transform([77.216574, 28.627671], 'EPSG:4326', 'EPSG:3857'));
If I change that and remove the map.getView().fit(bounds, map.getSize());
如果我更改它并删除map.getView().fit(bounds, map.getSize());
The map works: 该地图有效:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.