arcgis api 4.x for js 結合 Echarts4 實現統計圖(附源碼下載)

前言

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

參照 arcgis api 4.x for js 地圖加載多個氣泡窗口展示的基礎上，實現 arcgis api 4.x for js 結合 Echarts4 實現統計圖，核心思路地圖疊加自定義 div 容器，通過監聽地圖的變化事件，從而動態刷新 div 窗口的位置變化，div 容器渲染 echarts4 統計圖即可，額外體驗效果稍微優化的是，在地圖監聽事件，根據當前地圖級別 zoom，動態改變 div 容器的統計圖大小，避免地圖縮小時候，統計圖表顯示過大影響美觀。

實現效果如下：

• 地圖監聽事件

//視圖加載完成
view.when(function(){
//監聽地圖變化事件，對應刷新統計圖位置
view.watch("extent", function () {
relocatePopup();
});
view.watch("rotation", function () {
relocatePopup();
});
//地圖加載完，初始化統計圖
echartsMapInit();
 
});
//統計圖窗口位置
function relocatePopup(e){
for (var i = 0; i < echartsInfos.length; i++) {
var echartsInfo = echartsInfos[i];
//坐標轉換
var mapPoint = {
x: echartsInfo.x,
y: echartsInfo.y,
spatialReference: view.spatialReference
};
var screenPoint = view.toScreen(mapPoint);
var obj = {};
obj.x =screenPoint.x;
obj.y =screenPoint.y;
obj.option = echartsInfo.option;
obj.id = echartsInfo.id;
obj.echartsObj = echartsInfo.echartsObj;
//刷新統計圖窗口位置
positionEchartsMap(obj);
}
}

• 刷新統計圖窗口位置

//刷新統計圖窗口位置
function positionEchartsMap(obj){
$('#'+obj.id).css('transform', 'translate3d(' + obj.x + 'px, ' + obj.y + 'px, 0)');
//動態改變echarts統計圖div大小
switch(view.zoom) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
$('#'+obj.id).css('height', '50px');
$('#'+obj.id).css('width', '100px');
break;
case 6:
case 7:
case 8:
$('#'+obj.id).css('height', '120px');
$('#'+obj.id).css('width', '200px');
break;
case 9:
case 10:
$('#'+obj.id).css('height', '150px');
$('#'+obj.id).css('width', '300px');
break;
case 11:
case 12:
$('#'+obj.id).css('height', '200px');
$('#'+obj.id).css('width', '350px');
break;
default:
$('#'+obj.id).css('height', '250px');
$('#'+obj.id).css('width', '400px');
 
}
if(obj.echartsObj)
obj.echartsObj.resize();
}

• echarts 統計圖初始化加載

//初始化寫入統計圖的數據
function echartsMapInit(){
echartsInfos = [];
echartsInfos.push({
//地圖坐標
x: 113.3684,
y: 23.1323,
content: '<div id="info1" style="height:150px;width:300px;position:absolute;"></div>',
//div的id唯一標識
id:"info1",
echartsObj:null,
option:{
color: ['#3398DB'],
……

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

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