【導(dǎo)讀】而利用SVG圖形的特性方便的實(shí)現(xiàn)井位信息的定位和利用。地圖中；通過SVG地圖放大、縮小、移動(dòng)、查找文字等功能實(shí)現(xiàn)井位信息的查詢。井的坐標(biāo)、類型、所屬單位等相關(guān)信息。完成后能夠使用戶以瀏覽器的方式打開。第4章“基于SVG的油田井位圖發(fā)布系統(tǒng)”系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)………………它正改變著我們的生活，并將遠(yuǎn)遠(yuǎn)超過電話、電報(bào)、汽車、電

　　

【正文】 ASCRIPT 來實(shí)現(xiàn)井位圖發(fā)布與加載 完全可行。目前， XML技術(shù)已經(jīng)走向成熟。它與 HTML相比體現(xiàn)出眾多優(yōu)勢，現(xiàn)在的各主要瀏覽器都支持它，在本課題中，主要利用 XML在語義方面的優(yōu)勢，將 制作好的井位地圖 ，存儲為 XML格式。 在經(jīng)濟(jì)上，鑒于 井位圖發(fā)布與 井位操作 過程中所起的重大作用，再 企業(yè) 提高效率，降低成本方面的潛在前景。 油田井位圖發(fā)布系統(tǒng) 得到了許多企業(yè)的重視和大力支持，在經(jīng)濟(jì)完全可行。 3． 3 各功能模塊的主要功能 1） 增加井位的功能 ： 在整個(gè)油田井位圖發(fā)布系統(tǒng)中， 井位標(biāo)記及相關(guān)信息的加載是一個(gè)非常重要的功能模塊。本課題的大多數(shù)工作量也在這里，設(shè)計(jì)此功能模塊的主要目的在于能讓用戶更直觀的了解井位信息，方便用戶的操作，使用戶與系統(tǒng)達(dá)到一個(gè)較好的人機(jī)交互的效果 。 在這個(gè)功能 中還包含著多種圖形的添加，比如圓形、矩形和橢圓。這也是為了方便用戶區(qū)分不同的油井。 2） 選擇井位 功能 ： 通過上面的步驟完成后，井位的標(biāo)記與信息已經(jīng)完成了加載，此時(shí)用戶可以對已添加的井位進(jìn)行選擇操作，通常的操作方式是點(diǎn)擊選擇井位，點(diǎn)擊后系統(tǒng)自動(dòng)連接數(shù)據(jù)庫。 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 27 3)井位詳細(xì)信息的查詢 ： 當(dāng)系統(tǒng)自動(dòng)連接數(shù)據(jù)庫后，用戶可以對已經(jīng)選擇的井位進(jìn)行詳細(xì)信息的查詢，信息以表格的形式戰(zhàn)線給用戶。 4) 地圖的縮放功能： 這一部分功能屬于對地圖操作的范圍，通常對原始尺寸的地圖只是大概的瀏覽，真正要了解地圖的更多信息則需要對地圖進(jìn)行不同程度的瀏覽，放大與縮小功能可以滿足用戶這一要求。保證在地圖不失真的情況下，操作 人員可掌握更豐富的地圖信息。 5) 地圖的移動(dòng)功能： : 這個(gè)功能在應(yīng)用類型上與縮放功能類似，都是操作人員對地圖本身的操作，用移動(dòng)方式瀏覽地圖又增加了本系統(tǒng)可操作性，用戶只需要按下“ Alt”鍵的同時(shí)在使用鼠標(biāo)左鍵拖拽地圖的某一點(diǎn)即可。方便用戶的同時(shí)也豐富了系統(tǒng)的瀏覽方式。 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 28 3． 4 功能模塊圖 根據(jù)上述模塊劃分，我們畫出系統(tǒng)的模塊圖如下（圖 ）： 基于 SVG 的油田井位圖發(fā)布系統(tǒng) 的模塊圖 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 29 第 4 章 基于 SVG 的油田井位圖發(fā)布系統(tǒng) 的 設(shè)計(jì)及 實(shí)現(xiàn) 通過前面的系統(tǒng)分 析與總體設(shè)計(jì)，我們已經(jīng)對本系統(tǒng)的基本功能與實(shí)現(xiàn)方式有了一定的了解，在這一章里，我們將講述基于 SVG 的 油田井位圖發(fā)布系統(tǒng) 的各功能模塊是怎么實(shí)現(xiàn)的。 4. 1 數(shù)據(jù)表結(jié)構(gòu)的描述 此系統(tǒng)既然是一個(gè)能夠獨(dú)立運(yùn)行的軟件系統(tǒng)，必然具有完整的數(shù)據(jù)庫來源，有了豐富的數(shù)據(jù)庫資源才能支持系統(tǒng)核心部分的運(yùn)行。因此， 數(shù)據(jù)庫計(jì)是系統(tǒng)設(shè)計(jì)過程中比較重要的一步。在軟件開發(fā)過程中要多次用到數(shù)據(jù)庫，因此數(shù)據(jù)庫的設(shè)計(jì)要與系統(tǒng)設(shè)計(jì)相結(jié)合，使其能夠把系統(tǒng)中的各個(gè)數(shù)據(jù)表組織起來，使系統(tǒng)能夠方便、及時(shí)、準(zhǔn)確的從數(shù)據(jù)庫中得到需要的信息以及準(zhǔn)確的將需要的 數(shù)據(jù)分類重新存儲到數(shù)據(jù)庫新的表中。此外，通過數(shù)據(jù)庫可以創(chuàng)建表之間的持久關(guān)系和存儲過程，建立字段和記錄的有效性規(guī)則。 下面介紹一下數(shù)據(jù)庫 設(shè)計(jì)過程。本系統(tǒng)中數(shù)據(jù)庫包含的具體表結(jié)構(gòu)設(shè)置如下 : 字段名稱 類型 說明 wellname 文本 井位名稱 coordinateX 數(shù)字 井位 X軸坐標(biāo)值 coordinateY 數(shù)字 井位 Y軸坐標(biāo)值 type 文本 油井類型 creattime 數(shù)字 創(chuàng)建時(shí)間 condition 文本 目前狀態(tài) Service diary 文本 維護(hù)日志 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 30 4. 2 界面的設(shè)計(jì)與 實(shí)現(xiàn) 4． 2． 1 界面介紹 根據(jù)上一章的總體設(shè)計(jì)我們知道，本系統(tǒng)只需要一個(gè)界面即可。 系統(tǒng) 的主界面 主要包括以下部分： 1） 工具 欄：實(shí)現(xiàn)各種功能的系統(tǒng)界面區(qū)域 ； 2） 信息 欄： 用于顯示在地圖上的井位信息 ，并方便用戶對其 信息 進(jìn)行 查看 ； 3） 快捷鍵：用戶點(diǎn)擊相應(yīng)的快捷鍵，就可以在 地圖的區(qū)域添加井位，并且在信息欄中產(chǎn)生井位的相關(guān)信息，點(diǎn)擊“增加井位”按鈕可自動(dòng)連接數(shù)據(jù)庫并調(diào)用相關(guān)的井位信息。因此，此快捷鍵包含查看和調(diào)用兩個(gè)功能。 4） 地圖區(qū) ：用戶將在 地圖 區(qū) 瀏覽總體概況 。在該區(qū)域用戶 也 可以 通過放大、縮小、移動(dòng)等功能來實(shí)現(xiàn)對地圖詳細(xì)情況與信 息的瀏覽。在此區(qū)域內(nèi)，當(dāng)用戶完成增加井位的的操作后，便可在地圖相應(yīng)的坐標(biāo)點(diǎn)上找到該油井的圖例和井名。 并能夠連接數(shù)據(jù)庫相應(yīng)信息發(fā)邊用戶對信息查看。 模型定制的主界面如下： 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 31 圖 油田井位圖發(fā)布系統(tǒng)主界面 4． 2． 2 快捷鍵介紹 系統(tǒng)快捷鍵部分包括用 三 種 實(shí)現(xiàn)系統(tǒng)功能的按鈕 。用這 三 種 按鈕就基本實(shí)現(xiàn)了功能模塊圖中的 幾種基本功能。 上圖中， 三種功能按鈕 為： 顯示地質(zhì)信息 、 增加井位 、 查詢詳細(xì)信息 。它們可以用 SVG 語言定義好，在用戶 點(diǎn)擊按鈕 時(shí)調(diào)用函數(shù)動(dòng)態(tài)生成。它們詳細(xì) SVG定義語句及語義如下： 1 顯示地質(zhì)信息 圖符： 定義 顯示地質(zhì)信息 的 SVG 語句： input type=button value= 顯示地質(zhì)信息 name=BGeologic onclick=switchGeologic() 語義： 點(diǎn)擊此按鈕后在地圖區(qū)又會覆蓋一層新的圖象，按鈕名稱為“顯示地質(zhì)信息”。調(diào)用函數(shù) “ switchGeologic()” 后在原有的地圖上 顯示了油層分布的圖象信息。 這里的圖象覆蓋是指重疊，原來的底層圖仍然可見。 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 32 2 增加井位 圖符： 增加井位按鈕 的 SVG 語句： input type=button value=增加井位 name=BWell onclick=addWell() 語義： 點(diǎn)擊名稱為“增加井位”的按鈕后，調(diào)用了函數(shù) addWell() ，此時(shí)在地圖區(qū)域包含的所有油井將一個(gè)圖標(biāo)的方式顯示在地圖上，在地圖原始大小時(shí)可能由于標(biāo)記尺寸太小而不容易辨認(rèn)，只要使用地圖的放大功能就能更清楚地顯示標(biāo)記的位置。 3 查詢詳細(xì)信息 圖符： 查詢詳細(xì)信息按鈕 的 SVG 語句： input type=button value= 查 詢 詳 細(xì) 信 息 name=chaxun onclick=chaxun() 語義： 此按鈕定義了按鈕名稱“查詢詳細(xì)信息”并同時(shí)調(diào)用了函數(shù)chaxun()。此函數(shù)調(diào)用了數(shù)據(jù)庫文件，包括被選中油井的一切詳細(xì)信息。 4． 3 各功能模塊的實(shí)現(xiàn) 4． 3． 1 添加井位 1） 添加 圖 形元素 當(dāng)點(diǎn)擊“增加井位”的按鈕時(shí)會在地圖區(qū)域的相應(yīng)位置顯示出一個(gè)紅色圓點(diǎn)。 此紅色圓點(diǎn)代表一口油井， 地圖上還有若干個(gè)這樣的紅色圓點(diǎn)， 在圓點(diǎn)旁邊還有此油井的井名， 通過 SVG 語言可以 表現(xiàn)出各種圖形， 在這里 使用了圓形作為標(biāo)記，那么如 何使用 SVG 語言實(shí)現(xiàn)圖形描述呢？ 關(guān)于圓形的代碼如下： svg circle cx=”4cm” cy=”” r=”” style=”fill:red。 stroke:none。 strokewidth:”/ /svg 同樣道理，其他形狀也可添加； 關(guān)于矩形代碼如下： svg rect x=”3cm” y=”1cm” width=”4cm” height=”2cm” style=”fill:black。 stroke:none。 strokewidth:”/ /svg 關(guān)于橢圓的代碼如下： svg ellipse rx=”70” ry=”40”cx=”150” cy=”80” 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 33 Style=”fill:green”/ /svg 此系統(tǒng)中添加井位時(shí)顯示的圓形 SVG 元素采用調(diào)用函數(shù)的方法來實(shí)現(xiàn)。 circle cx=39。%=zbx%39。 cy=39。%=zby%39。 r=39。100039。 fill=39。%=jbColor%39。/ g transform=39。translate(%=zbx% %=zby%)39。 g transform=39。matrix(1 0 0 1 0 0)39。 text x=39。4039。 y=39。039。 fontsize=39。400039。 stroke=39。00000039。 %=jh% 添加 SVG元素后在地圖上的顯示效果如下圖： 圖 顯示井位標(biāo)記界面 2） 增加井位事件的實(shí)現(xiàn) 雖然有了利用 SVG語言添加 圖形元素的方法，但這樣只是界面的制作及 實(shí)現(xiàn)， 還需要利用 Javascript對增加井位事件進(jìn)行編譯。在這里聲明了函數(shù) addWell()。此函數(shù)代表增加井位， 通過 對井位坐標(biāo)的計(jì)算來調(diào)用相應(yīng)的函數(shù)值，依據(jù)變量來計(jì)算出添加的油井的具體位置，實(shí)現(xiàn)此事件的關(guān)鍵代碼如下： function addWell() { if (xmlDoc!=null) return。 var thesvg1 =().documentElement。 井位標(biāo)記 大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 34 var theView = (viewBox).split( )。 var x2=theView[0]*1+theView[2]*1。 var y2=theView[1]*1+theView[3]*1。 var theJsp=?x1=+theView[0]+amp。y1=+theView[1]+amp。x2=+x2+amp。y2=+y2。 4． 3． 2 選擇井位功能的 設(shè)與實(shí)現(xiàn) 1） 點(diǎn)擊選擇井位 當(dāng)完成上一步的工作時(shí)，地圖上顯然已經(jīng)有了被加載的井位圖標(biāo)。此時(shí)如果使用鼠標(biāo)左鍵單擊井位標(biāo)記，系統(tǒng)則會自動(dòng)連接數(shù)據(jù)庫，調(diào)出該口油井所包含的詳細(xì)信息。 當(dāng)點(diǎn)擊井位標(biāo)記時(shí)，在 Javascript中屬于 onclick事件，于是在這里聲明了名為 selectWells(x,y,w,h)的函數(shù)。 在此定義了 井位信息的查找范圍及定位方式。當(dāng)然， 只有將 SVG數(shù)據(jù)轉(zhuǎn)換為一定格式的 XML文檔存儲，系統(tǒng)才能自動(dòng)連接數(shù)據(jù)庫， 采用 XML作為模型存儲格式有 一 個(gè)好處： 因?yàn)樗跀?shù)據(jù)交換方面 具有 強(qiáng)大功能 。 實(shí)現(xiàn)點(diǎn)擊選擇井位的關(guān)鍵代碼如下： function selectWells(x,y,w,h) { if (xmlDoc==null) return。 =x+,+y+,+w+,+h。 var theExp=number(@cx)=+x+ and number(@cx)=+(x*1+w*1)+ and number(@cy)=+y+ and number(@cy)=+(y*1+h*1)。 var theNodes=(/g/circle[+theExp+])。 var theWells=。 for (var i=0。i。i++) 4． 3． 3 地圖控制 1） 地圖的放大與縮小 要實(shí)現(xiàn)在 SVG中的縮放， 首先要澄清 SVG的成像原理及成像特點(diǎn)。 矢量圖 的圖像構(gòu)造原理與點(diǎn)位圖完全不同 ,矢量圖利用點(diǎn)和線等矢量化的數(shù)據(jù)描述圖像 ,并在圖像中包含色彩和位置信息 ,它有效地克服了點(diǎn)位圖的固有缺陷 .當(dāng)顯示或輸出圖像時(shí) ,圖像的品質(zhì)不受設(shè)備分辨率影響 ,能夠提供高清晰的畫面 ,放大和縮大慶石油學(xué)院本科生畢業(yè)設(shè)計(jì)（論文） 35 小矢量圖不會影響圖像品質(zhì)。那么 SVG是通過何種方式實(shí)現(xiàn)的不失真的矢量圖象呢？在 SVG的窗體定義中通常含有這樣一個(gè)屬性“ viewBox” 。 “ viewBox” 屬性的作用是規(guī)定視口的坐標(biāo)范圍。范圍重新定義后，缺省的坐標(biāo)度量單位也會改變。其次，可以利用 SVG中的伸縮變換元素“ scale” 。坐標(biāo)伸縮變換的 形式是：transform=“ scale(sx,sy)” 。其中“ sx”和“ sy”分別代表 X軸方向和 Y軸方向拉伸和縮小的比例因子。大于 1是拉伸，小于 1是縮小。 此功能的實(shí)例代碼如下： g transform=“ scale()” g style=“ fill:none。 stroke:red。 strokewidth:3” line x1=“ 0” y1=“ 0” x2=“ 100” y2=“ 0” / line x1=“ 0” y1=“ 0” x2=“ 100” y2=“ 80” / /g 還有一種在數(shù)學(xué)方面的計(jì)算方法，即矩陣算法。因?yàn)閺臄?shù)學(xué)上講，坐標(biāo)變換就是矩陣計(jì)算。矩陣變換是坐標(biāo)變換的通用形式。 平移、拉伸都是矩陣變換的特殊形式。一個(gè)二維坐標(biāo)系的矩陣變換式為： 2） 地圖的移動(dòng)操作 對于地圖的移動(dòng)操作其實(shí)本質(zhì)就是 SVG中的平移變換。在此利用了 SVG中的一個(gè)關(guān)于平移的關(guān)鍵元素“ translate”。實(shí)現(xiàn)方法與縮放的功能實(shí)現(xiàn)類似。 也是通過對各種圖形的起始和終點(diǎn)坐標(biāo)定義后來決定移動(dòng)方式。在這里就不詳細(xì)