本文為一個(gè)openlayers項(xiàng)目的總結(jié)，其中可能有一些遺漏或描述得不準(zhǔn)確的地方，望批評(píng)指正。
本文目標(biāo)：
構(gòu)建一個(gè)完全自定義的輕量級(jí)地圖信息系統(tǒng)，以openlayers為基礎(chǔ)，需要自定義地圖的元素樣式，包括圖層切換的樣式、地圖導(dǎo)航的樣式、地圖標(biāo)記的實(shí)現(xiàn)、自定義彈出框等等。該專用地圖信息系統(tǒng)地圖來(lái)源于google地圖，包括普通地圖圖層、衛(wèi)星影像圖層、路面信息圖層，另外自行畫了一些局部區(qū)域的三維地圖，本項(xiàng)目為企業(yè)內(nèi)部項(xiàng)目，與互聯(lián)網(wǎng)隔離，故不可使用google的地圖api，則需要抓取google的相關(guān)地圖資源（暫時(shí)使用google地圖資源），利用openlayers構(gòu)建輕量級(jí)專用地圖信息系統(tǒng)，這里的輕量級(jí)是指使用tilecache接口實(shí)現(xiàn)地圖圖層（相關(guān)資料見前篇博文）
實(shí)現(xiàn)的效果圖如下：
圖1 后臺(tái)管理頁(yè)面
圖2 前臺(tái)展示頁(yè)面（全屏顯示）
地圖頁(yè)面事件說(shuō)明
地圖基本功能
(1) 左上角的地圖瀏覽控件：包括地圖的上下左右移動(dòng)，地圖的縮放
(2) 右上角三個(gè)選項(xiàng)，包括地圖、航拍、三維，點(diǎn)擊每個(gè)選項(xiàng)，出現(xiàn)相應(yīng)的地圖視圖，其中地圖、航拍使用google地圖數(shù)據(jù)（下載google地圖）
(3) 能夠標(biāo)注地圖的行政區(qū)域
(4) 鼠標(biāo)在地圖上雙擊鼠標(biāo)左鍵，放大地圖一個(gè)級(jí)別，鼠標(biāo)滾輪向前向后轉(zhuǎn)動(dòng)分別是放大縮小地圖一個(gè)級(jí)別，鼠標(biāo)右鍵點(diǎn)擊，無(wú)響應(yīng)事件
展示平臺(tái)功能
(1)主界面視圖
a) 有若干個(gè)個(gè)圖層，地圖下面有各個(gè)圖層的選項(xiàng)卡，點(diǎn)擊每個(gè)選項(xiàng)，顯示相應(yīng)的內(nèi)容
(2)局部區(qū)域視圖
a) 選中標(biāo)記（點(diǎn)），跳轉(zhuǎn)到局部區(qū)域視圖
b) 點(diǎn)擊標(biāo)記（點(diǎn)），根據(jù)項(xiàng)目的相應(yīng)設(shè)置，顯示地圖下方的選項(xiàng)卡，點(diǎn)擊選項(xiàng)卡，顯示響應(yīng)的內(nèi)容
c) 鼠標(biāo)放在標(biāo)記（點(diǎn)）上時(shí)。出現(xiàn)提示框，鼠標(biāo)移到提示框上面，可以點(diǎn)擊相應(yīng)的鏈接，點(diǎn)擊鏈接之后，彈出一個(gè)對(duì)話框，并且鎖住地圖界面
地圖數(shù)據(jù)說(shuō)明
地圖基本數(shù)據(jù)
(1)地圖圖片，要有連續(xù)的縮放級(jí)別的圖，每個(gè)級(jí)別之間相差2倍
(2)航拍圖片，要有連續(xù)的縮放級(jí)別的圖，每個(gè)級(jí)別之間相差2倍
(3)三維圖片，需要和地圖圖片、航拍圖片保持一致的大小，和縮放級(jí)別和地理位置
(4)地圖效果圖上面的使用的圖標(biāo)和彈出窗口圖，需要原件，編寫css需要使用