从决定写这个前端程序到着手，其实只有几周的时间，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()); //地图显示
};
<body onload="init()"> </body>
这段代码是我万里长征的第一步，可以说是网上直接挪过来的，经调试后，已能显示地图。很开心。。。。再补充说明几点吧。
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方式不是最好的办法，后来被我改了。那是后话......
网友评论