使用 echarts 制作中国地图飞线图,发现部分省份的名称错位或重叠,有的都快跑到省份外面去了。解决办法有如下两种:
方法一、可以修改地图文件(JS 或 JSON)中对应省份的 cp
坐标。
这里以 china.js 示例,直接修改 china.js 中 properties 配置项的 cp 值,这个 cp 值代表着坐标定位。注意,js 文件是加密的,但是 properties 是正常显示的,我们直接搜索要修改的省份名称即可。
"properties":{"cp":[119.767413,33.041544],"name":"江苏","childNum":1}
方法二、通过 echarts.getMap('china')
修改已加载的地图数据。
var chinaMapInfoObj = document.getElementById('map');
var chinaMap = echarts.init(chinaMapInfoObj);
var chinaEchartsObj = echarts.getMap('china');
var geoJSONChina = chinaEchartsObj.geoJson;
var allDefProvince = geoJSONChina.features;
for(var i=0,len=allDefProvince.length; i<len; i++){
var sglProvinceProperties = allDefProvince[i].properties;
var sglProvinceName = sglProvinceProperties.name;
switch(sglProvinceName){
case '新疆':
sglProvinceProperties.cp[0]=87.617733;
sglProvinceProperties.cp[1]=41.792818;
break;
case '青海'://def:101.778916,36.623178
sglProvinceProperties.cp[0]=97.617733;
sglProvinceProperties.cp[1]=36.623178;
break;
case '江苏'://def:118.767413,32.041544
sglProvinceProperties.cp[0]=119.767413;
sglProvinceProperties.cp[1]=33.041544;
break;
}
}
option.echarts.registerMap('china', geoJSONChina, {});