Echarts 多个省份合并一个区域

对于某些特定需求，官方下载的地图数据可能并不能完全满足。例如，要求显示中国地图，但需要将山东江苏和浙江这3个省合并起来，显示“东部区域”。其他省份不变。

于是就需要对官方提供的地图数据进行修改。

一个思路是借助第三方工具，生成新区域的轮廓点，然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力，且精度无法保证。

实际上，直接将这三个省的轮廓点合并即可。

对于地图，使用json格式引入：

$.get('js/china.json', function(chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});
其中引入的json会解析为参数chinaJson。而一个地图的json格式如下：

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "01",
            "properties": {
                "name": "辽宁",
                "cp": [文本经纬度坐标]//先经度后纬度，保留到小数点后六位
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[
                        [坐标对0], [坐标对1]...//同cp属性
                    ]
                ]
            }
        },
        {省份2},
        {省份3},
        ...
    ]
}
可见，每个省的数据主要包含在两个属性中：properties和geometry。

properties用于设置显示的文本和文本的位置。

geometry绘制地图一定是用的Polygon，其coordinates属性是所有坐标点对的集合。然而，考虑到一个完整的区域可能并不相连，例如群岛等，所以coordinates其实是一个二维数组，也就是一个Polygon的一维数组。其含义是一个区域是由多个Polygon构成，而每个Polygon是由多个点构成。

于是，我们要合并山东江苏和浙江这3个省，那么只需要将这3个省的Polygon都放到同一个coordinates数组中即可。

// 合并多个省为一个
var mergeProvinces = function(chinaJson, names, properties) {
    var features = chinaJson.features;
    var polygons = [];
    // 将指定省的polygon保存下来，并将省的数据从地图中删除
    for(var i = 0, iLen = names.length; i < iLen; i++) {
        for(var j = 0, jLen = features.length; j < jLen; j++) {
            if(features[j].properties.name == names[i]) {
                polygons = polygons.concat(features[j].geometry.coordinates);
                features.splice(j, 1);
                break;
            }
        }
    }
    // 构建新的合并区域
    var feature = {
        type: "Feature",
        id: "" + features.length,
        properties: {
            name: properties.name || ""
        },
        geometry: {
            type: "Polygon",
            coordinates: polygons
        }
    };
    if(properties.cp) {
        feature.properties.cp = properties.cp;
    }
 
    // 将新的合并区域添加到地图中
    features.push(feature);
};
 
$.get('js/china.json', function(chinaJson) {
    var params = {
        names: ["山东", "江苏", "浙江"],
        properties: {
            name: "东部区域",
            cp: [
                119.553222,
                33.724339
            ]
        }
    };
 
    mergeProvinces(chinaJson, params.names, params.properties);
 
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});
这样，在地图引入后就对区域进行了合并与删除，那么后续的操作跟正常引入的地图就相同了。

另外，关于地图上的坐标点，使用的是常规的经纬度。坐标对的x为经度，y为纬度。

要想查看某个地点的具体经纬度，可以借助各种在线网站，例如：http://www.gpsspg.com/maps.htm
 

转载：https://blog.csdn.net/fyyyr/article/details/81777477