文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
1.背景
在之前的項目中，我們做過基於PM2.5的站點監測數據對全區域進行插值渲染來可視化預測，其實現方案為后台工具進行定時生成插值柵格圖，對應文章為：《WebGIS中等值面展示的相關方案簡析》（http://www.cnblogs.com/naaoveGIS/p/6145339.html）。但是該方案依賴AE，且為定時生成等值面（也可以改造為實時，但是因為是工具類型，對並發支持有瓶頸）。
隨后，我又研究了基於前端庫Turf.js將等值面轉移到前端生成，基本邏輯為先將插值范圍格網化，分別對每個格子的中心點進行克里金插值，最后利用turf生成等值面，然后等值面和插值范圍做拓撲相交判斷獲取相交面。該方案對應的文章為：《WebGIS中前端JS生成等值面方法探討》（http://www.cnblogs.com/naaoveGIS/p/7346299.html）。但是，由於turf內部存在bug，當等值面非常復雜比如包含多個內環等情況時，其生成的等值面有誤。
基於此，我們着手開始研究新的等值面生成方案。經搜尋資料，一種是可以基於wcontour在服務端生成，另一種是在博友GIS之家中發現的開源庫krigingjs來生成。考慮到預報的實時性，以及對服務器壓力的減輕，我們選用了采用krigingjs前端生成方案。
2.集成和優化
2.1集成
在集成中，我們重點需要解決的是地理坐標與屏幕坐標的轉換，以及根據地圖的縮放等作出相應的重繪，這里不做詳細描述。
2.2優化
我們實際試用中發現有如下問題：
a.我們的區域邊界比較復雜，每次裁剪繪制時效率很低，容易出現卡頓。
b無法對等值面進行閾值指定顏色的設置。
c.插值間隔參數對插值效率和效果影響很大。如果設置小了，在地圖分辨率很高時，將直接導致繪制效率下降卡頓。如果設置大了，容易出現繪制鋸齒狀。
針對以上問題，我們分別做了優化，基本重寫了krigingjs中的繪制代碼：
a采用多線程進行插值計算，不影響前端其他操作。
b.點面判斷不再通過矢量拓撲關系去判斷，而是改成預先給canvas進行二值化賦值，區域內是1，非區域內是0，在逐像素計算繪制時通過此二值來判斷是否進行透明設置。
c.插值大小采用地圖各級別中的居中分辨率來計算。
3.成果展示
-----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
