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;