openlayers4 入门开发系列结合 echarts4 实现散点图（附源码下载）
2024-10-09 18:25:17
前言
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 实现散点图(附源码下载)
文章提供源码，对本专栏感兴趣的话，可以关注一波
最新文章
- 03-树1 树的同构 （C语言链表实现）
- A记录、CNAME、MX记录、NS记录
- 数据结构与算法(1)支线任务8——Find Median from Data Stream
- 我今天坑了我们公司的IT程序猿。。。
- tomcat startup.sh提示java.lang.OutOfMemoryError: PermGen space
- Android应用程序线程消息循环模型分析
- Review1-11
- start_kernel——boot_init_stack_canary
- [C++] WinAES问题
- asp.net MVC下使用rest
- 用video标签流式加载
- 如何设置Oracle数据库客户端字符集以及系统中的NLS_LANG环境变量
- Android文件的流操作工具类
- HR_Two Strings
- 退回win7后无法上网 的解决方法
- Linux背背背（3）
- (转)android import library switch语句报错case expressions must be constant expressions
- Shell脚本 | 截取包名
- openstack学习-创建一台云主机（七）
- EL表达式和标签