最仅有一个网页要用到行政区地图画数据的。
还是在ant design pro的架构里面，想说用都用了，就想直接用Ant design Charts来画。
（真的不是因为懒，echart以前我也试用过，不过太久了忘了。）
但是一直遇到一个问题，就是完成的页面显示工具栏和样例，不显示地图本图。
如下图：

经过无数次的测试，我终于发现，你需要在地图组件，我用的是ChoroplethMap外部套上一个div。
并且给div设置大小后，地图才能正常显示。

jsx:

return (
    <div >
      <ChoroplethMap {...config} />
    </div>
  );
1
2
3
4
5

less:

.mapChart {
  height: 452px;
  padding-top: 24px;
}
1
2
3
4

原因我猜可能是因为：
地图组件自己没办法撑开一个空间大小，需要一个父组件给他提供渲染位置。

PS:

1.import的问题

在antdpro里面记得要写成：

import {AreaMap} from '@ant-design/charts';
1

ant design charts 的官方样例里面写的是

import { AreaMap } from '@ant-design/maps';
1

如果你跟着样例写，我这里会报错：
Cannot apply @injectable decorator multiple times.

2.顺便分享一个阿里的地图数据下载地址：

http://datav.aliyun.com/portal/school/atlas/area_selector