前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
内容概览
1.基于 openlayers4 结合 echarts4 实现散点图
2.源代码 demo 下载
效果图如下:
- 地图加载代码如下:
/** * 地图创建初始化 */ var map = new ol.Map({ target: \'map\', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: \'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline\' + \'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}\' }) }) ], view: new ol.View({ center: [113.53450137499999, 34.44104525], projection: \'EPSG:4326\', zoom: 6 }) });
- echarts数据源设置:
var res = { "locations": [ { "name": "海门", "value": 9 }, { "name": "鄂尔多斯", "value": 12 }, { "name": "招远", "value": 12 } …… ], "coordinates": { "海门": [121.15, 31.89], "鄂尔多斯": [109.781327, 39.608266], …… } } 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之家小专栏此文章:openlayers4 入门开发系列结合 echarts4 实现散点图(附源码下载)
文章提供源码,对本专栏感兴趣的话,可以关注一波