探索中国版图，G2 绘制省市下钻地图，览尽山河壮阔

中国地图，泱泱华夏，疆域辽阔，山河壮美。想要尽览华夏风采，一枚地图，可将祖国壮丽风光一网打尽。本文，将带你亲手绘制中国版图，一步步揭秘 G2 如何打造省市下钻地图，让你以交互式方式浏览祖国大好河山。

一、 绘制中国地图底图，勾勒华夏轮廓

1. 导入 G2 库，铺设制图基石

import G2 from '@antv/g2';

2. 创建画布，铺展绘图空间

const chart = new G2.Chart({
  container: 'container',
  width: 600,
  height: 400
});

3. 加载中国地图数据，勾勒国土轮廓

chart.source(chinaGeoJSON);
chart.coord('geo', {
  projection: 'albers'
});

二、省市下钻，层层探索华夏大地

1. 划分省份区域，赋予各省不同颜色

chart.polygon()
  .position('province')
  .color('province')
  .style({
    stroke: '#fff',
    lineWidth: 1
  });

2. 添加省市下钻交互，触达每个角落

chart.interaction('drilldown-select');

三、打造省份详情图，尽显区域特色

1. 创建右图容器，容纳省份详情

const rightChart = new G2.Chart({
  container: 'right-chart',
  width: 400,
  height: 400
});

2. 加载省份数据，呈现区域风采

rightChart.source(provinceData);
rightChart.facet('province');

3. 自由组合图形，描绘省份特质

rightChart.interval().position('value').color('province').adjust('dodge');

4. 联动省市下钻，左右互动相得益彰

chart.on('drilldown-select', ev => {
  const province = ev.data.name;
  rightChart.changeData(provinceData.filter(d => d.province === province));
});

四、 结语：放飞思绪，绘就地图新篇章

至此，我们已经用 G2 搭建出省市下钻的中国地图。你也可以尽情发挥创意，调整配色、丰富图例、添加交互，甚至加入动画效果，打造属于你自己的地图杰作。

参考示例：

https://antv.alipay.com/zh-cn/g2/3.x/examples/drilldown/province.html

携手 G2，绘制中国地图，尽览华夏山河。