????????從決定寫這個前端程序到著手镜盯，其實只有幾周的時間，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數據庫中汲取數據蝌箍，數據若以矢量數據方式獲取青灼，服務器需提供矢量瓦片地圖，但目前大多開發(fā)地圖都不提供矢量瓦片地圖數據妓盲，只提供柵格圖片杂拨，所以我覺得大神們的示例也因此大多采用WMS獲取數據。其實我的程序用WMS方式不是最好的辦法悯衬，后來被我改了弹沽。那是后話......
