WebGIS中等值線前端產生繪製簡析

標籤：常見   src   格式   曲線   常用   思路   欄位   mil   break   

文章著作權由作者李曉暉和部落格園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景

等值線是GIS製圖中常見的功能，一般有兩種思路：一種是先進行插值產生等值面柵格圖，然後將等值面提取成等值線；另一種是進行插值後，直接再根據演算法進行插值點串連產生一條盡量閉合以及平滑的曲線。

在進行插值中，有很多演算法可以選擇，各種演算法中也會有不同的參數需要調試，並且更具實際情況，比如地理環境因素等進行微調，最後建模。這裡我們要討論的是忽略一切外在因素，只根據座標、等值欄位值進行插值和展示的探討。

常見解決方案為，演算法後台產生圖片，前端展示。這裡我們探討如何前端直接產生。前端產生等值面的好處很多：最大的好處就是規避後台壓力，並且可以隨時控制顯示樣式。

 

2.插值演算法簡介  

基於網格GRID來進行問題簡化是GIS領域中的常見套路，WebGIS中更是常用。這裡同樣我們也能把等值線的演算法基於GRID來實現。

a.對範圍內的面按照網格來劃分，每一個網格的四角座標平均插值出對應的座標。

                                       

b. 選定一個矩形開始，追蹤等值線，等值線一定是連續的，所以在相鄰矩形邊界上的一個數值點，肯定會在下一個矩形中找到後續點。而且，一定是成對出現的，也就是說，肯定能發現後續的等值點，也許不止一個（另有辦法追蹤），但不會出現找不到的情況。

 

c. 在一個矩形的四邊中也有可能出現有多於一對的等值點情況，如何追蹤下一點取決於你的演算法，一般是取相鄰點（避免與另一條等值線交叉）。

 

d.將所有的點串連起來成為等值線，再對等值線進行平滑。

e.最後在地圖上繪出。

3.開源GIS庫——Turfjs

這裡，我們並不需要重頭來寫等值線插值演算法，在著名的開源GIS前端庫——Turfjs中，已經幫我們完成了這些工作。這裡我簡單介紹下Truf.js。

Turf.js官網地址：http://turfjs.org/

Turf.js中的幾何資料群組織規範以WKT格式為標準。其官網中包含了詳細的介面介紹和範例講解。這裡我給出我們需要用的介面：

 

4.實現步驟

這裡我簡單給出可以最佳化的地方：

a.對不同的break線給不同樣式。

b.加上標註break值。

c.對資料進行平滑。

以下為最終：

 

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　 -----歡迎轉載，但保留著作權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                           如果您覺得本文確實協助了您，可以掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

WebGIS中等值線前端產生繪製簡析