arcgis api 4.x for js implemented in conjunction Echarts4 chart (with source download)

Foreword

About Benpian function used to achieve api involving class can not read, see arcgis esri official website for JS api 4.x: ESRI's official website api , which describes in detail the introduction arcgis api 4.x each class, there is online example: ESRI's official website online examples , this is a good learning materials arcgis api 4.x of.

Referring to  arcgis api 4.x for js map load multiple bubble window display based on the realization arcgis api 4.x for js combine Echarts4 achieve charts, the core idea of a custom map overlay div container, change events by listening to the map, so dynamic refresh the window position change div, div container can be rendered echarts4 charts, additional optimization is to experience the effect slightly, listening for events on the map, based on the current map level, dynamically change the size chart div container zoom, zoomed to avoid the time, charts show too much affect the appearance.

Achieve results is as follows:

• Map listen for events

//视图加载完成
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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波