echarts多个地区合并并实现标注

先备注几个地址
获取json：http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
压缩json
https://mapshaper.org/

地图合并

参考：echarts合并地图，把中国各个省份分成华北,东北,华东,华中,华南,西南,西北七个大区

需要特别注意的是，json文件需要处理下，一般的json文件会缺少下面代码中的字段名
主要代码如下：

/**
 * 合并多个省市
 * @param {*} chinaJson
 * @param {*} names
 * @param {*} properties
 */
var mergeProvinces = function (chinaJson, names, properties) {
    //合并大区里省份的coordinates
    var features = chinaJson.features
    var polygons = []
    var polygons2 = []

    for (var i = 0; i < names.length; i++) {
        var polygonsCoordinates = []
        var polygonsEncodeOffsets = []
        for (var z = 0; z < names[i].length; z++) {
            for (var j = 0; j < features.length; j++) {
                if (features[j].properties.name == names[i][z]) {
                    if (features[j].geometry.coordinates[0].constructor == String) {
                        //合并coordinates
                        for (var l = 0; l < features[j].geometry.coordinates.length; l++) {
                            polygonsCoordinates.push(features[j].geometry.coordinates[l])
                        }
                    } else if (features[j].geometry.coordinates[0].constructor == Array) {
                        for (var k = 0; k < features[j].geometry.coordinates.length; k++) {
                            for (
                                var d = 0;
                                d < features[j].geometry.coordinates[k].length;
                                d++
                            ) {
                                polygonsCoordinates.push(features[j].geometry.coordinates[k][d])
                            }
                        }
                    }
                    if (features[j].geometry.encodeOffsets[0].constructor == String) {
                        //合并encodeOffsets

                        polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets)
                    } else if (
                        features[j].geometry.encodeOffsets[0].constructor == Array
                    ) {
                        for (
                            var k = 0;
                            k < features[j].geometry.encodeOffsets.length;
                            k++
                        ) {
                            if (
                                features[j].geometry.encodeOffsets[k][0].constructor == Array
                            ) {
                                for (
                                    var e = 0;
                                    e < features[j].geometry.encodeOffsets[k].length;
                                    e++
                                ) {
                                    polygonsEncodeOffsets.push(
                                        features[j].geometry.encodeOffsets[k][e]
                                    )
                                }
                            } else {
                                polygonsEncodeOffsets.push(
                                    features[j].geometry.encodeOffsets[k]
                                )
                            }
                        }
                    }

                    break
                }
            }
        }
        polygons.push(polygonsCoordinates)
        polygons2.push(polygonsEncodeOffsets)
    }

    // 构建新的合并区域
    var features = []

    for (var a = 0; a < names.length; a++) {
        var feature = {
            id: features.length.toString(),
            type: 'FeatureCollection',
            geometry: {
                type: 'Polygon',
                coordinates: polygons[a],
                encodeOffsets: polygons2[a]
            },
            properties: {
                name: properties.name[a] || '',
                childNum: polygons[a].length
            }
        }
        if (properties.cp[a]) {
            feature.properties.cp = properties.cp[a]
        }

        // 将新的合并区域添加到地图中
        features.push(feature)
    }
    chinaJson.features = features
}
// 获取地图数据
function getmapData() {
    $.get('../../js/common/pro.json', function (chinaJson) {
        data = doMap(chinaJson.features)

        setTimeout(() => {
            repRegionStrategy(series)
        }, 100)
        var params = {
            names: [
                //把各个大区的省份用二维数组分开
                ['河北省'],
                ['河南省'],
                ['陕西省'],
                ['山西省'],
                ['湖北省'],
                ['北京市'],
                ['天津市']
            ],
            properties: {
                //自定义大区的名字,要和上面的大区省份一一对应
                name: [
                    '河北省',
                    '河南省',
                    '陕西省',
                    '山西省',
                    '湖北省',
                    '北京市',
                    '天津市'
                ],
                cp: [
                    //经纬度可以自己随意定义
                    [114.502461, 38.045474],
                    [113.665412, 34.757975],
                    [108.948024, 34.263161],
                    [112.549248, 37.857014],
                    [114.298572, 30.584355],
                    [116.405285, 39.904989],
                    [117.190182, 39.125596]
                ]
            }
        }
        // 拼接地图
        mergeProvinces(chinaJson, params.names, params.properties)
        echarts.registerMap('zhongbu', chinaJson) // 注册地图
        // 渲染地图
    })
}
var geoCoordMap = {
    河北省: [114.502461, 38.045474],
    河南省: [113.665412, 34.757975],
    陕西省: [108.948024, 34.263161],
    山西省: [112.549248, 37.857014],
    湖北省: [114.298572, 30.584355],
    北京市: [116.405285, 39.904989],
    天津市: [117.190182, 39.125596]
}

function doMap(mapFeatures) {
    mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.properties.center
    })
    return geoCoordMap
}

根据坐标定位

接口数据格式是这样的：

result: [
     {
         departName: '地点1',
         describe: '概述3',
         parentId: '2',
         pointAddress: '116.502461, 38.045474',
         children: null,
         typeId: '1'
     },
     {
         departName: '地点2',
         describe: '概述3',
         parentId: '2',
         pointAddress: '113.665412, 34.757975',
         children: null,
         typeId: '1'
     },
]

获取坐标，并处理成如下格式

 if (res.data.code == 200) {
        res.data.result.forEach(item => {
            console.log(item)

            var arrCP = item.pointAddress.split(',')
            var departName = item.departName
            arr1.push({
                name: departName,
                value: item.id
            })



            arr2[departName] = arrCP
            console.log(arr2);
        })
    }

继续处理

 var echartData = convertData(arr1, arr2)
// 坐标点

var convertData = function (arr1, arr2) {
    var res = []
    for (var i = 0; i < arr1.length; i++) {
        var geoCoord = arr2[arr1[i].name]
        if (geoCoord) {
            res.push({
                name: arr1[i].name,
                value: geoCoord.concat(arr1[i].value)
            })
        }
    }
    return res
}

接下来就需要把数据扔到echarts里了，我这边是将series定义在外面，根据业务需要，点击时根据切换的地址，然后定位标注

var series = [];
 for (var i = 0; i < series.length; i++) {
        if (series[i].type === 'scatter') {
            series.splice(i, 1)
        }
    }
 series.push({
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol:'pin',//气泡
` 		symbolSize: 30,
        zlevel: 6,
        data: echartData
    })
})

标注更换成自己的图片

var yy_icon = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABsElEQVQ4jdXUu2tVQRDH8c+NMUZ8/RvBB6iVYKO1f4GoRTpBBcVCxUcTQsAHlqKFYGGlbTpBERu1EFRESCeoWPhAMBIfuTIwK+vx3Hs0XX5wOGf3zH5ndmZ2LTv1IuD+8y1dca/Gqfyewddhxr3Nz4xW4xGsCj/4hsWcH8NxnM1x/Duf74GqwRtxEJ9xC0/SUUCnKrupdHoJC13giHYrDuX4DZ7iGKZb1k0n/PIg+Ej1XQxe4CEmM5+DNJOBjHWBY9vvcAYTuDYsh6lIx+FGSv8Cv8bJjOB66Zh/0MWEr2gDR77upucbbREMUQRwAUfawNGnJ3AlU/K/Gs20nE7Wb/C+zG1/CdCiH5nK/aotv8QBbMO5JYIjsDm8r8EP8v2lY/F33M7DE1uexx7swj08LoZ1kaIIazrAcUfcxGza9xMe4A21YbP6pcVe4WruII76XqzL7plPm1KPT421reCiuezPn9iOndiUHbMjHY6nk90NR0PB/er2WqhuuvGs/NHsqMXciQyiFdyrTs/aan5lAovN+nya+uPk1eCI8i0e4U41/xH38WHABV+KGPfMchV+AaU8WlFFTnNxAAAAAElFTkSuQmCC'
symbol: function (val, param) {
//判断是否包含xx
     if (param.data.name.indexOf('xx') != -1) {
         return yy_icon
     }
}

图片的地址实在echarts官网里转的，尝试过用本地的路径，或者用网上转换图片工具，都没有办法正常展示，所以建议在官网里转换
转换方式：