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

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/

                                                                           若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^