文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
