前端基於Canvas生成等值面的方案

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

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