echarts 地图自定义图标_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，来添加我们自己的图例，且散点图下有更丰富的配置项供我们使用，且能支持海量图标的创建。

突然感觉第二种方案才是正确的选择。