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 集成 Echarts4 实现模拟迁徙图效果基础上,实现散点图效果,效果图如下:

arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)_第1张图片
arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)_第2张图片
arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)_第3张图片

  • 散点图数据源
var data = [
{name: '海门', value: 9},
{name: '鄂尔多斯', value: 12},
{name: '招远', value: 12},
……
{name: '武汉', value: 273},
{name: '大庆', value: 279}
];
var geoCoordMap = {
'海门': [121.15, 31.89],
'鄂尔多斯': [109.781327, 39.608266],
……
'武汉': [114.31, 30.52],
'大庆': [125.03, 46.58]
};
  • html 页面初始化调用
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'arcgis',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'yellow'
}
}
},
……

更多的详情见小专栏文章:GIS之家小专栏

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

你可能感兴趣的:(arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载))