WebGIS中利用AGS JS+eCharts實現一些數據展現的探索

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

1.背景

eCharts提供了遷徙圖、熱點圖、夜視圖等跟地圖可以很好的結合起來的數據展現方式。可是如何將eCharts和咱們的AGS JS框架以及自身的地圖相結合，是一個很值得研究的地方。我所在小組中的一位同事上兩週做爲主力對eChart和咱們目前所使用的AGS JS的結合作了一些研究，取得了不錯的進展。我本人對其研究進行了跟進，這裏做爲二傳手，將這些進展以及效果作一個小的總結，同時也利於我對他研究的進一步學習。感謝我這位優秀的同事。

2.必須解決的問題——座標問題

series中的geoCoord參數是用來設置標註點地理座標的。標註點是否能正確疊加到咱們發佈的地圖上，此參數相當重要。

首先，咱們將此參數中的值設置爲與咱們發佈的地圖相吻合的座標值。好比，咱們地圖是使用的XIAN1980 的座標系，以117度爲經線作高斯投影后的地圖。此時的參數咱們設置爲：

                       

咱們研究eChart的源碼能夠發現，每一個標註點之因此能顯示在地圖上，是由於它內部會首先在geoCoord中讀取到該點的地理座標，而後轉換爲此時的屏幕座標。可是，若是咱們已經給每個標註點的X和Y賦予了值後，eChart內部會直接使用該值而再也不自身進行轉換。如下爲eChart內部的該源碼部分：

 

在瞭解了此過程後，咱們便有了以下思路：

a.繼承AGS上的基類Layer，擴展出一個eChartLayer。

b.將eChartLayer添加到AGS的Map中。

c.遍歷Option中的Data，利用AGS提供的toScreen方法直接將geoCoord中的座標點轉換爲此時的屏幕座標，並賦予各標註點的X和Y。

經過測試，很好的解決了標註點能正確顯示在地圖上的問題。

3.進一步解決的問題

3.1頻繁刷新問題

在將咱們所寫的eChartLayer加入到Map中後，咱們會發現，每次地圖開始平移時，eChart上的各類效果便開始不斷的處於刷新重繪狀態。

解決思路時，監聽地圖的平移事件，對eChart進行重繪控制。

3.2刷新後某些功能失效問題

eChart官網上提供的示例，由於是靜止的，不會出現該問題。可是當把它們疊加到地圖，對地圖進行平移、放大、等須要常常刷新重繪的用途上時便會發生某些功能失效的問題。

好比，下圖所示，當咱們點擊了圖例中的案件數量時，以案卷數量爲標題的標註點都會消失。但當咱們平移地圖後，因此位置點進行重繪時，相關設置便失效，以前消失的標註點又會被重繪出來。

                           

這裏說一下咱們自身的解決方法。

咱們的思路時，將重繪分爲兩種，一種是從新參數綁定，一種是隻改變標註點XY座標的重繪。對於上述操做，咱們進行只改變標註點座標的重繪方式。該問題解決。

4.Iframe和eChart的兼容問題

在eChart中有大量的instanceof Array這樣的代碼。可是咱們發如今Iframe中，此處會報出錯誤。因此若是在Iframe中應用eChart時，須要改寫eChart中與此相關的代碼。

5.效果展現

熱點圖：

 

熒光圖：

 

遷徙圖：

 

6.進一步研究的方向

eCharts中的地圖顯示部分提供了對GeoJson的支持。咱們能夠利用矢量切圖生成各個GeoJson文件，而後經過eCharts對各矢量文件進行展現。因爲eCharts自己使用的HTML5進行渲染，對大數據渲染支持的很好，咱們既能夠解決加速請求矢量數據的問題，也能解決大數據渲染問題。

 

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

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