基于JavaScript的離線電子地圖論文范文
本站小編為你精心準(zhǔn)備了基于JavaScript的離線電子地圖論文參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫(xiě)作靈感。歡迎深入閱讀并收藏。
1javascript腳本編寫(xiě)使用的技術(shù)及其特點(diǎn)
（1）Div+CSS布局設(shè)計(jì)Div（division）是HTML中的一個(gè)元素，是標(biāo)簽，用來(lái)為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。Div的起始標(biāo)簽和借宿標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含的元素的特性由Div標(biāo)簽的屬性來(lái)控制，或者通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。CSS（CascadingStyleSheets）是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。Div+CSS是網(wǎng)站標(biāo)準(zhǔn)中的術(shù)語(yǔ)之一，通常為了說(shuō)明HTML網(wǎng)頁(yè)設(shè)計(jì)中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用Div+CSS的方式實(shí)現(xiàn)各種定位。（2）JS修改Div樣式①局部改變樣式局部修改樣式分為改變直接樣式、改變className和改變cssText三種。②全局改變樣式通常情況下，我們可以通過(guò)改變外鏈樣式的href的值實(shí)現(xiàn)網(wǎng)頁(yè)樣式的實(shí)時(shí)切換，也就是“改變模板風(fēng)格”。（3）JS實(shí)現(xiàn)DOM事件響應(yīng)DOM，即文檔事件模型，是W3C（萬(wàn)維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。DOM定義了訪問(wèn)HTML和XML文檔的標(biāo)準(zhǔn)。W3CDOM標(biāo)準(zhǔn)被分為三個(gè)不同的部分。①核心DOM——針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型。②XMLDOM——針對(duì)XML文檔的標(biāo)準(zhǔn)模型。③HTMLDOM——針對(duì)HTML文檔的標(biāo)準(zhǔn)模型。DOM節(jié)點(diǎn)樹(shù)如圖1所示。JS響應(yīng)DOM事件是利用對(duì)元素對(duì)象的事件屬性（onmousedown，onmousemove等）的響應(yīng)來(lái)調(diào)用JS文件的函數(shù)。
2.1JS腳本的設(shè)計(jì)思路本設(shè)計(jì)中JS腳本的總體設(shè)計(jì)思路是通過(guò)給定顯示區(qū)域左下角圖片的路徑，按照一定順序計(jì)算得出顯示區(qū)域內(nèi)共4×3個(gè)圖片的路徑，寫(xiě)入HTML客戶(hù)端，每次拖動(dòng)后先計(jì)算左下角圖片路徑，然后根據(jù)其路徑動(dòng)態(tài)刷新顯示區(qū)域。放大時(shí)則通過(guò)更換圖層來(lái)動(dòng)態(tài)刷新顯示區(qū)域。總體設(shè)計(jì)框圖如圖2所示。
2.2計(jì)算路徑函數(shù)的實(shí)現(xiàn)在整個(gè)腳本的開(kāi)始，我們調(diào)用計(jì)算路徑函數(shù)（count（s）），通過(guò)左下角圖片的路徑按照xoy坐標(biāo)系的順序，算出整個(gè)顯示區(qū)域（4×3）內(nèi)所有圖片的路徑，并將其保存在數(shù)組e中。同時(shí)，以數(shù)組e為實(shí)參調(diào)用顯示函數(shù)（display（e））。具體實(shí)現(xiàn)方法如下。（1）使用if語(yǔ)句判斷圖片的Z坐標(biāo)，確定其所在的圖層。（2）使用if語(yǔ)句判斷圖片X坐標(biāo)和Y坐標(biāo)，如果其坐標(biāo)超過(guò)所能顯示的最大值或最小值時(shí)，修改其坐標(biāo)值，使其符合要求。（3）使用for語(yǔ)句，建立一個(gè)雙重循環(huán)，按照先Y坐標(biāo)自增再X坐標(biāo)自增的順序，將顯示區(qū)域內(nèi)4×3個(gè)圖片的路徑存入字符串ss。（4）使用ss.split()方法，從空格處將字符串ss分割開(kāi)，存入數(shù)組e中。（5）調(diào)用display（e）函數(shù)，將數(shù)組e作為參數(shù)傳入display（e）中。具體流程圖如圖3所示。
2.3顯示函數(shù)的實(shí)現(xiàn)顯示函數(shù)（display（e））通過(guò)遍歷路徑計(jì)算函數(shù)出來(lái)的數(shù)組e，將其每一個(gè)元素傳入排版函數(shù)（placing（e[i],i）），并將從排版函數(shù)返回的經(jīng)過(guò)Div+CSS設(shè)計(jì)的HTML語(yǔ)言通過(guò)document.id.innerHTML屬性寫(xiě)入HTML客戶(hù)端，從而實(shí)現(xiàn)排版顯示。具體實(shí)現(xiàn)方法如下。（1）使用foreach方法遍歷數(shù)組e，將數(shù)組的元素作為參量調(diào)用函數(shù)placing（e[i],i）。（2）使用地圖容器（map_content）的innerHTML屬性，將經(jīng)過(guò)運(yùn)算的HTML語(yǔ)句輸出到Web客戶(hù)端，實(shí)現(xiàn)圖片的顯示。具體流程圖如圖4所示。
2.4排版函數(shù)的實(shí)現(xiàn)排版函數(shù)（palycing（e[i],i））通過(guò)if-else結(jié)構(gòu)根據(jù)形參i的大小分別返回不同的字符串。字符串的內(nèi)容為經(jīng)過(guò)內(nèi)部樣式表設(shè)計(jì)的Div模塊，以及嵌于Div中的圖片。具體實(shí)現(xiàn)方法如下。（1）使用if語(yǔ)句判斷形參i的大小。（2）使用內(nèi)部樣式表設(shè)計(jì)Div，并根據(jù)形參i的大小將圖片標(biāo)簽嵌入Div中。（3）使用return語(yǔ)句返回保存有Div標(biāo)簽和img標(biāo)簽的HTML語(yǔ)句。具體流程圖如圖5所示。
2.5拖動(dòng)響應(yīng)函數(shù)的實(shí)現(xiàn)拖動(dòng)響應(yīng)函數(shù)通過(guò)對(duì)Div對(duì)象的event.onmousedown、onmousemove和onmousueup等事件的響應(yīng)，調(diào)用函數(shù)。通過(guò)計(jì)算地圖容器和圖片顯示區(qū)域之間的相對(duì)位置，從而設(shè)置圖片顯示區(qū)域的offsetLeft和offsetTop屬性，實(shí)現(xiàn)地圖的拖動(dòng)。然后，計(jì)算拖動(dòng)的絕對(duì)距離，得出拖動(dòng)后左下角圖片文件的xyz坐標(biāo)，作為全局變量s的新值保存。具體實(shí)現(xiàn)方法如下。（1）計(jì)算拖動(dòng)前圖片顯示區(qū)域相對(duì)于地圖容器的距離，存入deltaX和deltaY中。（2）將函數(shù)movehandler和up-handler分別附加到當(dāng)前文檔對(duì)象模型（DOM）對(duì)象上的事件onmousemove和onmouseup上。（3）利用設(shè)置event.cancelBu-bble屬性取消事件的起泡響應(yīng)，防止拖動(dòng)函數(shù)導(dǎo)致地圖容器的移動(dòng)。（4）設(shè)置event.returnValue為false，取消事件的返回值。（5）當(dāng)響應(yīng)onmousemove事件時(shí)，調(diào)用函數(shù)movehandler，計(jì)算移動(dòng)的絕對(duì)距離以及拖動(dòng)完成后地圖容器和圖片顯示區(qū)域的相對(duì)距離。（6）通過(guò)修改圖片顯示區(qū)域Div的offsetLeft和offsetTop屬性完成拖動(dòng)。（7）當(dāng)響應(yīng)事件onmouseup時(shí)，調(diào)用函數(shù)uphandler。取消事件onmousemove和onmouseup與函數(shù)movehandler與uphandler的綁定，并取消起泡響應(yīng)。（8）調(diào)用函數(shù)thenext，計(jì)算拖動(dòng)前被選中的圖片所在的Div相對(duì)于整個(gè)地圖容器的距離。并且計(jì)算拖動(dòng)后左下角圖片的具體坐標(biāo)，然后調(diào)用路徑計(jì)算函數(shù)count（s）。具體流程圖如圖6所示。
2.6放大函數(shù)的實(shí)現(xiàn)放大函數(shù)（bigger（））通過(guò)響應(yīng)事件ondbclick，按照16~19的順序，依次循環(huán)改變圖層和相應(yīng)的圖片，將相應(yīng)圖層左下角圖片作為參量傳入路徑計(jì)算函數(shù)。具體實(shí)現(xiàn)方法如下。（1）判斷當(dāng)前圖層的z坐標(biāo)。（2）按照16~19的順序依次循環(huán)修改下一個(gè)圖層的z坐標(biāo)，并作為參數(shù)傳入路徑計(jì)算函數(shù)。具體流程圖如圖7所示。
3離線電子地圖的調(diào)試結(jié)果
3.1拖動(dòng)響應(yīng)函數(shù)的調(diào)試結(jié)果拖動(dòng)響應(yīng)函數(shù)調(diào)試的結(jié)果如圖8所示。由圖8可知，拖動(dòng)響應(yīng)函數(shù)基本上達(dá)到了設(shè)計(jì)要求，但在動(dòng)態(tài)刷新方面存在延遲比較明顯，可采用AJAX技術(shù)進(jìn)行改進(jìn)。
3.2放大函數(shù)的調(diào)試結(jié)果放大函數(shù)的調(diào)試結(jié)果如圖9所示。由圖9可知，放大函數(shù)的效果很好地滿(mǎn)足了連線電子地圖設(shè)計(jì)的需要。
3.3顯示與排版函數(shù)調(diào)試的結(jié)果顯示與排版函數(shù)調(diào)試的結(jié)果如圖10所示。由圖10可知，顯示與排版函數(shù)的效果實(shí)現(xiàn)了設(shè)計(jì)的要求。
作者：徐濟(jì)仁李洲暉單位：合肥電子工程學(xué)院