本文為一個openlayers項目的總結(jié),其中可能有一些遺漏或描述得不準(zhǔn)確的地方,望批評指正。
本文目標(biāo):
構(gòu)建一個完全自定義的輕量級地圖信息系統(tǒng),以openlayers為基礎(chǔ),需要自定義地圖的元素樣式,包括圖層切換的樣式、地圖導(dǎo)航的樣式、地圖標(biāo)記的實現(xiàn)、自定義彈出框等等。該專用地圖信息系統(tǒng)地圖來源于google地圖,包括普通地圖圖層、衛(wèi)星影像圖層、路面信息圖層,另外自行畫了一些局部區(qū)域的三維地圖,本項目為企業(yè)內(nèi)部項目,與互聯(lián)網(wǎng)隔離,故不可使用google的地圖api,則需要抓取google的相關(guān)地圖資源(暫時使用google地圖資源),利用openlayers構(gòu)建輕量級專用地圖信息系統(tǒng),這里的輕量級是指使用tilecache接口實現(xiàn)地圖圖層(相關(guān)資料見前篇博文)
實現(xiàn)的效果圖如下:

圖1 后臺管理頁面

圖2 前臺展示頁面(全屏顯示)
地圖相關(guān)說明:
地圖頁面事件說明
地圖基本功能
(1) 左上角的地圖瀏覽控件:包括地圖的上下左右移動,地圖的縮放
(2) 右上角三個選項,包括地圖、航拍、三維,點擊每個選項,出現(xiàn)相應(yīng)的地圖視圖,其中地圖、航拍使用google地圖數(shù)據(jù)(下載google地圖)
(3) 能夠標(biāo)注地圖的行政區(qū)域
(4) 鼠標(biāo)在地圖上雙擊鼠標(biāo)左鍵,放大地圖一個級別,鼠標(biāo)滾輪向前向后轉(zhuǎn)動分別是放大縮小地圖一個級別,鼠標(biāo)右鍵點擊,無響應(yīng)事件
展示平臺功能
(1)主界面視圖
a) 有若干個個圖層,地圖下面有各個圖層的選項卡,點擊每個選項,顯示相應(yīng)的內(nèi)容
(2)局部區(qū)域視圖
a) 選中標(biāo)記(點),跳轉(zhuǎn)到局部區(qū)域視圖
b) 點擊標(biāo)記(點),根據(jù)項目的相應(yīng)設(shè)置,顯示地圖下方的選項卡,點擊選項卡,顯示響應(yīng)的內(nèi)容
c) 鼠標(biāo)放在標(biāo)記(點)上時。出現(xiàn)提示框,鼠標(biāo)移到提示框上面,可以點擊相應(yīng)的鏈接,點擊鏈接之后,彈出一個對話框,并且鎖住地圖界面
地圖數(shù)據(jù)說明
地圖基本數(shù)據(jù)
(1)地圖圖片,要有連續(xù)的縮放級別的圖,每個級別之間相差2倍
(2)航拍圖片,要有連續(xù)的縮放級別的圖,每個級別之間相差2倍
(3)三維圖片,需要和地圖圖片、航拍圖片保持一致的大小,和縮放級別和地理位置
(4)地圖效果圖上面的使用的圖標(biāo)和彈出窗口圖,需要原件,編寫css需要使用