Echarts3.0 地图自定义图标

Echarts是你们经常使用的可视化工具，想必你们用的也是驾轻就熟，可是有时候恰恰会遇到些奇怪的想法，好比：我要在地图上插🚩。

刚开始想到的竟然不是用Echarts，而是百度的另外一款产品百度地图，可是集成以后，还须要对特定行政单位外的区域添加遮罩层，而且地图自带的路网等也很差去除，因而又回来折腾Echarts。

强调一下，本篇文章使用的是 Echarts 3.X，现阶段Echarts已经更新到4.X的版本了，且提供了更丰富的配置项，建议你们向高版本看齐

方案一

翻看官方的配置项手册，咱们使用自定义series[i]-custom中的属性 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: '中国',
    },
    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为哪些省份须要插上🚩的数据，个人数据长这样

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

provinceData为最后得出的数据，而后在renderItem方法里对这个数组进行使用；

这个方法中有两个参数params,api，打印了一下发现能用的只有dataIndex这个属性，它表示数据数组的下标，咱们在方法里判断当point的值大于0的时候，咱们就插一个🚩，x，y是🚩的坐标，这个坐标须要经过api里的coord方法进行坐标转化，参数是一个坐标数组，且会返回一个坐标数组，这个方法有偏差，🚩可能不在省会城市上，好比台湾的🚩在海上，固然也有多是Echarts的数据不许确。

最后咱们看一下完成后的样子,咱们在河南插上一个🚩。

---

方案二

方案二仅写出思路，待验证
也是用地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，只要咱们把散点图的图例改为咱们本身的就能够了。
而后咱们利用散点图series[i]-scatter属性中的symbol，来添加咱们本身的图例，且散点图下有更丰富的配置项供咱们使用，且能支持海量图标的建立。

忽然感受第二种方案才是正确的选择。