項目驗收完，趁着事情不是很多，對這個項目進行梳理。我主要負責地圖模塊，網站其他模塊主要有兩個，一個是報表，主要是100多張報表，技術沒有難度，主要是工作量的問題。另一個是數據的校驗，就是校驗數據的沖突。
現在主要介紹地圖，地圖主要使用openlayers+geoserver，通過Geoserver加載路線以及點狀物的shape數據，將各個圖層形成一個圖層組，頁面前端用openlayers加載該圖層組，然后對此圖層組進行查詢。這樣做的好處就是，如果有新的圖層增加，如果沒有特殊的需求，是不需要修改代碼的，只需要在Geoserver中修改圖層組，增加新的圖層就可以了。如果你添加的是圖層的數組，你就需要修改代碼，而且查詢的時候，不需要單獨增加遍歷新的圖層。公司的數據工程部，就是負責Geoserver的配圖，他們交付其他項目的時候，都是這種做法。因為這個項目地圖是我一個人做，所以配圖就不是那么好看，中規中矩。地圖中區域的鐵路、湖泊等裝飾性圖層都沒有，沒有那么好看。
地圖主要加載的是某區域的國道（6326條路）、省道（8380條）、縣道（9076條路）、鄉道（7萬）、村道（9萬）、專道（134條）以及路線上的橋隧渡涵。為了此項目，去其他用到openlayers開發部門去借鑒經驗，因為他們的項目需求定位就是只加載高速，數據量很小，直接從數據庫加載，很顯然對於此項目行不通，數據量太大。
開發的環境是Geoserver 2.7.1.1，第一次用的Geoserver 2.6.3，后來發現它對頁面中文會顯示亂碼（盡管已經將圖層的數據存儲(Store)的DBF字符集設置成GBK，可能還需要其他設置就不知道了），所以改用了新的版本 。openlayers用的是2.13.1，並不是現在最新的openlayers 3.x，盡管新的備受推崇，但是由於項目太緊，沒有時間去學習和替換。
在做項目的時候，參考了很多文章，比較有用的是longshenguoji的文章，也推薦加群OpenLayers官方旗艦群[2] （群號：274788071），里面很多高手，不過大部分都是推崇openlayers 3.x，進去的時候，還是不要做伸手黨，很多官方的demo都能解決問題。
以上是對項目介紹，年前打算把地圖部分梳理完，預計寫四章內容，第一章項目介紹以及地圖加載，第二章Geoserver的配置，第三章地圖的圖層查詢以及數據的解析，第四章地圖小工具。文章中都會寫一些項目中自己的體會以及經驗教訓，走過的彎路也算是后車之鑒，畢竟openlayers 2.x有點老了。一個人的精力畢竟是有限的，歡迎大家多交流。
第一章簡單介紹地圖的加載，下面是主要前端頁面，Window.css主要是將body設置成頁面全寬。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title ></title> <script src="Script/jquery-1.10.2.min.js"></ script> <script src="Script/OpenLayers/OpenLayers.js"></ script> <script src="Script/Map.js"></ script> <link rel="stylesheet" type="text/css" href="CSS/Window.css" /> </head> <body> <div id='map' class="map"> </div > </body> </html>
下面的代碼是這一系列主要的內容Map.js,頁面的加載，以及后面介紹的查詢以及小工具 都會寫在這個js里面。
var map; //地圖初始化加載 function init() { var bounds = new OpenLayers.Bounds(109.62468672071573, 20.061844970906243, 117.35435946391824, 25.528473333333334); //地圖的邊界 var options = { projection: "EPSG:4326", minResolution: "auto", maxResolution: "auto", numZoomLevels: 20, center: new OpenLayers.LonLat(113, 23) };//地圖控制 map = new OpenLayers.Map( 'map', options); //group就是相應的圖層組，在Geoserver中該圖層組叫 guangdong var group = new OpenLayers.Layer.WMS("group" , //geoserver所在服務器地址,ip是內網的，geoserver端口是8090； "http://192.168.0.87:8090/geoserver/guangdong/wms" , { layers: "guangdong",//圖層組名稱 transparent: "true" }, { isBaseLayer: true } ); map.addLayer(group); map.zoomToExtent(bounds); //將地圖擴大的數據 } $(function () { init(); })
效果圖如下：
