openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言
openlayers5-webpack 入门开发系列环境知识点了解:
- node 安装包下载
webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址- webpack 配置介绍文档
详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学- vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错
- openlayers5 api文档介绍,详细介绍 openlayers5 每个类的函数以及属性等等
- openlayers5 在线例子
内容概览
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 实现散点图(附源码下载)
文章提供源码,对本专栏感兴趣的话,可以关注一波
openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)的更多相关文章
- openlayers4 入门开发系列结合 echarts4 实现统计图(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers5-webpack 入门开发系列一初探篇(附源码下载)
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- cesium-webpack 入门开发系列一初探篇(附源码下载)
前言 cesium-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 we ...
- leaflet-webpack 入门开发系列一初探篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- openlayers4 入门开发系列之热力图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之图层控制(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列八聚合效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- egret Tiledmap编写障碍物的思路
egret Tiledmap编写障碍物的思路 获取控制对象下一刻移动的坐标,将其转换成瓦片坐标,如果getTileGIDAt(根据瓦片坐标获取瓦片id)的值不为0,说明对象将要移动的位置有障碍物,不做 ...
- Ansible之常用模块(二)
1.hostname:此模块的主要作用是管理远端节点主机名 模块帮助: root@localhost ~]# ansible-doc -s hostname - name: Manage hostna ...
- C++程序员学Python
目录 C++程序员学Python 第二章.变量和数据类型 1.注释语句前用#: 2.常用于大小写函数: 第三章.列表 1.列表简述 2.修改,增加,插入,删除列表元素 第四章操作列表 1.遍历 2.创 ...
- thinkphp volist标签中加if判断的写法
<if condition="$vo['devstatus'] eq 1">在线<else /> 离线</if> IF标签用法 <if c ...
- 张孝祥java高新技术 --- jkd1.5 新特性 -- 精华总结
1. 抽象方法的使用 如果一个方法中大量出现if语句, 那么, 就应该考虑使用抽象来处理. 如下例: package com.lxl; public class Weekend { //周日 publ ...
- Centos内核参数优化
关于内核参数优化 net.ipv4.tcp_max_tw_buckets = 6000 net.ipv4.ip_local_port_range = 1024 65000 net.ipv4.tcp_ ...
- 使用C#+FFmpeg+DirectX+dxva2硬件解码播放h264流
本文门槛较高,因此行文看起来会乱一些,如果你看到某处能会心一笑请马上联系我开始摆龙门阵 如果你跟随这篇文章实现了播放器,那你会得到一个高效率,低cpu占用(单路720p视频解码播放占用1%左右cpu) ...
- ZeroC ICE的远程调用框架 ThreadPool
ThreadPool提供Reactor/Proactor服务,并且强偶合了Reactor(反应器)/Proactor(前摄器).不同于Reactor/Proactor使用线程池 进行事件处理的设计.如 ...
- 【原】android【手机】屏幕适配解决方案,完美适配适配hdpi,xhdpi,xxhdpi的做法。
1.先说要怎么做,后面在慢慢讲解: 2.现在来讲解为什么要放这三套: 这三套其实按内容来说就两种,为什么这两种可以适配hdpi,xhdpi,xxhdpi呢? 那么两种类型的dimens就可以了,为什么 ...
- Java工作流引擎全局变量的介绍
关键词:工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流bpm工作流系统 java工作流主流框架 自定义工作流引擎 在系统中有很多的地方需要用到表达式的地方,这些 ...