DistrictCluster（行政区划聚合）react中的使用

效果：

<link rel="icon" href="/favicon.png" type="image/x-icon">
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
  <link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
  <script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.14&key=你的高德key'></script>
    <!-- UI组件库 1.0 -->
  <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Button, message, Cascader } from 'antd';
import styles from './Index.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { G2, Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet, Util } from "bizcharts";

const FormItem = Form.Item;

/* eslint react/no-multi-comp:0 */
@connect(({ index, loading }) => ({
	index,
	loading: loading.models.index,
}))
@Form.create()

class HeartMap extends PureComponent {
	componentDidMount() {
		const { dispatch, type } = this.props;
		dispatch({
			type: 'index/fetch',
		});

		this.renderMap();
	}

	renderMap() {
		const _this = this;
		var dom = document.getElementById('container');
		if(dom){
			var map = new AMap.Map('container', {
				zoom: 4
			});
			var initPage = function(DistrictCluster, $) {
				var distCluster = new DistrictCluster({
					map: map, //所属的地图实例
					zIndex:11,
					getPosition: function(item) {
						if (!item) {
							return null;
						}
						var parts = item.split(',');
						//返回经纬度
						return [parseFloat(parts[0]), parseFloat(parts[1])];
					},
					renderOptions: {
						//基础样式
						featureStyle: {
							fillStyle: 'rgba(102,170,0,0.5)', //填充色
							lineWidth: 2, //描边线宽
							strokeStyle: 'rgb(31, 119, 180)', //描边色
							//鼠标Hover后的样式
							hoverOptions: {
								fillStyle: 'rgba(255,255,255,0.2)'
							}
						},
						//特定区划级别的默认样式
						featureStyleByLevel: {
							//全国
							country: {
								fillStyle: 'rgba(49, 163, 84, 0.8)'
							},
							//省
							province: {
								fillStyle: 'rgba(116, 196, 118, 0.7)'
							},
							//市
							city: {
								fillStyle: 'rgba(161, 217, 155, 0.6)'
							},
							//区县
							district: {
								fillStyle: 'rgba(199, 233, 192, 0.5)'
							}
						},
						//直接定义某写区划面的样式
						getFeatureStyle: function(feature, dataItems) {
							if (dataItems.length > 3) {
								return {
									fillStyle: 'red'
								};
							} else if (dataItems.length > 1) {
								return {
									fillStyle: 'orange'
								};
							}
							return {};
						}
					}
				});
				window.distCluster = distCluster;
				$.getJSON('https://img.cdn.zhaoshang800.com/img/2019/05/27/broker/5b23a1ed-8cbf-4426-a6e1-e68e28403e4b.txt', function(csv) {
					// console.log(csv.msg)
					distCluster.setData(csv.data);
				});
			}
			AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function(DistrictCluster, $) {
				//启动页面
				initPage(DistrictCluster, $);
			});
			
			
		}
	}
	render() {
		return (
			<PageHeaderWrapper title="用户地图">
				<Card bordered={false}>
					<div id="container" className={styles.map} style={{'width':'100%','height':800}}></div>
				</Card>
			</PageHeaderWrapper>
		);
	}
}

export default HeartMap;

高德：https://lbs.amap.com/api/javascript-api/reference-amap-ui/geo/district-cluster