????????從決定寫這個前端程序到著手，其實只有幾周的時間，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: {???????????????????????? //設置服務參數(shù)
??????????????????? '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里的參數(shù)
? ? ? ? 先要學會用Geoserver。在設置好Geoserver后（這個網上有好多教程，不抄了），點擊：Layer Preview
? ? ? ? 然后在要預覽的GIS數(shù)據(jù)欄上點擊
? ? ? ? 然后就能以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參數(shù)，這個結構很清晰。
? ? ? ? （2）?params類中的參數(shù)，以及bounds，也很明顯，就是“？”后的各項參數(shù)，每項參數(shù)的具體含義，參見：
????????????????????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數(shù)據(jù)庫中汲取數(shù)據(jù)，數(shù)據(jù)若以矢量數(shù)據(jù)方式獲取，服務器需提供矢量瓦片地圖，但目前大多開發(fā)地圖都不提供矢量瓦片地圖數(shù)據(jù)，只提供柵格圖片，所以我覺得大神們的示例也因此大多采用WMS獲取數(shù)據(jù)。其實我的程序用WMS方式不是最好的辦法，后來被我改了。那是后話......
