Web地圖導圖總結

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1. 背景

         地圖端展現了各種製圖效果，用戶但願能夠一鍵生成報表，其中核心即前端地圖製圖界面能夠自動截圖填入報表中。因爲此項目版本有些陳舊，暫時沒法升級，PC端地圖並非採用的Canvas繪製（即便導圖有跨域，也能夠經過服務端代理來解決），而是依然基於div的方式拼接而成，致使其自動導圖難度大大提升。

       經過與用戶的初步交流，讓其改爲了截圖方案。可是截圖方案依然須要安裝插件（採用的UdCapture），通配IE和Chrome，可是截圖分辨率上差強人意。最近瀏覽博客時發現博友「遙想公瑾當年」推薦的一個插件puppeteer能夠解決這個問題，因而研究測試了一下，可行，如下爲總結。

2. 思路

           Puppeteer能夠理解成利用chrome的核心模塊（無UI）進行API調用，具體如何安裝，博客挺多，不累述。

        本文對指定模塊功能的截圖思路爲：

        a.編寫一個專門用給截圖的html頁面，該頁面中對所需截圖內容進行展現。

 

       b.Puppeteer利用對頁面console輸出的監聽，當監聽到初始化完成時，觸發截圖。

 

        測試結果以下：

 

3. 通用功能化的幾點思考

           目前該功能爲定製功能，要作到通用接口化，及經過接口便可指定對哪些內容截圖還需幾點改造：

           a.截圖靜態頁面能夠傳入待截圖功能函數名、參數等，正常觸發。

           b.nodejs環境須要裝入GIS服務器docker中。

 

　                                                                  -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

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