序文

、ArcGISのはJSのAPI 4.xの公式ウェブサイトESRI見る読み取ることができないAPI関与するクラスを達成するために使用Benpian機能について：ESRIの公式サイトのAPI、詳細に紹介のArcGIS API 4.xの各クラスを記述し、そこにありますオンライン例：ESRIの公式サイトのオンラインの例としては、これは良い学習教材ののArcGIS API 4.xのです。

参照すると、 JSマップロード複数のバブルウィンドウ表示用のArcGIS API 4.xの Echarts4がチャートを達成JSための実現のArcGIS API 4.xのに基づいてコンバイン、カスタムマップオーバーレイのdivコンテナの核となるアイデアは、そう、マップを聞くことによって、イベントを変更しますダイナミックリフレッシュウィンドウ位置変更のdiv、divのコンテナはecharts4チャート、追加の最適化をレンダリングすることができ、現在のマップレベルに基づいて、マップ上のイベントをリスニング、わずかな効果を体験することで、動的に時間を避けるために、ズームサイズチャートの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之家小专栏

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

（ソース・ダウンロードと）組み合わせEcharts4チャートに実装JS用のArcGIS API 4.xの

序文

おすすめ