EChart中使用地图方式总结(转载)

EChart中使用地图方式总结

      最近在仿照EChart公交线路方向示例,开发表示排水网和污水网流向地图,同时地图上需要叠加排放口、污染源、污水处理厂等要素。由于之前没有用过EChart,尤其是EChart的地图功能,琢磨尝试很久,终于弄明白了地图上面、线及点要素的加载及显示方法,总结如下。

      1、底图的加载

      一般地图都需要底图,EChart中底图的数据来源,有三种方式,分别如下:

(1)百度地图。需要引入百度地图API,具体使用方法参见官方示例(http://echarts.baidu.com/examples/editor.html?c=lines-bmap-effect,如下左图),此时series中引入的其他要素层中,coordinateSystem 的值必须设置为 'bmap',也就是其它层的数据,以bmap地图作为空间坐标系统的参照,如下右图:

                         

(2)json及registerMap的方式。这种方式底图数据以json(geojson)格式存储,具体geojson的格式(参考http://geojson.org/)及转换为geojson的方法(可采用Mapshaper,使用参考http://blog.csdn.net/column/details/14830.html)自行了解。在获取json格式的数据后,采用registerMap进行手动注册,给地图取一个名字。EChart中使用的方法,可参考官方示例(http://echarts.baidu.com/examples/editor.html?c=map-usa),series中的map为用户自己注册的地图,要点如下。注意问题:registerMap只能注册面状要素的json数据,对点、线无效!

                 

(3)<script及geo方式。这种方式的底图数据,可以直接用 script 标签引入包含数据的 js 文件,引入后会自动注册地图名字和数据,如<script src="../../data/china.js"></script>,引入后EChart自动对地图进行注册,可参考EChart官方示例(http://www.echartsjs.com/gallery/editor.html?c=scatter-map),使用要点如下。注意问题:series中的coordinateSystem必须设置为 geo,即采用的坐标系统参考与geo中定义的地图保持一致;geo方式也只适用于面状地图数据,对点和线要素数据无效!

            

2、线要素的加载

线要素的加载,一般通过series中type设置为 line 的方式实现(具体参考http://echarts.baidu.com/option.html#series-lines),参数coordinateSystem设置为bmap(百度地图)、geo或registerMap手动注册的地图名称。

3、点要素的加载

点要素的加载,一般通过series中type设置为scatter或effectScatter(具体参考http://echarts.baidu.com/option.html#series-scatter和http://echarts.baidu.com/option.html#series-effectScatter),参数coordinateSystem设置为bmap(百度地图)、geo或registerMap手动注册的地图名称。

以上是对EChart中使用地图的总结,不恰当的地方还请及时指出,谢谢!

 

转载于:https://www.cnblogs.com/hao-1234-1234/p/9292996.html

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

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

相关文章

android mvp模式

越来越多人讨论mvp模式&#xff0c;mvp在android应用开发中获得更多的重视&#xff0c;这里说一下对MVP的简单了解。 什么是 MVP? MVP模式使逻辑从视图层分开&#xff0c;目的是我们在屏幕上怎么表现&#xff0c;和界面如何工作的所有事情就完全分开了。 View显示数据&…

Node.js REPL(交互式解释器)

2019独角兽企业重金招聘Python工程师标准>>> Node.js REPL(交互式解释器) Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境&#xff0c;类似 Window 系统的终端或 Unix/Linux shell&#xff0c;我们可以在终端中输入命令&#xff0c;并接收系统…

用python进行营销分析_用python进行covid 19分析

用python进行营销分析Python is a highly powerful general purpose programming language which can be easily learned and provides data scientists a wide variety of tools and packages. Amid this pandemic period, I decided to do an analysis on this novel coronav…

Alpha冲刺第二天

Alpha第二天 1.团队成员 郑西坤 031602542 &#xff08;队长&#xff09; 陈俊杰 031602504陈顺兴 031602505张胜男 031602540廖钰萍 031602323雷光游 031602319苏芳锃 0316023302.项目燃尽图 3.项目进展 时间工作内容11月18日UI设计、初步架构搭建11月19日UI设计、服务器的进一…

水文分析提取河网_基于图的河网段地理信息分析排序算法

水文分析提取河网The topic of this article is the application of information technologies in environmental science, namely, in hydrology. Below is a description of the algorithm for ranking rivers and the plugin we implemented for the open-source geographic…

请不要更多的基本情节

“If I see one more basic blue bar plot…”“如果我再看到一个基本的蓝色条形图……” After completing the first module in my studies at Flatiron School NYC, I started playing with plot customizations and design using Seaborn and Matplotlib. Much like doodl…

Powershell-获取DHCP地址租用信息

需求&#xff1a;业务需要获取现阶段DHCP服务器所有地址租用信息。 1.首先查看DHCP相关帮助信息&#xff1a;2.确定执行命令并获取相关帮助信息&#xff1a;help Get-DhcpServerv4Scope 名称 Get-DhcpServerv4Scope 语法 Get-DhcpServerv4Scope [[-ScopeId] <ipaddress[]>…

python 交互式流程图_使用Python创建漂亮的交互式和弦图

python 交互式流程图Python中的数据可视化 (Data Visualization in Python) R vs Python is a constant tussle when it comes to what is the best language, according to data scientists. Though each language has it’s strengths, R, in my opinion has one cutting-edg…

机器学习解决什么问题_机器学习帮助解决水危机

机器学习解决什么问题According to Water.org and Lifewater International, out of 57 million people in Tanzania, 25 million do not have access to safe water. Women and children must travel each day multiple times to gather water when the safety of that water …

Viewport3D 类Viewport3D 类Viewport3D 类

.NET Framework 类库Viewport3D 类更新&#xff1a;2007 年 11 月为三维可视内容提供呈现图面。命名空间&#xff1a; System.Windows.Controls程序集&#xff1a; PresentationFramework&#xff08;在 PresentationFramework.dll 中&#xff09;用于 XAML 的 XMLNS&#xf…

网络浏览器如何工作

Behind the scenes of modern Web Browsers现代Web浏览器的幕后花絮 The Web Browser is inarguably the most common portal for users to access the web. The advancement of the web browsers (through the series of history) has led many traditional “thick clients”…

让自己的头脑极度开放

为什么80%的码农都做不了架构师&#xff1f;>>> 一. 头脑封闭和头脑开放 头脑封闭 你是否经常有这样的经历&#xff0c;在一次会议或者在一次小组讨论时&#xff0c;当你提出一个观点而被别人否定时&#xff0c;你非常急迫地去反驳别人&#xff0c;从而捍卫自己的尊…

简介DOTNET 编译原理 简介DOTNET 编译原理 简介DOTNET 编译原理

简介DOTNET 编译原理 相信大家都使用过 Dotnet &#xff0c;可能还有不少高手。不过我还要讲讲Dotnet的基础知识&#xff0c;Dotnet的编译原理。 Dotnet是一种建立在虚拟机上执行的语言&#xff0c;它直接生成 MSIL 的中间语言&#xff0c;再由DotNet编译器 JIT 解释映象为本机…

RecyclerView详细了解

关于RecyclerView大家都不陌生了&#xff0c;它的使用也越来越受欢迎&#xff0c;现在总体了解一下RecyclerView的作用&#xff0c;为什么会有RecyclerView呢&#xff0c;我用ListView也能干所有的事情啊&#xff0c;尺有所短&#xff0c;寸有所长&#xff0c;先来看看Recycler…

案例与案例之间的非常规排版

In 1929 the Cond Nast publishing group brought Russian-born Mehemed Fehmy Agha—who had been working for the German edition of Vogue magazine—to America as art director for House & Garden, Vanity Fair, and the senior edition of Vogue.1929年&#xff0c…

熊猫分发_熊猫新手:第二部分

熊猫分发This article is a continuation of a previous article which kick-started the journey to learning Python for data analysis. You can check out the previous article here: Pandas for Newbies: An Introduction Part I.本文是上一篇文章的延续&#xff0c;该文…

浅析微信支付:申请退款、退款回调接口、查询退款

本文是【浅析微信支付】系列文章的第八篇&#xff0c;主要讲解商户如何处理微信申请退款、退款回调、查询退款接口&#xff0c;其中有一些坑的地方&#xff0c;会着重强调。 浅析微信支付系列已经更新七篇了哟&#xff5e;&#xff0c;没有看过的朋友们可以看一下哦。 浅析微信…

view工作原理-计算视图大小的过程(onMeasure)

view的视图有两种情况&#xff1a; 内容型视图&#xff1a;由视图的内容决定其大小。图形型视图&#xff1a;父视图为view动态调整大小。 ### measure的本质 把视图布局使用的“相对值”转化成具体值的过程&#xff0c;即把WRAP_CONTENT,MATCH_PARENT转化为具体的值。 measur…

基于Redis实现分布式锁实战

背景在很多互联网产品应用中&#xff0c;有些场景需要加锁处理&#xff0c;比如&#xff1a;秒杀&#xff0c;全局递增ID&#xff0c;楼层生成等等。大部分的解决方案是基于DB实现的&#xff0c;Redis为单进程单线程模式&#xff0c;采用队列模式将并发访问变成串行访问&#x…

数据分析 绩效_如何在绩效改善中使用数据分析

数据分析 绩效Imagine you need to do a bank transaction, but the website is so slow. The page takes so much time to load, all you can see is a blue circle.想象您需要进行银行交易&#xff0c;但是网站是如此缓慢。 该页面需要花费很多时间来加载&#xff0c;您只能看…