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，來添加咱們本身的圖例，且散點圖下有更豐富的配置項供咱們使用，且能支持海量圖標的建立。

忽然感受第二種方案纔是正確的選擇。