echarts自定义区域地图

地图代码逻辑梳理
- 文件梳理
- - myChina.json
  - mapData.json
  - mock.json（权限json---等同于后台返回的权限json）
  - chinaMapData.json(全国地图展示数据信息 --- 等同于后台请求的数据json)
- 绘制逻辑
- 规则判断划分逻辑

地图代码逻辑梳理

文件梳理

myChina.json

主要参数

properties.name (地区名称)
properties.regionId (地区id)
geometry.coordinates (单独区域地图轮廓—可修改)
附：地图轮廓获取地址
http://geojson.io/#map=2/20.0/0.0 (获取json)
http://datav.aliyun.com/tools/atlas/#&lat=31.80289258670676&lng=104.2822265625&zoom=4 (可自行通过打点获取某一个区域的轮廓数据)

mapData.json

主要参数

region (省、市、大区)
area (第二级区域)
areaParent (一级区域和二级区域的对应关系)

mock.json（权限json—等同于后台返回的权限json）

主要参数

parentId (父级区域id–为-1则当前区域为第一级区域)
regionNum (当前区域id–必须与chinaMap下的regionId统一)
regionName (区域名称)
children (子级区域结构同上)

chinaMapData.json(全国地图展示数据信息 — 等同于后台请求的数据json)

主要参数

distributeStats(数组)
{
“totalNum”: 20,
“bindedNum”: 20,
“onlineNum”: 4,
“offlineNum”: 16,
“troubleNum”: 13,
“warnNum”: 13,
“areaCode”: “-11”,
“areaName”: “集团总数”,
“parentId”: “-1”
}
{
总数
绑定数(页面显示的总数均为绑定数)
在线数
离线数
故障数
报警数
区域id
区域名称
父级区域id
}

绘制逻辑

1 从权限json(mock.json)中取出regionId(大区id)、areaId(场区id)、filed三个数组
2 从数据json中取出需要绘制的数据(即mapChineseData.json中的distributeStats)
3 注册地图时使用自己定义的myChina.json
4 绘制地图两个函数 drawChina(绘制中国地图) drawChart(绘制区域以及场区地图)

option:[{name:'绘制区域名称',value:'根据数据分规则显示---第三模块详解'data:{totalNumber:''，...弹框显示信息}},regionId:'大区id',//一定条件下可以为空areaId:'区域id',//一定条件下可以为空parentName:'父级区域名称',
]}

5 场区一级多散点图配置，配置见：option.geo

规则判断划分逻辑

1 判断当前区域是否在regionId或者areaId中（判断权限）如果在将warnNum设置为value，如果不在value为-1
2 在及逆行显示的时候二次判断

if(存在filed){  if(当前fieID在权限列表region中存在){展示信息}else{if(当前数据有id){//此id为regionNumreturn '暂无权限'}else{return '暂无业务'}}}else if(存在areaId){if(当前areaId在二级权限areaId列表中){展示信息}else{if(当前数据有id){return '暂无权限'}else{return '暂无业务'}}
}else if(存在fieldId){if(当前fieldId在二级权限field列表中){展示信息}else{return "暂无权限"}
}

3 区域色值根据value值进行区分
主要参数option.visualMap.pieces

echarts自定义区域地图相关推荐

【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦
最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量(单块数据)渲染有所不同. ...
echarts市级区域地图数据展示
一.原理引用对应市区json数据(比如我就是引用的河南省驻马店市的数据),通过百度地图坐标拾取器获取地区的经纬度,将数据填在对应位置(我下面有注释),再配置下样式颜色之类的渲染上就可以了二.看图片 ...
echarts自定义省份地图及map上的内容
先来看效果,太原市的地图,显示市下面的区,区下面的商户,默认显示3个商户信息,其余商户信息鼠标移动上去显示商户信息: 我是怎么做的呢?因为网上找的地图都不符合需求,所以从设计开始就按非常规方法:大致就 ...
echarts制作区域地图。
首先获取需要制作地图的json数据 http://datav.aliyun.com/tools/atlas/#&lat=22.65267050733856&lng=114.189834 ...
echart 地图某个地区_一站式解决echarts实现区域地图
近期项目中有个大屏展示的需求,需要显示行政区的地图.苦苦寻找的过程中发现此方面资料很少且大部分在CSDN上付费下载,着实麻烦,特此总结,供大家参考. 直接上图关键知识点 geo数据 geo是echa ...
echarts自定义描绘地图和修改地图
需求要求需要在四川省地图上添加天府区得行政区域实现此功能分步骤实现此功能 1.获取json数据 2.描绘地图 3.引入项目 1.获得地图json数据文件可以从此获取 http://datav. ...

echarts自定义区域地图

echarts自定义区域地图

地图代码逻辑梳理

文件梳理

myChina.json

mapData.json

mock.json（权限json—等同于后台返回的权限json）

chinaMapData.json(全国地图展示数据信息 — 等同于后台请求的数据json)

绘制逻辑

规则判断划分逻辑

echarts自定义区域地图相关推荐

最新文章

热门文章