https://habrahabr.ru/post/349356/

• Яндекс API
• JavaScript

Допустим, вы используете апи яндекс карт.

Допустим, вам надо отрисовать много точек, каждая из которых содержит на себе число — количество чего-нибудь, что на этой точке находится. Содержит она это число, допустим, в iconContent (можно и в iconCaption).

В таком случае, при использовании ObjectManager, а конкретнее LoadingObjectManager, точки выгружаются в формате:

{"type": "Feature", "id": {$id}, "geometry": {"type": "Point", "coordinates": [{$xp},{$yp}]}, "properties": {"iconContent": "{$summ}", "hintContent": "{$name}, {$address}"}}

Эта вот summ — число, которое отображается, если точка видна одна. Но на кластере — число другое, и это сумма точек в этом кластере. Но, чтобы не вводить в заблуждение пользователей, желательно там писать не сумму точек, а сумму summ этих точек.

Для этого надо переопределить clusterIconLayout и clusterIconShape в objectManager:

var objectManager = new ymaps.LoadingObjectManager('ваш_url_загрузки_точек_с_навороченным_spatial_mysql_индексом?bbox=%b', {
		clusterize: true,
		clusterHasBalloon: false,
		clusterIconLayout:  ymaps.templateLayoutFactory.createClass('<div class="outercluster"><div class="cluster" id="counter-$[id]"></div></div>',{
			build: function () {
				this.constructor.superclass.build.call(this);
				i=0;
				for(o in this.getData().properties.geoObjects)
				{
					i+=parseInt(this.getData().properties.geoObjects[o].properties.iconContent);
				}				
				$('#counter-'+this.getData().id).html(i);
			}
		}),
		clusterIconShape: {
			type: 'Circle',//максимально похоже на islands#orangeClusterIcons
			coordinates: [0, 0],
			radius: 25//в зависимости от css размеров
		},
		geoObjectOpenBalloonOnClick: false,
		gridSize: 32
	});

CSS для получившегося круга я сделал примерно похожим на оранжевый пресет (насколько моя криворукость в CSS мне позволила):

.outercluster {
	position: absolute;
	left: -25px;
	top: -25px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	background: #FFFFFF;
	border: 0;
	padding-top: 2px;
}

.cluster {
	border-radius: 50%;
	width: 46px;
	height: 46px;
	background: #FFFFFF;
	border: 6px solid orange;
	text-align: center;
	padding-top: 5px;
	margin-left: 2px;
}

Теперь в кластере нужная нам сумма. Конечно же, кластер можно рисовать какой угодно формы, насколько позволяют руки и фантазия.

P.S.

На стороне сервера точки хранятся в mysql, одно из полей в таблице точек имеет тип point и индекс SPATIAL на нем.

Запрос формируется примерно следующим образом:

SELECT id, name, address, summ, X(point) AS xp, Y(point) AS yp FROM points FORCE INDEX (point) WHERE MBRContains(GeomFromText( 'LINESTRING({$carr[0]} {$carr[1]},{$carr[2]} {$carr[3]})' ),point)

где carr — массив, получившийся в результате фильтрации $_GET['bbox']:

$carr=array(0,0,0,0);
if(isset($_GET['bbox']))
{
	$coords=explode(',',$_GET['bbox']);
	if(count($coords)==4)
	{
		$carr=array();
		foreach($coords as $c)
		{
			$carr[]=floatval($c);
		}
	}
}