1.背景

       在之前的專案中，我們做過基於PM2.5的站點監測資料對全區域進行插值渲染來視覺化預測，其實現方案為後臺工具進行定時生成插值柵格圖，對應文章為：《WebGIS中等值面展示的相關方案簡析》（http://www.cnblogs.com/naaoveGIS/p/6145339.html）。但是該方案依賴AE，且為定時生成等值面（也可以改造為實時，但是因為是工具型別，對併發支援有瓶頸）。

       隨後，我又研究了基於前端庫Turf.js將等值面轉移到前端生成，基本邏輯為先將插值範圍格網化，分別對每個格子的中心點進行克里金插值，最後利用turf生成等值面，然後等值面和插值範圍做拓撲相交判斷獲取相交面。該方案對應的文章為：《

       基於此，我們著手開始研究新的等值面生成方案。經搜尋資料，一種是可以基於wcontour在服務端生成，另一種是在博友GIS之家中發現的開源庫krigingjs來生成。考慮到預報的實時性，以及對伺服器壓力的減輕，我們選用了採用krigingjs前端生成方案。

2.整合和優化

2.1整合

       在整合中，我們重點需要解決的是地理座標與螢幕座標的轉換，以及根據地圖的縮放等作出相應的重繪，這裡不做詳細描述。

2.2優化

       我們實際試用中發現有如下問題：

       a.我們的區域邊界比較複雜，每次裁剪繪製時效率很低，容易出現卡頓。

       b無法對等值面進行閾值指定顏色的設定。

       c.插值間隔引數對插值效率和效果影響很大。如果設定小了，在地圖解析度很高時，將直接導致繪製效率下降卡頓。如果設定大了，容易出現繪製鋸齒狀。

       針對以上問題，我們分別做了優化，基本重寫了krigingjs中的繪製程式碼：

       a採用多執行緒進行插值計算，不影響前端其他操作。

       b.點面判斷不再通過向量拓撲關係去判斷，而是改成預先給canvas進行二值化賦值，區域內是1，非區域內是0，在逐畫素計算繪製時通過此二值來判斷是否進行透明設定。

       c.插值大小採用地圖各級別中的居中解析度來計算。

3.成果展示    

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