EChart中使用地图方式总结

2018年02月06日 22:18:57

来源:https://blog.csdn.net/shaxiaozilove/article/details/79274772

最近在仿照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

EChart中使用地图方式总结(转载)相关推荐

  1. EChart中使用地图方式总结

    https://blog.csdn.net/shaxiaozilove/article/details/79274772

  2. eChart 中 柱状图、地图、AntDesign 的 滚动条表格、highChart 的 (venn) 韦恩图

    一.echarts 的准备工作 1.下载依赖包 // 项目中下载 依赖 npm install echarts -s 2.引入配置 // 1. main.js 中引入 全局使用 (通过this.$ec ...

  3. Vue中使用echart实现中国地图统计图

    Vue中使用echart实现中国地图统计图 前言 Echart版本的确定 全局导入或按需导入 在对应的页面调用echart 前后端数据交互注意事项 前言 在Vue2.x开发中,为了更好地展示某一个时间 ...

  4. 关于ASP.NET 中站点地图sitemap 的使用【转xugang】

    关于ASP.NET 中站点地图sitemap 的使用 SiteMapPath 控件简介 SiteMapPath 控件是一种站点导航控件,反映了SiteMap 对象提供的数据.它提供了一种定位站点的方式 ...

  5. [转]wxODBC(wxWidgets)中使用驱动程序方式打开数据库

    wxODBC(wxWidgets)中使用驱动程序方式打开数据库 wxWidgets的文档中都是使用在控制面板/数据源中设定DSN来创建ODBC连接.但是实际上很多小型的应用,只是使用本机的一个Acce ...

  6. CMRNet++:在激光雷达地图中与地图和相机无关的单目视觉定位

    点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 编辑丨当SLAM遇见小王同学 声明: 本文只是个人学习记录,侵权可删.论文版权与著作权等全归原作者所有 ...

  7. 中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载

    小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...

  8. 再议C#方法中的反射方式和委托方式

    再议C#方法中的反射方式和委托方式 我们将要谈到的是C#方法中的反射方式和委托方式,文中还将给出具体代码,以方便大家测试和实践. AD: 在开发过程中对静态方法的调用是通过类型名后面加个点而后是调用方 ...

  9. 【转】tf中的padding方式SAME和VALID有什么区别?

    原文链接:tf中的padding方式SAME和VALID有什么区别? 转载于:https://www.cnblogs.com/exciting/p/11363489.html

最新文章

  1. JS作用域相关知识(#精)
  2. 30多岁程序员老W,无奈选择转行!问题出在哪?
  3. CSS-解决苹果点击高亮、安卓select灰色背景(select下拉框在IOS中背景变黑、出现阴影问题)
  4. C#-JSON的序列化和反序列化
  5. 学英语(3)---常用语英语
  6. 英特尔显示器音频_骁龙865、全球最快32寸显示器、高达联名路由……这场发布会为电竞玩家带来多少高科技?...
  7. SGU 201 Non Absorbing DFA (DP)
  8. Firefox 3中的快捷键!
  9. 瞧瞧,这样的代码才叫 Pythonic
  10. 高级函数技巧-函数柯里化
  11. SpringBoot 下 Mybatis 的缓存
  12. Mac python入门:安装python并新建python项目
  13. 如何获取微信用户openid
  14. 计算机 无法连接wifi网络地址,电脑设置wifi但无法连接网络怎么办
  15. Si24R2F+超低功耗高性能2.4GHz无线射频NTC测温单发射芯片 兼容Si24R2E
  16. 笔记本计算机声音小,笔记本没有声音,小编教你笔记本没有声音怎么修复
  17. Windows 10 系统更新后 vagrant up 报错:Error opening VBoxDrvStub: STATUS_OBJECT_NAME_NOT_FOUND
  18. Leco题目:两数之和
  19. 研究表明:漂亮的配图会让数据/结果看起更可靠
  20. 2019.12.31罗振宇2020年跨年演讲《时间的朋友》精华全文版本——思维决定一个人的上限,能力决定一个人的下限

热门文章

  1. php curl 采集文件,curl获取远程文件内容
  2. html click事件 参数,vue 实现click同时传入事件对象和自定义参数
  3. linux人脸识别视频推流,RTMP推流协议视频智能分析/人脸识别/直播点播平台EasyDSS接口调用注意事项介绍...
  4. access month函数用法_学会了这7个EXCEL日期函数技巧,老板再让你加班,你找我!...
  5. 新东方mti百科知识pdf_20南航翻硕mti初试417上岸经验贴
  6. tensorflow http调用_《TensorFlow 内核剖析》笔记——系统架构
  7. 在网络中配置思科交换机
  8. tolowercase_Java String toLowerCase()方法与示例
  9. 弗林的计算机体系结构分类
  10. 十四、Canny边缘提取