📜 ⬆️ ⬇️

Sum of iconCaption points in the cluster LoadingObjectManager

Suppose you use api Yandex maps.

Suppose you need to draw a lot of points, each of which contains a number on itself - the amount of something that is on this point. It contains this number, for example, in iconContent (you can in iconCaption).

In this case, when using ObjectManager, and more specifically LoadingObjectManager, 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 a number that is displayed if one point is visible. 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 points, but the sum of the 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('<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 }); 

I made the CSS for the resulting circle look something like an orange preset (as far as my CSS curvature 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, the cluster can be drawn in any form, as far as the hands and imagination allow.

PS


On the server side, points are stored in mysql, one of the fields in the point table is of type point and the 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); } } } 

Source: https://habr.com/ru/post/349356/


All Articles