React项目引入中国地图_antv+react绘制中国地图

项目需求

1. 在React项目中引入中国地图，完成基础数据的渲染（类似疫情地图那样）
2. 点击地图可以显示某个地区的多个item，点击之后可以路由到不同的页面

前期工作

 因为Echarts我记得之前是支持地图组件的，可是现在因为涉及到一些问题，不能使用了。详细的可以查看官方文档配置项（series map类型）。所以现在需要引入china.js这个文件（原因：官方说的是因为现在地图精度的提高，代码增多，需要下载文件并引入），上网查了一些资料也看了一些博客，最后还是看官方文档（真的开发千万要看文档，磨刀不误砍柴功）：

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

这段是官方文档讲的两种方法（我采用的是第一种）

//-----------方法一-----------------
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
 
//react项目的话就写到componentDidMount，用hook类似
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    //类型一定设置map和china
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>
 
//--------------方法二-----------------
$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

如果react没有下载Echarts，可以自己npm一个Echarts，这样的话就可以直接引入

import echarts from 'echarts';
import 'echarts/map/js/china';

在项目下载的依赖包里也可以找到，（当然也可以自己下载一个china.js然后引入项目）

出现的问题

• 如何实现点击一个省份出现不同的链接？？

没错，查看官方文档。

tooltip属性  这个属性就是就是你点击Echarts一个地方出现的小tips，其中的formatter属性支持自定义，它有两个方法，一个是字符串模板，一个是回调函数。回调函数支持更加灵活一些的方法，比如这个需求是想让我把省份中的一些详细数据展示，然后路由到其他目录。

tooltip:{
            triggerOn:'click',
            enterable:true,
            formatter(params,ticket,callback){
                //params 是点击地图省份的data数据
                let detail=params.data.detail;
                let tipHtml='<ul>';
                detail.map((item,index)=>{
                    return tipHtml+='<li key='+index+'><a href="/#/home">'+item.coalName+'</a> 钻孔数量:'+item.number+'</li>'
                })
                tipHtml+='</ul>';
                return tipHtml;
            }
        }

这个因为回调函数内部其实就是嵌入了一个无序列表，然后插入链接。当然这个地方还没有添加不同的路由（暂时没写到这里）

• 实现疫情地图类型的legend

我想的是直接使用legend属性，然后进行自定义。然而找了老半天，并没有啥启发。知道看到一个博客，发现自己的思路就是刚开始就跑偏了，非得使用legend属性，结果人家的实现是使用visualMap，视觉映射组件。

//这是省份的基础数据类型，其他省份省略
{ name: '黑龙江', type: 'areaCenterCity',detail:[
        {coalName:'工区1',number:Math.round(Math.random()*1000)},
        {coalName:'工区2',number:Math.round(Math.random()*1000)},
    ],value:2}
 
//-----------分割线------------配置信息
visualMap:{
    type: 'piecewise',
    // dimension:1,
    left:'20%',
    bottom:'5%',
    pieces: [
         { min: 7 ,max: 10, label: '7-10矿区', color: '#1F9FFF' },
         { min: 5, max: 6, label: '5-6矿区', color: '#00E5EE' },
         { min: 3, max: 4, label: '3-4矿区', color: '#BBFFFF' },
         { min: 1, max: 2, label: '1-2矿区', color: '#E0FFFF' },
         { value:0, label: '0个矿区', color: '#fff' },
       ]
    }

成果图（数据都是假的，切勿当真hhh）：

仍存问题

我在配置VisualMap属性的时候，可以看到我dimension属性是注释掉的，因为我设置的时候根本不起作用，我查看了文档仍然没有解决。只是知道默认是最后一列数据，所以我将value值设置到了最后一行，如果有使用成功的，也希望在评论指出。

参考文章

echarts实现中国疫情地图

Echart官网

demo项目地址