文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
