前言
内容概览
效果图如下:
const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ url: 'http://cache1./arcgis/rest/services/ChinaOnline' + 'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}' }) }) ], view: new View({ center: [113.53450137499999, 34.44104525], projection: 'EPSG:4326', zoom: 6 }) });
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 }] }; } });
更多详情见下面链接文章: GIS之家小专栏此文章:openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载) 文章提供源码,对本专栏感兴趣的话,可以关注一波 |
|