搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

 1 <div id="map">
 2     <script>
 3         var format = ‘image/png‘;
 4         var bounds = [73.441277, 18.159829,
 5             135.08693, 53.561771];//范围
 6 
 7         //中国各省底图（面）
 8         var ImageMap = new ol.layer.Image({
 9             source: new ol.source.ImageWMS({
10                 ratio: 1,
11                 //自己的服务url
12                 url: ‘http://localhost:8080/geoserver/CHINA/wms‘,
13                 //设置服务参数
14                 params: {
15                     ‘FORMAT‘: format,
16                     ‘VERSION‘: ‘1.1.0‘,
17                     STYLES: ‘‘,
18                     //图层信息
19                     LAYERS: ‘CHINA:china_2014gdp‘,
20                 }
21             })
22         });
23 
24         //设置地图投影
25         var projection = new ol.proj.Projection({
26             code: ‘EPSG:4326‘,//投影编码
27             units: ‘degrees‘,
28             axisOrientation: ‘neu‘
29         });
30 
31         //设置地图
32         var map = new ol.Map({
33             //地图中的比例尺等控制要素
34             controls: ol.control.defaults({
35                 attribution: false
36             }).extend([
37                 new ol.control.ScaleLine()
38             ]),
39             //设置显示的容器
40             target: ‘map‘,
41             //设置图层
42             layers: [
43                 //添加图层
44                 ImageMap
45             ],
46             //设置视图
47             view: new ol.View({
48                 //设置投影
49                 projection: projection
50             })
51         });
52 
53         //地图显示
54         map.getView().fit(bounds, map.getSize());
55     </script>
56 </div>

首先需要定义一个图层，而这个图层调用的是由GeoServer发布的WMS服务，其数据源是服务的url，可以通过进入服务器，找到相应服务，点击相应的WMS服务获取其url。

接下来需要设置显示的格式，这里设置了地图投影为WGS84，即代号4326.

之后创建了地图容器map，将图层添加进去，并设置了投影。

接下来分别设置了地图初始的显示范围，最后调用getView().fit函数，显示地图。

效果图：

具体代码和数据可以参考github：https://github.com/kkyyhh96/WebGIS

2017.2.24更新声明：用最新中文版软件替换原先英文版软件，插入一些新的图片，增加案例讲解，修改代码展示。

搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

标签：rom   axis   pts   end   layer   github   gif   名称   sql数据库