Echarts 地理信息可视化：基于地图显示坐标点信息

Ecahrts 基于地理信息的可视化

Echarts 是一款基于js的交互式图表工具
这一模型可用于显示气候、地理、人流等各种信息。

在这里插入图片描述

1、环境

  • 在线调试echarts的功能可以在官网，选择实例下任意一个点开：

在这里插入图片描述
然后在左侧的编辑框中即可编辑(其中包含了自动渲染脚本，十分适合入门使用)：
在这里插入图片描述

  • 或者也可以下载到本地按照普通的js包调试, 这里是对应api教程。

2、地理信息绘制

首先需要明确要显示的地理位置和对应的物理量。

//显示地理信息
//主要参考了一下demo：
//http://www.echartsjs.com/examples/editor.html?c=effectScatter-bmap
//http://www.echartsjs.com/examples/editor.html?c=map-parallel-prices
//http://www.echartsjs.com/examples/editor.html?c=line-simple 
//http://www.echartsjs.com/examples/editor.html?c=pie-legend//首先先定义需要显示对应信息的位置坐标，按照[纬度,精度]的格式
var geoCoordMap = {'位置1':[90.9180416971,41.0807155340],'位置2':[123.4965120599,51.0206466741],'位置3':[100.4728967514,26.1734892363],'位置4':[121.5121844054,31.2106872661],'位置5':[111.50148,31.2458353752],'位置6':[111.50148,24.2458353752],//ref:http://www.gpsspg.com/maps.htm  //这里可以得到对应地点的gps经纬度，也可批量查询//http://lbsyun.baidu.com/index.php?title=jspopular/guide/conflux //http://lbsyun.baidu.com/custom/};
//随后定义每个位置需要显示的量的值
var data = [{name: '位置1', value: 19},{name: '位置2', value: 20},{name: '位置3', value: 32},{name: '位置4', value: 24},{name: '位置5', value: 46},{name: '位置6', value: 30},
];

随后需要对数据进行处理，将坐标信息和对应物理量的值合在一起。


var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];    //首先根据data中的name作为键值读入地理坐标//var rjj1 = data[i].value;if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)   //随后将地理坐标与对应信息值衔接起来//成为了 [name 经度 纬度 value]的形式});}}//console.log(res)return res;
};

接下来就是对于echarts 对象具体值的设置了，全局选项option

option = {title: {text: '地理信息显示  - 实时',    //整个图标的标题显示subtext: 'data from lalala',    //子标题显示sublink: 'http://somewhere',	//子标题超链接left: 'center',                 //标题位置 可以left center righttextStyle : {color: '#2f2f2f',	//	定义字体颜色fontFamily:'STKaiti',  //定义字体//https://www.zhangxinxu.com/wordpress/2017/03/css-font-family-chinese-english///这里可以找到各种字体对应的英文fontSize:'30',		//定义字体大小}},tooltip : {trigger: 'item'    //提示框},//这部分用来绘制每一个点的信息随时间的变化，叠加在地图上//for time serial lines  xAxis: {type: 'category',data: ['spring', 'summer', 'autumn', 'Winter'],    //x轴的各个时序指标},yAxis: {type: 'value',  //y值为数值splitLine:{show: false},//去除网格线},legend: {data:['位置1','位置2'],    //所要画的位置，作为画时序线的系列y: 'bottom',               //legend的y位置top bottom right leftx: 'right',               //legend的x位置orient: 'vertical',       //图例的排序，垂直或者水平top: '80%',				//距离顶端的百分比，也可以用像素来做大小left: '5%'              //图例距离左端的百分比},grid: {top: '80%',bottom:'5%', left: '15%',right: '50%',//坐标轴距离上下左右的百分比opacity: '0.1'   //透明度},Opacity: 0.2,//for time//画时序图的坐标轴定义结束//******************************************************************////百度地图api的设置bmap: {center: [111.43066322374, 31.090018034923],  //初始化中心点坐标zoom: 5,   			//放大级别，越大越细致roam: true,		//是否可以漫游拖动mapStyle: {    //地图各个指标的json定义//参考：//http://lbsyun.baidu.com/custom/styleJson: [{'featureType': 'water',  //水域'elementType': 'all','stylers': {'color': 'lightb'  //颜色//'color': '1773c3'}}, {'featureType': 'land',  //陆地'elementType': 'all','stylers': {'color': '#f3f3f3'//'color': '#091632'}}, {'featureType': 'railway',  //铁路'elementType': 'all','stylers': {'visibility': 'off'  //不显示}}, {'featureType': 'highway',  //高速路'elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'highway',  //高速路标签'elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'arterial',  //道路'elementType': 'geometry','stylers': {'visibility': 'off'}}, {'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#fefefe'}}, {'featureType': 'poi',  //point of interesting'elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'green',   //绿地'elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'subway',  //地铁'elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'manmade',   //人造'elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'local','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'arterial',  'elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'district',  //行政区标签'elementType': 'all','stylers': {'color': '#eeeeee'}}, {'featureType': 'building',  //建筑'elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'label',   	//标签字体填充'elementType': 'labels.text.fill','stylers': {'color': '#999999'}}]//更多属性请参考：http://lbsyun.baidu.com/custom/}},//下面定义各个系列列表 子图画图的过程series : [{name: '全部',   //首先定义全部点用散点图画出来type: 'scatter',coordinateSystem: 'bmap',   //以地图为底图坐标data: convertData(data),  //数据来自于先前定义的函数symbolSize: function (val) {return val[2] / 2;  //用值的大小来调整点的大小 //[name：'位置'，value：[经度0 纬度 value]]的形式，其中value为第二维量},label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: 'green'   //点的颜色}}},{name: 'Top 3',  //定义一个排序显示，显示值最大前三个type: 'effectScatter',  //特效散点图显示coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 3)),   //拍出最大的三个值0,1,2  //从零开始是且为左包含symbolSize: function (val) {return val[2]/2;  },showEffectOn: 'render',rippleEffect: {brushType: 'stroke',    //渲染的形式，还可选fillperiod:5,               //动画的时间。scale:3.5,              //大小},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#fb3c3c',shadowBlur: 10,shadowColor: '#db1c1c'}},encode: {                    //可以定义 data 的哪个维度被编码成什么tooltip: [2],               // 表示维度 2 会在 tooltip 中显示，也可以写入多维显示//label: 0                 // 表示 label 使用维度 0。},cursor:"help",             //光标类型，http://www.w3school.com.cn/cssref/pr_class_cursor.aspzlevel: 1},{name: 'Top 4-6',   //后续4-5名的显示type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(3, 7)),   symbolSize: function (val) {return val[2] / 2;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke',scale:3.5,},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#1f6ed4',shadowBlur: 7,shadowColor: '#0f5ec4'}},encode: {                    //可以定义 data 的哪个维度被编码成什么tooltip: [2],              // 表示维度 2会在 tooltip 中显示。//label: 2                 // 表示 label 使用维度 2。},cursor:"help",zlevel: 1},//ref https://blog.csdn.net/luanpeng825485697/article/details/76832199//饼图统计{name: '汇总',type: 'pie', //饼图类型coordinateSystem: 'bmap',  //以地图为坐标系center: ['85%', '20%'],    //位置radius: '30%',  //饼的大小//title: 'daf',data:[{name: '一级', value: 1},{name: '二级', value: 3},{name: '三级', value: 5},{name: '四级', value: 7},{name: '五级', value: 3},],itemStyle: {opacity:0.7,  //透明度},},//add time-serial chart{name:'位置1',//coordinateSystem: 'bmap',data: [15, 32, 21, 8],  //位置1的时序变化信息type: 'line',smooth: true   //平滑画线},{name:'位置2',//coordinateSystem: 'bmap',data: [7, 60, 30, 24],type: 'line',smooth: true},        ]
};
//更多特性可查看配置项

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/57682.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据可视化图表-散点图（Scatter plot）

数据可视化图表-散点图（Scatter plot）

本文是接着这篇内容的&#xff1a;https://blog.csdn.net/Cassiel60/article/details/88350442 散点图是用于研究两个变量之间关系的经典的和基本的图表。 如果数据中有多个组&#xff0c;则可能需要以不同颜色可视化每个组。 在 matplotlib 中&#xff0c;您可以使用 plt.sca…
阅读更多...
实战PyQt5: 155-QChart图表之极坐标图表

实战PyQt5: 155-QChart图表之极坐标图表

在前面的图表中&#xff0c;我们使用的坐标系都是直角坐标系(也称笛卡尔坐标系), 但是有些数据序列&#xff0c;使用极坐标系来显示更合理(比如常见的雷达图)。QChart中&#xff0c;提供QPolarChart来实现用极坐标系显示的图表。 QPolarChart QPolarChart在极坐标图中显示数据…
阅读更多...
2022-04-22 工作记录--Highcharts-图表点击事件 + 图例点击事件 + 图例格式化后的回调

2022-04-22 工作记录--Highcharts-图表点击事件 + 图例点击事件 + 图例格式化后的回调

Highcharts-图表点击事件 图例点击事件 图例格式化后的回调 一、前言 看似很简单的问题&#xff0c;其实里面有很多细节&#xff0c;所以做个笔记哟~❀ 如下图&#xff1a;上面是图表&#xff0c;下面是图例哟☺️ 二、官方文档 https://www.highcharts.com.cn/docs 三、…
阅读更多...
XCL-Charts图表库简要教程及常见问题

XCL-Charts图表库简要教程及常见问题

这个Andriod图表库项目从开始至现在&#xff0c;热情消耗几近殆尽。还好已基本实现我想做的那些东西。趁还剩下点兴趣&#xff0c;把一些点非常简单的归纳一下。 所支持的图表类型: 基类 图表名称 BarChart 横/竖向柱形图及背向式柱…
阅读更多...
使用Google Chart API 创建实时图表

使用Google Chart API 创建实时图表

实时图表可以实时显示数据。这意味着数据将永久更新以始终显示当前图表。要创建实时图表&#xff0c;我们使用JavaScript和Google Chart API。 这些实时图表通常用于仪表板中&#xff0c;以显示例如温度或价格的变化情况。应用领域多样&#xff0c;它们看起来确实不错。你自己看…
阅读更多...
利用ARCGIS实现图片与excel中坐标点的匹配并绘图

利用ARCGIS实现图片与excel中坐标点的匹配并绘图

一、背景 本次的实验完成的是坐标点文件与图片的匹配&#xff0c;已有的数据分别是点的坐标excel文件以及区域图片&#xff0c;来实现区域的绘制。 二、步骤 1、首先将坐标点excel文件导入ARCGIS中进行展点&#xff0c;数据的格式如下&#xff1a; 2、点击ARCGIS界面中的文件…
阅读更多...
chatgpt赋能Python-python_plot坐标轴

chatgpt赋能Python-python_plot坐标轴

Python绘图库中坐标轴的设置 介绍 Python是一种简单易学&#xff0c;功能强大的编程语言。它被广泛用于数据科学和可视化领域。Python绘图库中的坐标轴设置可以让我们更好地展示数据&#xff0c;让我们更轻松地理解数据。本篇文章将介绍Python绘图库中坐标轴设置的方法和技巧…
阅读更多...
Unity数据可视化图表插件XCharts（折线图、柱状图、饼图、雷达图、散点图、热力图、热力图、仪表盘、环形图、极坐标、水位图等等）

Unity数据可视化图表插件XCharts（折线图、柱状图、饼图、雷达图、散点图、热力图、热力图、仪表盘、环形图、极坐标、水位图等等）

文章目录 一、前言二、Unity数据可视化图表插件&#xff1a;XCharts1、运行效果2、文档教程 三、结束语 一、前言 点关注不迷路&#xff0c;持续输出Unity干货文章。 嗨&#xff0c;大家好&#xff0c;我是新发。 今天&#xff0c;我在GitHub上看到一个屌炸天的Unity插件&…
阅读更多...
pyecharts0.5.x制作含地图的数据看板

pyecharts0.5.x制作含地图的数据看板

引言 pyecharts作为Python的数据可视化包&#xff0c;其强大的功能不言而喻&#xff0c;Python Echart&#xff0c;想想就觉得牛叉。目前pyecharts有两个大的版本&#xff0c;一个是0.5.x版本的&#xff0c;一个是1.0以后版本&#xff0c;而且这两个版本差别很大。如果是有的…
阅读更多...
antv/g2图表tooltip自定义并展示坐标之外的数据

antv/g2图表tooltip自定义并展示坐标之外的数据

首先使用itemTpl自定义tooltip 效果是这样的tooltip展示坐标之外的数据 感觉Antv文档很不详细&#xff0c;写这块时找了好久才找到方法&#xff0c;现在记一下&#xff0c;方便今后的观看和其他遇到此问题的同学解决办法。 itemTpl this.chart.tooltip({showCrosshairs: true,…
阅读更多...
pyecharts源码解读（13）图表类包charts之组合图表：直角坐标系（网格布局）Grid

pyecharts源码解读（13）图表类包charts之组合图表：直角坐标系（网格布局）Grid

当前pyecharts的版本为1.9.0。 概述 pyecharts/charts/composite_charts/包中的四个模块分别定义了组合图表类&#xff0c;其中pyecharts/charts/composite_charts/grid.py模块只定义了网格布局类Grid。 Grid类继承自图表基类Base&#xff0c;作用为在一个echarts实例中利用…
阅读更多...
宇宙中大数字

宇宙中大数字

1、高德纳箭头 2、葛力函数 如果脑子里面装一个葛里恒数&#xff0c;脑子就成了黑洞了。 后来人们研究出tree3
阅读更多...
CCF-CSP 小中大 C语言

CCF-CSP 小中大 C语言

时间限制&#xff1a;0.1s 空间限制&#xff1a;512.0MB #include<stdio.h> int main() { int n,max,min,mid,midd,i; scanf("%d",&n); int a[n]; for(i0;i<n;i) {scanf("%d",&a[i]);} //输入 if(a[0]>a[n-1]){maxa[0];mina[n-1];} e…
阅读更多...
redis中大Value问题的解决

redis中大Value问题的解决

我们日常在使用redis的时候, 有时会碰到大Value的问题, 超级大的一个Value存到redis中去, 这样其实不好, 我们可以把value进行压缩. 下面我们使用java自带的压缩, 对字符串进行压缩. /*** 使用gzip压缩字符串** param originString 要压缩的字符串* return 压缩后的字符串*/…
阅读更多...
java中大素数生成算法

java中大素数生成算法

目前的公开密钥 算法大部分基于大整数分解、有限域上的离散对数问题和椭 圆曲线上的离散对数问题&#xff0c;这些数学难题的构建大部分都需 要生成一种超大的素数&#xff0c;尤其在经典的RSA算法中&#xff0c;生成的素数的质量对系统的安全性有很大的影响。 1.原理 费马小…
阅读更多...
解决js中大数的问题

解决js中大数的问题

大数的理解: 就是由于数字太大了,然后js解析不了,不认识. 就比如实际生活中,在双11的时候,我们知道淘宝一夜之间总购买量肯定是一个很大很大的金额,当我们前端碰到一个非常大的数字的时候,js可能会解析不了. JS中的安全数字: > Number.MAX_SAFE_INTEGER 可以查看js中的…
阅读更多...
CSP 201903-1 小中大

CSP 201903-1 小中大

题目链接&#xff1a; 计算机软件能力认证考试系统http://118.190.20.162/view.page?gpidT89 【分析】主要学一下java的四舍五入&#xff0c;String,format("%.f", double&#xff09;&#xff1b; import java.util.Arrays; import java.util.Scanner;public cla…
阅读更多...
CSP：小中大

CSP：小中大

试题编号&#xff1a;201903-1 试题名称&#xff1a;小中大 时间限制&#xff1a;1.0s 内存限制&#xff1a;512.0MB 思路&#xff1a;题目很简单&#xff0c;依次输出最大值&#xff0c;中位数&#xff0c;最小值。输出中位数的时候很神奇的出错。。。费了好半天事才改对。…
阅读更多...
ccf小中大

ccf小中大

试题编号&#xff1a;201903-1试题名称&#xff1a;小中大时间限制&#xff1a;1.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 思路很简单&#xff0c;但是有很多细节要考虑 如果中位数是小数&#xff0c;则要四舍五入&#xff0c;保留一位小数 否则直接输出整…
阅读更多...
Spring中大事务拆分方案

Spring中大事务拆分方案

Spring中大事务拆分方案 模块设计的时序图 启动流程 激活事件 完成事件 长事务造成的影响 由于现在事件的完成及后续激活都在一个事务中&#xff0c;比如完成融资申请事件之后会去激活批次启动签约&#xff0c;前置协议&#xff0c;资质认证等事件&#xff0c;这些操作…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023