??? MapEasy群里面很多新朋友都不停的問到同一個問題，既然MapEasy是一個純粹的JavaScript地圖顯示客戶端那么她是如何與客戶自己的后臺地圖程序進行整合，共同工作？這在MapEasy的設計之初就給了完美的解答，在MapEasy上實現與不同的地圖服務的對接是一件非常輕松而且靈活的事情。大家都可以看到在MapEasy的Sample里就給出了諸如Google、edushi、WOW、custom等多種后臺地圖服務的接口。
??? 但是由于各種歷史的原因Sample里只有edushi的地圖現在還可以正常工作，其他的可能已經看不到圖片。很多朋友都以為是MapEasy的代碼的原因，其實不然，可以解釋為是MapEasy很久沒有更新的原因，那些地圖服務已經不能取得地圖數據了。
??? 在這里特別感謝BeanSoft兄提出的建議，做一個在取本地圖片的的Sample，這樣就不會出現上述的地圖服務不能工作后Sample不能正常工作。最值得我敬佩的是他馬上動手做了一個
Demo，再次感謝分享！
??? 下面告訴大家實現與自己的地圖服務配合是一件多么Easy的事情（我們的目的就是讓Map更加Easy ^_^）。請大家注意MapType這個類，她就是MapEasy提供給大家擴展自定義地圖服務類型的組件（我覺得在這里用組件這個詞更加貼切，因為她雖然夠簡單，但同樣夠強大和完整）。下面給出MapType類：
?1?function?MapType()?{
?2?????
?3?????this.enablePic;
?4?
?5?????this.disablePic;
?6?????
?7?????//~?Method
?8?????{
?9?????????this.enablePic?=?imgBaseDir?+?"maptype_0b.gif";
10?????????this.disablePic?=?imgBaseDir?+?"maptype_0a.gif";
11?????}
12?
13?????this.getSrc?=?function(level,?row,?column)?{
14?????????return?imgBaseDir?+?'zoom_'?+?level?+?'/'?+?level?+?'_'?+?column?+?'_'?+?row?+?'.jpg';
15?????}
16?
17?????this.getEnablePic?=?function()?{
18?????????return?this.enablePic;
19?????}
20?
21?????this.getDisablePic?=?function()?{
22?????????return?this.disablePic;
23?????}
24?}
??? enablePic、disablePic即顯示在左上角（當然如果你愿意可以把她放在任何位置）的變換地圖類型的按鈕的圖片，分別為選中和非選中時的圖片。而getSrc方法就是實現與不同地圖服務對接的最重要直接的方法，默認提供的方法是取本地圖片。getSrc方法提供了與不同數據源的接口，在getSrc中發揮你的聰明才智以最簡單的方式取得對應瓦片的圖片就可以了。
??? MapEasy推薦的最佳實踐是編寫一個屬于自己的MapType，如WMSMapType，繼承MapEasy提供的MapType重寫getSrc方法實現自己的數據源接口。
??? WMS(Web Map Service)是OPENGIS的規范，應用非常廣泛。下面給出一個以WMS服務為地圖數據源的簡單實現作為參考。
?1?/**
?2??*?自定義一個WMS數據源
?3??*?@author?crespo
?4??*/
?5?function?WMSMapType()?{
?6?
?7?????MapType.apply(this);
?8?
?9?????this.getSrc?=?function(level,?row,?column)?{
10?????????var?xMin?=?(MapModel.bound.getMinX()?+?((MapModel.bound.getWidth())?/?(new?Zoom(level).getBorderTilesNum()))*(column))/1e16;
11?????????var?yMin?=?(MapModel.bound.getMaxY()?-?((MapModel.bound.getHeight())?/?(new?Zoom(level).getBorderTilesNum()))*(row+1))/1e16;
12?????????var?xMax?=?(MapModel.bound.getMinX()?+?((MapModel.bound.getWidth())?/?(new?Zoom(level).getBorderTilesNum()))*(column+1))/1e16;
13?????????var?yMax?=?(MapModel.bound.getMaxY()?-?((MapModel.bound.getHeight())?/?(new?Zoom(level).getBorderTilesNum()))*(row))/1e16;
14?????????//alert("row?and?column"+row+","+column);
15?????????//alert(xMin+","+yMin+","+xMax+","+yMax);
16?????????return?"http://localhost:8080/geoserver/wms?bbox="+xMin+","+yMin+","+xMax+","+yMax+"&styles=population&Format=image/png&request=GetMap&layers=states&width=256&height=256&srs=EPSG:4326";
17?????}
18?}
??? 使用本機的geoserver服務器提供的WMS服務測試通過。
??? 趕快去擴展你的地圖類型吧！
posted on 2007-02-07 10:59
cresposhi 閱讀(3426)
評論(9) 編輯 收藏