内容简介:刚开始想到的居然不是用翻看官方的
Echarts
是大家常用的可视化工具,相比大家用的也是得心应手,但是有时候偏偏会遇到些奇怪的想法,比如:我要在地图上插:triangular_flag_on_post:。
刚开始想到的居然不是用 Echarts
,而是百度的另一款产品 百度地图
,但是集成之后,还需要对特定行政单位外的区域添加遮罩层,并且地图自带的路网等也不好去除,于是又回来折腾 Echarts
。
翻看官方的 配置项手册 ,良久之后才找到 renderItem
。官方的说法是: custom
系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem
。
找到方法就动手,开始下载 Echarts
的地图支持,但是此时 Echarts
自称部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。 因为是自己玩的项目 ,所以动了一点坏心思,在 Github
上找找大家以前的存货。 如果是商业项目,大家千万不要这样做哦 。
chinaJson.features.forEach(function (item, index) { data.forEach(function (row, num) { if (item.properties.name === row.PROVINCE_NAME) { provinceData.push({ "id": item.id, "name": row.PROVINCE_NAME, "cp": item.properties.cp, "point": row.FLAG, "value": 0 // value 为关键字,值必须为0 }); } }); }); var myOption = { geo: { map: '中国', zoom: 1, }, series: [{ name: '红旗', type: 'custom', coordinateSystem: 'geo', renderItem: function (params, api) {//具体实现自定义图标的方法 if (provinceData[params.dataIndex].point > 0) { return { type: 'image', style: { image: './img/flag.png', x: api.coord([provinceData[params.dataIndex].cp[0], provinceData[params.dataIndex].cp[1]])[0], y: api.coord([provinceData[params.dataIndex].cp[0], provinceData[params.dataIndex].cp[1]])[1], } } } }, data: provinceData, }] };
chinaJson
为 Echarts
地图数据,一部分数据大概长下图这样
]
data
为哪些省份需要插上:triangular_flag_on_post:的数据,我的数据长这样
[{ "PROVINCE_NAME": "北京", "FLAG": 1 }, { "PROVINCE_NAME": "上海", "FLAG": 1 }……]
provinceData
为最后得出的数据,然后在 renderItem
方法里对这个数组进行使用;
这个方法中有两个参数 params
, api
,打印了以下发现能用的只有 dataIndex
这个属性,为数据数组的下标,我们在方法里判断当 point
的值大于0的时候,我们就插一个:triangular_flag_on_post:, x
, y
是:triangular_flag_on_post:的坐标,这个坐标需要通过 api
里的 coord
方法进行坐标转化,参数是一个坐标数组,且会返回一个坐标数组,这个方法有误差,:triangular_flag_on_post:可能不在省会城市上,比如澳门的:triangular_flag_on_post:在海上,当然也有可能是 Echarts
的数据不准确。
最后我们看一下完成后的样子,我们在河南插上一个:triangular_flag_on_post:
以上所述就是小编给大家介绍的《Echarts3.0 地图自定义图标》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 如何在antdPro中使用自定义SVG图标?
- e-icon-picker v1.0.11 已发布,支持 cdn 和自定义 svg 图标
- c# – 如何将两个图标合并在一起? (在另一个图标上叠加一个图标)
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- 9012年了你还在用单色图标?(iconfont多色图标详解)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。