基于mysql的mysqlweb地圖的設(shè)計

基于mysql的mysqlweb地圖的設(shè)計

1le-pbdi谷歌androidapi是谷歌開發(fā)的api，它可以讓世界各地對谷歌android熟悉的程序設(shè)計師開發(fā)基于谷歌android地圖的服務(wù)，并創(chuàng)建自己的地圖網(wǎng)站。GoogleMapsJavaScriptAPI允許使用者把Google地圖嵌入到自己的網(wǎng)頁內(nèi)。當(dāng)使用這個API時,首先申請一個APIkey,然后利用JavaScript類創(chuàng)建所需實例,實現(xiàn)所需電子地圖的引入,完成地圖中點、線、標(biāo)記、交通線等對象的設(shè)置,從而能以更加直觀的效果來顯示運輸?shù)某霭l(fā)地、目的地、路徑及運輸狀態(tài)等。鑒于GoogleMapsAPI的這些特點,將其應(yīng)用到運輸管理信息系統(tǒng)中來實現(xiàn)現(xiàn)代化物流運輸管理,如:根據(jù)運輸單在電子地圖中顯示該運單的起始地和目的地,顯示兩地之間的運輸路徑,對運輸車輛的實時監(jiān)控以及對交通狀態(tài)的實時查詢等。2玻璃紙疊加合成我們看到的電子地圖,都是多個圖層疊加以后的效果。何為圖層?舉個例子來說,在一張張透明的玻璃紙上作畫,透過上面的玻璃紙可以看見下面紙上的內(nèi)容,但是無論在上一層上如何涂畫都不會影響到下面的玻璃紙,上面一層會遮擋住下面的圖像。最后將玻璃紙疊加起來,通過移動各層玻璃紙的相對位置或者添加更多的玻璃紙即可改變最后的合成效果。我們能在電子地圖中看到起始地、目的地、交通線、運輸路徑等,其實就是將這些對象分別作為一個圖層,然后將它們進行疊加。本項目中設(shè)計的疊加層有點,標(biāo)記,折線,交通疊加層,街道視圖疊加層等。2.1創(chuàng)建一個實例創(chuàng)建地圖使用GoogleMapsAPI中的GLatLng類。GLatLng是以經(jīng)度和緯度表示的地理坐標(biāo)點。利用構(gòu)造函數(shù)GLatLng()創(chuàng)建一個實例,如在地圖中定義北京的位置,用point表示北京的地理坐標(biāo)點。即可表示為:point=newGLatLng(39.909736,116.279297)。利用方法Lat()和Lng()來獲得坐標(biāo)點的經(jīng)度和緯度。2.2標(biāo)記對象的地理位置;定義了北京的地理坐標(biāo)點,當(dāng)需要在地圖中將北京標(biāo)示出來時,使用GoogleMapsAPI中的Gmrker類。GMarker標(biāo)記地圖上的位置,它實現(xiàn)GOverlay接口,因此使用GMap2.addOverlay()方法添加到地圖中。標(biāo)記對象包含latlng(標(biāo)記在地圖中錨定的地理位置)和icon。由此可以表示為:varmarker=newGMarker(point);map.addOverlay(marker);若沒有設(shè)置標(biāo)記對象的ICON參數(shù),則標(biāo)記符號則以默認樣式顯示,在項目中需要分別用不同的符號來表示起始地、目的地以及運輸過程中的地理位置,所以需要設(shè)置符號樣式。如用黃色標(biāo)識來作為北京的標(biāo)記時,用如下方式表示:varyellowIcon=newGIcon(G_DEFAULT_ICON);markerOptions={icon:yellowIcon};varmarker=newGMarker(point,markerOptions);map.addOverlay(marker);將標(biāo)記添加到地圖中后,即可調(diào)用它的方法,如當(dāng)將鼠標(biāo)放置在北京的標(biāo)記上時,顯示北京的坐標(biāo)值;如當(dāng)點擊標(biāo)記時,顯示當(dāng)前標(biāo)記對象的地理環(huán)境等。2.3北京交通信息的添加Google地圖API使用GTrafficOverlay對象向地圖中添加交通信息?？梢允褂肎Map2.addOverlay()方法向地圖中添加交通信息。GTrafficOverlay有兩種方法(hide()和show())用于切換是否顯示交通疊加層。只有支持的城市才能顯示交通信息。在項目中顯示北京的交通信息,設(shè)置如下:vartrafficOptions={incidents:true};trafficInfo=newGTrafficOverlay(trafficOptions);map.addOverlay(trafficInfo);2.4gstsearte-pcr檢測Google地圖API提供街道視圖服務(wù),可用于獲取及處理在Google地圖街道視圖中使用的圖像。通過使用GStreetviewPanorama對象可支持街道視圖圖像,該對象可向街道視圖Flash?查看器提供一個API接口。要將街道視圖合并到地圖API應(yīng)用程序中,按如下操作步驟即可:①創(chuàng)建一個容器(通常是<div>元素),來包含街道視圖Flash?查看器。②創(chuàng)建一個GStreetviewPanorama對象,然后將其放入該容器中。③將街道視圖對象初始化為引用一個特定位置并顯示初始“視點”(POV)。④通過檢查603錯誤值來處理不受支持的瀏覽器。GStreetviewPanorama對象要求其構(gòu)造函數(shù)中有一個容器元素。在構(gòu)造函數(shù)調(diào)用結(jié)束后調(diào)用對象的setLocationAndPOV方法來更改其位置和POV。·街道視圖容器街道視圖Flash查看器需要一個DOM容器節(jié)點,此節(jié)點用于顯示查看器的內(nèi)容(通常是<div>元素)。為使全景圖像達到最佳顯示效果,尺寸設(shè)置為200像素x200像素。GStreetviewPanorama構(gòu)造函數(shù)需要一個container參數(shù)來確定初始容器元素,該容器元素中將顯示街道視圖Flash查看器。可以對GStreetviewPanorama對象應(yīng)用hide(),使其暫時不顯示;應(yīng)用show(),使其重新顯示出來。在任何時候,當(dāng)要更改街道視圖Flash查看器的容器時,向容器發(fā)送setContainer()方法,從而向該容器傳遞其應(yīng)當(dāng)關(guān)聯(lián)的新元素。如果想要從DOM中徹底刪除街道視圖Flash查看器并釋放其內(nèi)存,則向該對象傳遞remove()方法。如果想要從DOM中刪除容器元素,則必須調(diào)用該方法,否則將導(dǎo)致客戶端瀏覽器的內(nèi)存泄漏。·街道視圖位置街道視圖圖像包含一個位置(對應(yīng)于GLatLng)和一個特定的方向(GPov),二者共同標(biāo)識圖像顯示的視圖。由于街道視圖要求支持Flash?插件,需先檢查該插件在用戶瀏覽器上是否可用。也可以注冊一個對GStreetviewPanorama對象上的error事件進行偵聽的事件偵聽器,來在應(yīng)用程序中進行此檢查,通過error事件可傳遞一個可以評估的錯誤代碼?！そ值酪晥D視點(POV)街道視圖位置定義一個圖像相機的放置位置,但是不定義該圖像相機的方向。為了定義相機方向,GPov對象常量定義了三個屬性:·yaw定義以相機位置為圓心相對于正北方向的旋轉(zhuǎn)角度(以度為單位)。擺角按順時針方向測量(90度為正東方向)。·pitch定義相對于相機初始默認傾斜度的“向上”或“向下”差值,默認傾斜度通常為平直水平?！oom定義此視圖的縮放級別(有效地限制“視野”),0表示完全縮小。不同的街道視圖位置可能提供更高或更低的縮放級別。默認情況下,這些值均為0,所定義的視圖為平直水平,方向為正北,且顯示最寬的視野?！ぴO(shè)置全景視圖可以在構(gòu)造全景對象時使用GStreetviewPanoramaOptions參數(shù)設(shè)置該對象的位置和GPov?！な褂媒值酪晥D疊加層確定道路是否支持街道視圖的最簡單方法是通過使用GStreetviewOverlay對象。只需創(chuàng)建一個此類型的疊加層,然后將其添加到地圖中;包含街道視圖數(shù)據(jù)的道路將使用藍色邊界在地圖上高亮顯示。當(dāng)檢查到某個地理區(qū)域支持街道視圖后,通過填充GStreetviewPanorama對象在有效的街道視圖道路上添加可響應(yīng)單擊操作的邏輯。設(shè)計如下:varmyPano=newGStreetviewPanorama(document.getElementById(“pano”));varmap=newGMap2(document.getElementById(“map”));map.setCenter(newGLatLng(39.909736,116.279297),14);svOverlay=newGStreetviewOverlay();map.addOverlay(svOverlay);GEvent.addListener(map,“click”,function(overlay,latlng){myPano.setLocationAndPOV(latlng);});3地圖api帶安全要素對所顯示的電子地圖進行平移、縮放、地圖類型轉(zhuǎn)換、比例尺調(diào)整、地址搜索、鳥瞰圖視圖等操作時,是通過設(shè)置地圖API帶有的可以在地圖中使用的內(nèi)置控件來實現(xiàn)的。3.1基于gps監(jiān)控的地圖顯示GSmallMapControl實現(xiàn)在Google地圖上使用的小平移/縮放控件。顯示在地圖的左上角。GSmallZoomControl是一個小型縮放控件,用于在Google地圖上顯示行車路線的小地圖彈出窗口。GScaleControl用來設(shè)置地圖比例尺3.2map確定中國在項目中實現(xiàn)可通過地圖、衛(wèi)星、混合地圖、地球四種方式來顯示地圖信息時,使用GMapTypeControl來實現(xiàn),并將控件顯示在地圖的左下角位置。設(shè)置如下:map.addMapType(G_SATELLITE_3D_MAP);varmapTypeControl=newGMapTypeControl();varbottomLeft=newGControlPosition(G_ANCHOR_BOTTOM_LEFT,newGSize(10,10));map.addControl(mapTypeControl,bottomLeft);3.3alsearch介紹map.addControl(newgoogle.maps.LocalSearch(),newGControlPosition(G_ANCHOR_BOTTOM_RIGHT,newGSize(10,20)));上述所有這些控件都基于GControl對象。4地圖的生成和創(chuàng)建任何Google地圖API應(yīng)用程序中的基礎(chǔ)元素都是“地圖”本身。如在網(wǎng)頁中顯示以北京為中心的地圖。在上述代碼中,可從以下5點進行介紹:①/maps?file=api&v=2&key=ABQIAAAAenric1_zpeH8z_st1qduvBTuwpJVEPjTGK5sS1H_kKs79n3jZRQW8lO-26_mFE6g5Vzaw8CXBF9Dw網(wǎng)址指向包含使用Google地圖API所需所有符號和定義的JavaScript文件的位置。使用script標(biāo)簽包含Google地圖APIJavaScript。②要讓地圖在網(wǎng)頁上顯示,必須為其留出一個位置,由此,創(chuàng)建一個名為“map”的div,并使用樣式屬性設(shè)置其尺寸。③編寫JavaScript函數(shù)創(chuàng)建“map”對象。GMap2類是表示地圖的JavaScript類。使用JavaScript的new操作來創(chuàng)建此類的新實例。通過GMap2構(gòu)造函數(shù)創(chuàng)建地圖后,將其初始化。初始化通過地圖的setCenter()方法完成。setCenter()方法要求有GLatLng坐標(biāo)和縮放級別,而且必須先發(fā)送此方法,然后再在地圖上執(zhí)行其他任何操作,包括設(shè)置地圖本身的其他任何屬性。④將北京的中心設(shè)置為指定的地理點。當(dāng)有了地圖,則需要引用地圖上的位置。在Google地圖API中,使用GLatLng構(gòu)造一個GLatLng對象,以{經(jīng)度,緯度}的順序傳遞參數(shù):⑤從body標(biāo)簽的onLoad事件初始化地圖對象。5生成期數(shù)據(jù)的生成電子地圖中所顯示的地理對象來自于運輸單的起始地和目的地,由這兩個地址顯示路徑,并根據(jù)運輸單的狀態(tài)值模式顯示當(dāng)?shù)氐牡乩砦恢?由此需要實現(xiàn)電子地圖與運輸管理系統(tǒng)中的數(shù)據(jù)關(guān)聯(lián)。本項目的解決方法是:先將包含城市名稱,經(jīng)度值,緯度值信息的表放置在SOA平臺,當(dāng)運輸系統(tǒng)中進行一運輸訂單的下達時,提取該運單的起始地和目的地名稱信息,與SOA的地理信息表相關(guān)聯(lián),取得起始地和目的地對應(yīng)的精度和緯度信息,并生成XML文件,在網(wǎng)頁中用靜態(tài)方法Gxml處理XML文檔。如在項目中實現(xiàn)顯示某運單的起始地址時,首先通過提取起始地址名稱,然后與SOA中的地理信息表相關(guān)聯(lián),生成XML文件,通過GXml獲取XML的內(nèi)容,并以此內(nèi)容獲取得地理坐標(biāo)點,并標(biāo)記出來,可表示如下:GDownloadUrl(“begin1.xml”,function(data){varxml=GXml.parse(data);varmarkers=xml.documentElement.getElementsByTagName(“marker”);point=newGLatLng(parseFloat(markers.getAttribute(“l(fā)at”)),parseFloat(markers.getAttribute(“l(fā)ng”)));varmarker=newGMarker(point);map.addOverlay(marker);取得兩地的名稱,并生成以此信息為內(nèi)容的XML文件,通過ActiveXObject(‘Microsoft.XMLDOM’)構(gòu)造實例,獲取XML的內(nèi)容,從而顯示兩地運輸路徑。當(dāng)在項目中模