DistrictCluster（行政区划聚合）渐变显示

效果：

直接按照高德的改就可以了

https://lbs.amap.com/api/amap-ui/demos/amap-ui-districtcluster/feature-style/

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";
import { quickSort } from '@/utils/utils';

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, $) {
				let proColor = [];
				let proSetColor = [];
				let cityColor = [];
				let citySetColor = [];
				let disColor = [];
				let disSetColor = [];
				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(255, 0, 0, 0.6)'
							},
							//省
							province: {
								fillStyle: 'rgba(49, 163, 84, 0.05)'
							},
							//市
							city: {
								// fillStyle: 'rgba(0, 0, 255, 0.05)'
								fillStyle: 'rgba(49, 163, 84, 0.05)'
							},
							//区县
							district: {
								// fillStyle: 'rgba(0, 255, 0, 0.05)'
								fillStyle: 'rgba(49, 163, 84, 0.05)'
							}
						},
						//直接定义某写区划面的样式
						getFeatureStyle: function(feature, dataItems) {
							// console.log(feature.properties.level)
							//省份级别
							if(feature.properties.level == 'province'){
								proColor.push(dataItems.length);
								proSetColor = new Set(proColor);
								for (let i = 1; i <= quickSort(Array.from(proSetColor)).length; i++ ){
									if(dataItems.length == quickSort(Array.from(proSetColor))[i]){
										return {
											fillStyle: 'rgba(49, 163, 84,' + i/quickSort(Array.from(proSetColor)).length + ')'
										};
									}
								}
							}
							//城市级别
							else if(feature.properties.level == 'city'){
								//将视野内的值存入数组
								cityColor.push(dataItems.length);   
								//去重
								citySetColor = new Set(cityColor);  
								//console.log(quickSort(Array.from(citySetColor)))  视野内的 城市去重包含的值 排序后的数组   [0, 1, 2, 3]
								for (let i = 1; i <= quickSort(Array.from(citySetColor)).length; i++ ){
									//给某一区域加颜色
									if(dataItems.length == quickSort(Array.from(citySetColor))[i]){ 
										// console.log(i/quickSort(Array.from(citySetColor)).length)
										return {
											//将透明值等分  赋值颜色
											// fillStyle: 'rgba(0, 0, 255,' + i/quickSort(Array.from(citySetColor)).length + ')'
											fillStyle: 'rgba(49, 163, 84,' + i/quickSort(Array.from(proSetColor)).length + ')'
										};
									}
								}
							}
							//区县级别
							else if(feature.properties.level == 'district'){
								disColor.push(dataItems.length);
								disSetColor = new Set(disColor);
								for (let i = 1; i <= quickSort(Array.from(disSetColor)).length; i++ ){
									if(dataItems.length == quickSort(Array.from(disSetColor))[i]){
										// console.log(i/quickSort(Array.from(citySetColor)).length)
										return {
											// fillStyle: 'rgba(0, 255, 0,' + i/quickSort(Array.from(disSetColor)).length + ')'
											fillStyle: 'rgba(49, 163, 84,' + i/quickSort(Array.from(proSetColor)).length + ')'
										};
									}
								}
							}
							else{
								return {};
							}
							//
							// if (dataItems.length > 3) {
							// 	return {
							// 		fillStyle: 'red'
							// 	};
							// } else if (dataItems.length > 1) {
							// 	return {
							// 		fillStyle: 'orange'
							// 	};
							// }
							// 
						}
					}
				});
				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} className={styles.map}>
					<div id="container"  style={{'width':'100%','height':800}}></div>
				</Card>
			</PageHeaderWrapper>
		);
	}
}

export default HeartMap;