大屏中常用地图原型设计

针对问题：在日常项目中，我们常常遇到需在大屏上以地图热力图的形式，展示各个省或地市相关指标情况。为了高保真的原型，那经常会遇到需要根据整体大屏的配色去画各省份的地图，目前百度可搜索地图照片，但无法修改地图内区域的配色，以下将介绍如何获取各省地图以及快速修改地图配色：

操作步骤：

1、复制需要省份地图的前端代码

①绘制地图网站地址：https://www.pslkzs.com/xd/examples/mapInner.php?id=530000&name=%E4%BA%91%E5%8D%97%E7%9C%81

②在下方网站中找到需要省份的地图，点击左侧省份名称，可发现已绘制好的地图（以云南为例）；

 ③复制JSON数据源码

2、利用前端源码调配地图区域块颜色

①前端源码调配网址：https://www.makeapie.com/editor.html?c=xnmZ5X4gCz&v=1；

②将步骤1中的JSON数据源码，粘贴在下方代码块的第二行代码中{ }；

③修改地图中各地市区域块名称及颜色；

 ④修改色块值

关于前端颜色代码可参考该博主文章：https://blog.csdn.net/singit/article/details/49179643

地图调配源码见下方：

var mapName = 'yunnan'
var yunnan ={ 此处粘贴绘制地图的代码 }
var data = [
    {name:"迪庆藏族自治州",value:339},
    {name:"怒江傈僳族自治州",value:42},
    {name:"丽江市",value:102},
    {name:"大理白族自治州",value:10},
    {name:"保山市",value:339},
    {name:"德宏傣族景颇族自治州",value:102},
    {name:"昭通市",value:226},
    {name:"楚雄彝族自治州",value:226},
    {name:"临沧市",value:10},
    {name:"曲靖市",value:500},
    {name:"玉溪市",value:400},
    {name:"昆明市",value:339},
    {name:"普洱市",value:400},
    {name:"文山壮族苗族自治州",value:226},
    {name:"红河哈尼族彝族自治州",value:10},
    {name:"西双版纳傣族自治州",value:226},
    ];
    
var geoCoordMap = {};
var toolTipData = [ ];

/*获取地图数据*/
myChart.showLoading();
echarts.registerMap('yunnan', yunnan)
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;

});

console.log(data)
console.log(toolTipData)
var max = 480,
    min = 9; // todo 
var maxSize4Pin = 100,
    minSize4Pin = 20;

var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }
    }
    return res;
};
option = {
    tooltip: {
        padding: 0,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
            color: '#000',
            decoration: 'none',
        },
        // position: function (point, params, dom, rect, size) {
        //   return [point[0], point[1]];
        // },
       
        
    },
   
    visualMap: {
        show: true,
        min: 0,
        max: 500,
        left: '0%',
        top: '50%',
        calculable: true,
        seriesIndex: [1],
        inRange: {
       color: ['#6FCF6A', '#FFFD64', '#FF5000']

        }
    },
    geo: {
        show: true,
        map: mapName,
        label: {
         
            normal: {
                show: true
            },
            emphasis: {
                show: false,
            }
        },
     
        itemStyle: {
            normal: {
                areaColor: '#fff',
                borderColor: '#1180c7',
            },
            emphasis: {
                areaColor: 'red',
            }
        }
    },
    series: [{
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: 0,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                    
                }
            }
        },
        {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            animation: false,
            data: data
        },
        {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6,
        },
        

    ]
};

3、基于上图步骤，已完成地图绘制及区域颜色调配，将完成的地图截图贴到原型中即可，若想在原型工具内直接对地图内的区域进行编辑，只能使用切图一个个拼凑，比较耗费时间，且需要切图功底.....

若有更快更好的方式绘制地图且修改地图区域的颜色，请各位大神指导！！！