giserhome

前言

openlayers5-webpack 入门开发系列环境知识点了解:

内容概览

openlayers5 结合 echarts4 实现散点图
源代码 demo 下载

效果图如下:

  • 地图加载代码如下:
const map = new Map({
target: \'map\',
layers: [
new TileLayer({
source: new XYZ({
url: \'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline\' +
\'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}\'
})
})
],
view: new View({
center: [113.53450137499999, 34.44104525],
projection: \'EPSG:4326\',
zoom: 6
})
});
  • echarts数据源设置:
function getJSON (url, callback) {
const xhr = new XMLHttpRequest();
xhr.responseType = \'json\';
xhr.open(\'get\', url, true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
callback(xhr.response);
} else {
throw new Error(xhr.statusText);
}
};
xhr.send();
}
 
getJSON(\'data.json\', function (res) {
if (res) {
var data = res.locations;
var geoCoordMap = res.coordinates;
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 option = {
title: {
text: \'全国主要城市空气质量\',
subtext: \'\',
sublink: \'\',
left: \'center\',
textStyle: {
color: \'#fff\'
}
},
tooltip: {
trigger: \'item\'
},
openlayers: {},
legend: {
orient: \'vertical\',
y: \'top\',
x: \'right\',
data: [\'pm2.5\'],
textStyle: {
color: \'#fff\'
}
},
series: [
{
name: \'pm2.5\',
type: \'scatter\',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: \'{b}\',
position: \'right\',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: \'#ddb926\'
}
}
},
{
name: \'Top 5\',
type: \'effectScatter\',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: \'render\',
rippleEffect: {
brushType: \'stroke\'
},
hoverAnimation: true,
label: {
normal: {
formatter: \'{b}\',
position: \'right\',
show: true
}
},
itemStyle: {
normal: {
color: \'#f4e925\',
shadowBlur: 10,
shadowColor: \'#333\'
}
},
zlevel: 1
}]
};
}
});
  • hideOnMoving=false 设置地图移动过程中不隐藏 echarts 效果,hideOnZooming=false 设置地图缩放过程中不隐藏 echarts 效果,stopEvent =false 设置不阻止echarts 事件

更多详情见下面链接文章

GIS之家小专栏此文章:openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)

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

分类:

技术点:

相关文章: