Допустим, вы используете апи яндекс карт.
Допустим, вам надо отрисовать много точек, каждая из которых содержит на себе число — количество чего-нибудь, что на этой точке находится. Содержит она это число, допустим, в iconContent (можно и в iconCaption).
В таком случае, при использовании ObjectManager, а конкретнее LoadingObjectManager, точки выгружаются в формате:
Эта вот summ — число, которое отображается, если точка видна одна. Но на кластере — число другое, и это сумма точек в этом кластере. Но, чтобы не вводить в заблуждение пользователей, желательно там писать не сумму точек, а сумму summ этих точек.
Для этого надо переопределить clusterIconLayout и clusterIconShape в objectManager:
CSS для получившегося круга я сделал примерно похожим на оранжевый пресет (насколько моя криворукость в CSS мне позволила):
Теперь в кластере нужная нам сумма. Конечно же, кластер можно рисовать какой угодно формы, насколько позволяют руки и фантазия.
На стороне сервера точки хранятся в mysql, одно из полей в таблице точек имеет тип point и индекс SPATIAL на нем.
Запрос формируется примерно следующим образом:
где carr — массив, получившийся в результате фильтрации $_GET['bbox']:
Допустим, вам надо отрисовать много точек, каждая из которых содержит на себе число — количество чего-нибудь, что на этой точке находится. Содержит она это число, допустим, в 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);
}
}
}