Echarts 地图概述及二维地图初始化

2024-04-29 06:38:58

Echarts 可以绘制中国、各省及世界地图，包括二维地图和三维地图，下面就如何生成地图做概要介绍。

1 地图功能概述

Echarts 中，如果需要将区域数据可视化，使用 series 中的地图组件，如果需要在地图中标注地理位置信息，就要使用geo，即地理坐标系组件。

在二维地图中，series 中的地图组件，配合visualMap 组件可用于展示不同区域的人口、经济发展、能源分布等数据，可采用不同颜色将数据大小分级，配合图例将区域数据可视化。地理坐标系组件则支持在地图上标注地理坐标，并在地理坐标系上绘制散点图，线集。

Echarts还支持同时使用series 中的地图组件和地理坐标系组件，这时地图组件可采用geo组件中的数据，并控制geo区域的颜色。这就实现了在地图中同时展现区域数据和地理位置信息。

三维地图中，同样区分区域数据和地理位置信息数据展示，series中的map3D组件用于展示区域数据，geo3D用于展示地理位置信息。相比于二维的地图，三维地图首先实现了立体化，其次还能对每个区域设置不同的高度，这个高度能够用来展示数据大小。

2 引入包方法

二维地图需只需要引入echarts.min.js，三维地图则需要在引入echarts.min.js的基础上再引入一个echarts-gl.min.js。

多页面中，标签引入：

<script src="lib/echa

Echarts 地图概述及二维地图初始化相关推荐

skyline三维地图与arcgis二维地图联动
无论是二维控制三维,还是三维控制二维,都是通过事件来触发,只不过各自的事件有所区别就是了.这里所说的二维,是指arcgis for jsapi,三维指skyline,都是前端的内容. 其中二维控制三维 ...
用字节数组存放二维地图数据
一二维地图数据内容在RPG的大地图中,我们往往会分割成很多小块(逻辑上),用于玩家行走,比如使用A星寻路等等,就需要的二维地图数据.一般情况,存放的是数值,主要是指每个格子里的数值,这里的数值是指 ...
maptalks+three.js+vue webpack项目实现二维地图上贴三维模型
我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_ 最终效果如图:(地图上添加一个"三维地图"的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框) 以下都在已 ...
寻路优化（一）——二维地图上A*启发函数的设计探索
工作中需要优化A*算法,研究了一天,最后取得了不错的效果.看网上的朋友还没有相关的研究,特此记录一下.有错误欢迎大家批评指正.如需转载请注明出处,http://www.cnblogs.com/Leon ...
UE4 二维地图的缩放与拖拽操作
这里写自定义目录标题 UE4 二维地图的缩放与拖拽操作拖拽和缩放基础搭建添加小图标地图缩放地图拖拽实现部分效果展示小图标的重合显示效果展示 UE4 二维地图的缩放与拖拽操作纯蓝图实 ...
01 创建一个二维地图
随着3.X系列版本新功能的不再增加,终于开始向4.X版本转变,其实说实话还是蛮不想转变的,因为相对于3.X版本的API,4.X版本里面的功能目前为止还是有点少的,但大势所趋,只能硬着头皮转了. 首先, ...
如何生成gazebo仿真环境的二维地图真值
在移动机器人仿真中,二维地图真值可以用来评价slam建图结果,也可以直接给路径规划算法提供输入. 利用gazebo进行仿真时,有很多方法都可以获取静态仿真环境的二维地图真值,本文将对以下链接: hyf ...
arcgis for android（二）显示二维地图
1.上一节讲了 arcgis for android 入门与提高(一)配置环境https://blog.csdn.net/HB_Programmer/article/details/119967868 ...
基于Vue框架开发的页面加载二维地图以及交互
一.在Vue项目中引入二维地图 1.切换到公司的仓库下载地图插件 npm config set registry http://nexus.toops.club/repository/npm-zui/ ...

最新文章

热门文章