WEB - 台灣TWD97坐標量測網

Posted by Unknown , , , 沒有留言
fig.1 TWDSW - TWD97坐標量測網(點取前往該網頁)

這個網站主要是去年年底在學習寫網頁時的一個測試作品的延伸，當初可能是突然被雷打到，腦中突然就迸出了"要怎麼把我之前所學知識的應用在目前所學的網頁撰寫上？"的idea，剛好又想到之前寫論文時，老闆就常問我要怎麼展示你算出來的數據？當初限於coding能力不足，所以是用最現成的"學院派"的作法，利用地理學常用的學術軟體GMT(generic mapping tool)來繪製成果，雖然專業但使用時需要被一堆指令，加上沒gui只有指令介面，總而言之就是不好用。所以去年就初步利用google map api寫了一個大概的網頁，來顯示我之前的碩論成果。

最終版本的網站請點取fig. 1內的連結前往，下面內容為網站開發過程，



 網站撰寫過程：


fig. 2 TWDSW最初版網頁示意圖

fig. 2 是我當初一開始寫出來的網頁雛形，設計的原理很簡單，只要輸入特定的經緯度坐標即可顯示該點點位加上該點的坐標資訊(包含原始的97坐標與利用我碩論所計算出來的最佳化坐標)，可以看到再沒有任何框架與進一步的修改google map 參數下，網頁看起來非常陽春且簡陋。


fig 3.的alpha版是根據最初版本為基礎，除了一開始的輸入座標找點位的功能外，還加入了以下功能！
  1. 加入了輸入地址進行搜尋點位的功能!
  2. 加入了可以讓使用者直接在地圖上繪製點線面的功能，並且能即時顯示繪製物件的坐標等幾何屬性，比方說你繪製點物件就現顯示該點坐標，繪製現物件就會顯示該線段的長度，所有數據都是以twd97坐標系統來作計算。
  3. 最重要的，加入了將繪製在地圖上的幾何物件，輸出成含twd97坐標系統的autocad的.dxf檔案，此功能是根據前同事的建議加入的，主要能幫助他們在撰寫報告或執行專案時，能夠利用更簡單的方式來取得測區的資料。





fig 4.1與fig. 4.2分別是將alpha版本的網頁重新套上兩種不同框架(fig. 4.1 beta-1為kickstart ，fig. 4.2 beta-2為materalize)後撰寫的網頁，並加入了以下功能：
  1. 新增twd97坐標搜尋功能。
  2. 可以選取繪製物件上的顯示的資訊。
  3. 新增google map截圖功能！一般人在使用google map時都會有無法直接擷取該區影像的困擾，所以新增此功能來解決大家的麻煩。
  4. 新增說明文件。
其中beta-2版本使用的框架即是最終版本使用的網頁框架。

結合上述的成果，最終成果就是fig.1 的TWDSW網頁，功能結合上述版本所有功能，並且將google map上的icon客製化，讓網頁各個元件外觀更一致！

同樣的，如果有任何建議或發現任何bug，歡迎email給我～ 謝謝

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )