Echarts 用GeoJson数据绘制地图

Echarts 通过加载 DataV.GeoAtlas工具获取的GeoJson地图数据，绘制地图。

一、先获取地图数据：数据格式分别选择包含子区域和不包含子区域各下载一份。

二、Echarts利用数据绘制

1.加载两份数据

      //获取两份数据const SX = await this.getWorldJson('shanXi')const SXNoSubRegion = await this.getWorldJson('shanXiNoSubRegion')//加载数据this.$echarts.registerMap('山西省', SX)this.$echarts.registerMap('山西省无子区域', SXNoSubRegion)

2. echarts绘制地图，options中内容（分别配置无子区域和包含子区域的样式）。配置时{map:''},其中map属性对应使用 registerMap 注册的地图名称。

      const option = {series: [{type: 'map',map: '山西省无子区域',silent: true, // 图形是否不响应和触发鼠标事roam: false, // 鼠标缩放zoom: 1.01,itemStyle: {borderColor: '#14edfc',borderWidth: 5,areaColor: 'rgba(0,0,0,0)'}},{type: 'map',map: '山西省',roam: false,label: {show: true,color: '#0484a5'},itemStyle: {borderColor: '#3b89ac',borderWidth: 3,areaColor: 'rgba(9, 40, 77, 0.5)'}}]}

无子区域、包含子区域分别展示效果：

实现的叠加效果

无子区域的模块配置缩放比例属性 zoom：1.01（默认1），这样叠加时两者不会完全重叠，无子区域地图稍大，地图轮廓有包裹的伪3D效果。

由于地图是两者叠加的，进行鼠标缩放时，只会放大其中一者，叠加的两份无法同步缩放，导致错乱。所以配置属性禁止鼠标缩放，并禁止无子区域地图响应和触发鼠标事件（只需包含子区域的地图响应）。

Echarts 用GeoJson数据绘制地图相关推荐

echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
python怎么安装bokeh_Python如何使用bokeh包和geojson数据绘制地图
最近要绘制伦敦区地图,查阅了很多资料后最终选择使用bokeh包以及伦敦区的geojson数据绘制. bokeh是基于python的绘图工具,可以绘制各种类型的图表,支持geojson数据的读取及绘制地 ...
使用pycharm开发Django2.2全过程（九）-ECharts的使用（绘制地图、散点图、饼图等）
ECharts是一个第三方控件,我们使用前,需要先下载对应的js文件才能用,链接:https://pan.baidu.com/s/1Fe1LRoN_t7WjfS0njER9hA?pwd=r56g 提取 ...
echarts 获取geoJson数据
方法一.如果是只要精确到市区级可以直接通过以下链接获取 http://datav.aliyun.com/portal/school/atlas/area_selector 方法二.到街道城镇需要先通过 ...
Python读取EXCEL省份数据绘制地图
文章目录 EXCEL数据表读取 Excel 数据并绘图 EXCEL数据表 python操作excel主要用到 xlrd 和 xlwt 这两个库,即读写excel. 安装xlrd:在cmd窗口 pip ...
geojson全国各省市区地图json数据绘制Echarts区域地图
全国json数据获取地址: https://github.com/lyhmyd1211/GeoMapData_CN 单独区域json数据获取地址: http://datav.aliyun.com/to ...
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示[二.创建地图] 在template标签内创建下列DOM 1.在template标签内,创建container的 ...
基于Echarts数据可视化地图模块（地图下钻+地图迁徙线）
数据可视化大屏展示使用频率最高的应该就是地图了,无论是做功能性的还是做装饰用的,都是非常实用的,放上它项目才有了灵魂,显得非常的炫酷.这里分别对地图下钻,迁徙图,地图下钻+迁徙图的合并,记录介绍一下: ...
数据可视化——如何绘制地图
文章目录前言如何绘制地图添加配置项根据已有数据绘制地图整体代码展示前言前面我们学习了如何利用提供的数据来对数据进行处理,然后以折线图的形式展现出来,那么今天我将为大家分享如何将提数据以地 ...
获取省市区geoJson数据（精确到县、镇）用于echarts实现地图数据可视化
写在前面本文着重介绍关于获取数据的部分,如果数据处理好了,不会使用echarts将地图绘制出来,可以参考echarts的官方文档,或去搜寻大佬们的教程,或者另外问我,我再写一份我自己理解的关于ech ...

Echarts 用GeoJson数据绘制地图

Echarts 用GeoJson数据绘制地图相关推荐

最新文章

热门文章