Echarts3.0 地图自定义图标

栏目: 编程工具 · 发布时间: 5年前

内容简介:刚开始想到的居然不是用翻看官方的

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,
    }]
};

chinaJsonEcharts 地图数据,一部分数据大概长下图这样 Echarts3.0 地图自定义图标

]

data 为哪些省份需要插上:triangular_flag_on_post:的数据,我的数据长这样

[{ "PROVINCE_NAME": "北京", "FLAG": 1 }, { "PROVINCE_NAME": "上海", "FLAG": 1 }……]

provinceData 为最后得出的数据,然后在 renderItem 方法里对这个数组进行使用;

这个方法中有两个参数 params , api ,打印了以下发现能用的只有 dataIndex 这个属性,为数据数组的下标,我们在方法里判断当 point 的值大于0的时候,我们就插一个:triangular_flag_on_post:, xy 是:triangular_flag_on_post:的坐标,这个坐标需要通过 api 里的 coord 方法进行坐标转化,参数是一个坐标数组,且会返回一个坐标数组,这个方法有误差,:triangular_flag_on_post:可能不在省会城市上,比如澳门的:triangular_flag_on_post:在海上,当然也有可能是 Echarts 的数据不准确。

最后我们看一下完成后的样子,我们在河南插上一个:triangular_flag_on_post:

Echarts3.0 地图自定义图标


以上所述就是小编给大家介绍的《Echarts3.0 地图自定义图标》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大学程序设计课程与竞赛训练教材

大学程序设计课程与竞赛训练教材

吴永辉、王建德 / 机械工业出版社 / 2013-6 / 69.00

本书每章为一个主题,实验内容安排紧扣大学算法和数学的教学,用程序设计竞赛中的算法和数学试题作为实验试题,将算法和数学的教学与程序设计竞赛的解题训练结合在一起;在思维方式和解题策略的训练方面,以问题驱动和启发式引导为主要方式,培养读者通过编程解决问题的能力。 本书特点: 书中给出的234道试题全部精选自ACM国际大学生程序设计竞赛的世界总决赛以及各大洲赛区现场赛和网络预赛、大学程序设计竞......一起来看看 《大学程序设计课程与竞赛训练教材》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具