arcgis api 3.x for js 之 echarts 開源 js 庫實現地圖統計圖分析（附源碼下載）

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 3.x 的好素材。

內容概覽

1. 基於 arcgis api 3.x 結合 echarts 開源 js 庫實現地圖統計圖分析
2. 源代碼 demo 下載

前面寫過一篇關於arcgis api 3.x for js 實現地圖統計圖的，具體見：這里
那是基於 dojo 組件來實現圖表統計的，實現的效果一般般；所以，本篇利用 arcgis api 3.x 結合 echarts 實現統計圖效果，效果比之前好看，效果圖如下：

實現的思路

自定義氣泡窗口 ChartInfoWindow，繼承 InfoWindowBase，為了 echarts 統計圖表展示在自定義的氣泡窗口里面；自定義氣泡窗口 ChartInfoWindow 是為了適應地圖上同時展示多個圖表，地圖默認的氣泡窗口只能顯示一個，不能同時顯示多個的；

定義 ChartInfoWindow 的樣式，具體樣式如下：

 

.myInfoWindow {
position: absolute;

z-index: 100;

-moz-box-shadow: 0 0 1em #26393D;

font-family: sans-serif;

font-size: 12px;

background-color: rgba(255, 255, 255, 0);

}

/*.dj_ie .myInfoWindow {*/

/*border: 1px solid rgba(255, 255, 255, 0);*/


/*}*/


.myInfoWindow .content {


position: relative;


color:#002F2F;


overflow: auto;


padding:2px 2px 2px 2px;


background-color: rgba(255, 255, 255, 0);


}

• 構造模擬數據：

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波