从零编写Openlayers前端系统（2、显示地图）

从决定写这个前端程序到着手，其实只有几周的时间，JS的使用也是边学边练，更不谈Openlayers了。补充说明下，使用的Openlayers是3.X的版本，HTML采用的是ES5。

参考了网上大神和Openlayers官网，本人着手写上第一段代码。具体如下：

wms_url = 'http://172.16.40.159:8086/geoserver/wangxiang/wms';

wms_layer ='wangxiang:aa_pol';

format = 'image/png';

bounds = [31120.72077001582, -31306.5768763267, 33942.44450440404,-26589.81571753572]; //范围

//本地SHP实例

wmsSource=new ol.source.ImageWMS({

ratio: 1,

url: wms_url, //自己的服务url

params: { //设置服务参数

'FORMAT': format,

'VERSION': '1.1.1',

STYLES: '',

LAYERS: wms_layer, //图层信息

}

})

wmsLayer=new ol.layer.Image({

source:wmsSource

});

//设置地图投影

projection = new ol.proj.Projection({

code: 'EPSG:3857',//投影编码

units: 'degrees',

axisOrientation: 'neu'

});

view=new ol.View({ //设置视图

projection: projection //设置投影

});

//设置地图

map = new ol.Map({

controls: ol.control.defaults({ //地图中的比例尺等控制要素

attribution: false

}).extend([

new ol.control.ScaleLine()

]),

target: 'map', //设置显示的容器

layers: [], //设置图层

view: view

});

function init(){

map.addLayer(wmsLayer);

map.getView().fit(bounds,map.getSize()); //地图显示

};

这段代码是我万里长征的第一步，可以说是网上直接挪过来的，经调试后，已能显示地图。很开心。。。。再补充说明几点吧。

1、wmsSource里的参数

先要学会用Geoserver。在设置好Geoserver后（这个网上有好多教程，不抄了），点击：Layer Preview

然后在要预览的GIS数据栏上点击

然后就能以WMS的PNG方式预览了，这时的预览地址为：

http://172.16.40.159:8086/geoserver/wx/wms?service=WMS&version=1.1.0&request=GetMap&layers=wx:aa_pol&styles=&bbox=31120.72077001582,-31306.5768763267,33942.44450440404,-26589.81571753572&width=459&height=768&srs=EPSG:3857&format=image%2Fpng

好长一段，分段看就不复杂了。

（1）服务器地址，很明显就是“ http://172.16.40.159:8086/geoserver/wx/wms”，“？”后是这个服务器的GET参数，这个结构很清晰。

（2） params类中的参数，以及bounds，也很明显，就是“？”后的各项参数，每项参数的具体含义，参见：

http://www.cnblogs.com/naaoveGIS/p/5508882.html

2、这段代码其实和Geoserver的preview的作用一样的，我当时就想，为什么不能直接用这个预览地址呢？由于代码是抄的，别人没提及，也不知道，其实对于WMS方式，还有种懒惰写法，就是直接将preview的地址粘入JS中即可：

wms_url="http://172.16.40.159:8086/geoser.......768&srs=EPSG:3857&format=image%2Fpng"

wmsSource=new ol.source.ImageWMS({

ratio: 1,

url: wms_url

})

这就可以了：）

3、“map.getView().fit(bounds,map.getSize())” 这句刷新地图的代码。这段代码搞了好多时间。不是因为代码不对，而是因为Openlayers3和Openlayers2的刷新方式不同，在读别人的代码时，当时还不是很理解，所以一直用Openlayers2的刷新代码，因此一直不能显示地图。血的教训。

4、为十么用WMS的方式显示地图呢？很简单，当时还很无知。大神们这么写，我就这么用。后来才觉得，可能因为其他大神的代码往往是从大型GIS数据库中汲取数据，数据若以矢量数据方式获取，服务器需提供矢量瓦片地图，但目前大多开发地图都不提供矢量瓦片地图数据，只提供栅格图片，所以我觉得大神们的示例也因此大多采用WMS获取数据。其实我的程序用WMS方式不是最好的办法，后来被我改了。那是后话......

最后编辑于：2018.01.10 00:39:08