Sum of iconCaption points in a cluster LoadingObjectManager
Let's say you use api Yandex cards.
Suppose you need to draw a lot of points, each of which contains a number on it - the amount of something that is at this point. It contains this number, for example, in iconContent (you can also in iconCaption).
In this case, when using the ObjectManager, and more specifically LoadingObjectManager, the points are unloaded in the format:
This summ is the number that is displayed if the point is visible alone. But on the cluster, the number is different, and this is the sum of the points in this cluster. But, in order not to mislead users, it is advisable to write there not the sum of the points, but the sum summ of these points.
To do this, override clusterIconLayout and clusterIconShape in objectManager:
I made the CSS for the resulting circle approximately similar to the orange preset (as far as my curvature in CSS allowed me):
Now in the cluster we need the amount. Of course, a cluster can be drawn in any shape you want, as much as your hands and imagination allow.
On the server side, points are stored in mysql, one of the fields in the points table is of type point and has a SPATIAL index on it.
The request is formed approximately as follows:
where carr is the array resulting from filtering $ _GET ['bbox']:
Suppose you need to draw a lot of points, each of which contains a number on it - the amount of something that is at this point. It contains this number, for example, in iconContent (you can also in iconCaption).
In this case, when using the ObjectManager, and more specifically LoadingObjectManager, the points are unloaded in the format:
{"type": "Feature", "id": {$id}, "geometry": {"type": "Point", "coordinates": [{$xp},{$yp}]}, "properties": {"iconContent": "{$summ}", "hintContent": "{$name}, {$address}"}}This summ is the number that is displayed if the point is visible alone. But on the cluster, the number is different, and this is the sum of the points in this cluster. But, in order not to mislead users, it is advisable to write there not the sum of the points, but the sum summ of these points.
To do this, override clusterIconLayout and clusterIconShape in objectManager:
var objectManager = new ymaps.LoadingObjectManager('ваш_url_загрузки_точек_с_навороченным_spatial_mysql_индексом?bbox=%b', {
clusterize: true,
clusterHasBalloon: false,
clusterIconLayout: ymaps.templateLayoutFactory.createClass('',{
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
});
I made the CSS for the resulting circle approximately similar to the orange preset (as far as my curvature in CSS allowed me):
.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;
}
Now in the cluster we need the amount. Of course, a cluster can be drawn in any shape you want, as much as your hands and imagination allow.
PS
On the server side, points are stored in mysql, one of the fields in the points table is of type point and has a SPATIAL index on it.
The request is formed approximately as follows:
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)where carr is the array resulting from filtering $ _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);
}
}
}