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 實現模擬遷徙圖效果基礎上，實現散點圖效果，效果圖如下：

• 散點圖數據源

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之家小專欄

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