Проблема при добавлении 10 тыс точек на яндекс карты api?

Question

[WebforSelf]

Вопрос такого плана, есть записи у которых имеются параметры ( широта долгота) для нанесения на карту. Задача такова, при клике на кнопку показать карту, 10 тысяч записей с помощью ajax пытаются добавиться на яндекс карту, происходит это тяжко. Вопрос, кто пробовал добавлять на карту большое количество записей? как можно облегчить мучения?

Скрипт который аяксом выводит data.markers[i].lat, data.markers[i].lon и добавляет метки на карту.

spoiler

var is_map = 0;
$(function() {
    $('.get_view span').on('click', function() {
        var view = $(this).data('view');
        $('.get_view .blue').removeClass('blue');
        $(this).addClass('blue');
        if (view == 'map') {
            $('#body').height($(window).height() - 180);
            $('#body_content').addClass('hide_catalog');
            $('#map_body').show();
            if (!is_map) {
                init_map();
                is_map = 1;
            }
            if (!$(this).hasClass('readily')) {
                data_ids = $('form[name=objects]').serialize();
                load_marks_map(data_ids);
                $(this).addClass('readily');
            }
        }
        if (view == 'catalog') {
            $('#body').height('auto');
            $('#body_content').removeClass('hide_catalog');
            $('#map_body').hide();
        }
        return false;
    });

});

function load_catalog(url, data) {
    $.ajax({
        url: url,
        type: 'GET',
        data: data,
        success: function(data) {
            $('#body_content').html(data);
            $('.get_view .vm').removeClass('readily');
        },
        complete: function(data) {
            if ($('.get_view .vm').hasClass('blue')) {
                var data_ids = $('form[name=objects]').serialize();
                load_marks_map(data_ids);
            }
        }
    });
}
var myMap, myCollection, MyBalloonContentLayoutClass;

function init_map() {
    myMap = new ymaps.Map("map_body", {
        center: [55.753329, 37.623164],
        zoom: 9.8,
        behaviors: ['default', 'scrollZoom']
    });
   // myMap.controls.add('zoomControl').add('typeSelector').add('mapTools');
    myCollection = new ymaps.GeoObjectCollection();
    MyBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass('<div style="padding:5px" class="ball"><div class="item_ball"><img src="files/originals/$[properties.image]" alt=""></div><p>$[properties.name]</p></div>');
}

function load_marks_map(ids) {
    if (myCollection) {
        myCollection.removeAll();
    }
    $.ajax({
        url: "ajax/get_products_map.php",
        type: 'GET',
        data: ids,
        success: function(data) {
			console.log(data);
            for (i = 0; i < data.markers.length; i++) {
                var myPlacemark = new ymaps.Placemark([data.markers[i].lat, data.markers[i].lon], {
                    id: data.markers[i].id,
                    name: data.markers[i].name,
                    image: data.markers[i].image,
                    description: data.markers[i].description,
                    hintContent: data.markers[i].name
                }, {
                    balloonContentLayout: MyBalloonContentLayoutClass,
                    preset: data.markers[i].styleplacemark
                });
                myCollection.add(myPlacemark);
            }
            myMap.geoObjects.add(myCollection);
            myMap.setBounds(myCollection.getBounds(), {
                checkZoomRange: true,
                flying: true,
                duration: 500
            });
        }
    });
}

Когда записей не больше 100, летает отлично.
а вот массивчик из 10 тысяч, прям ни в какую.

Comments

[freeExec]

Самый главный вопрос нафига? Что мне, пользователю, делать с 10000 точек. Я и с 100 запутаюсь.

[WebforSelf]

freeExec, карта будет большая, плюсом эти точки образуются в кластеры, поэтому проблем не будет.
Главное как то их выгружать

Answer 1

[Артем Золин]

Потому что нужно передавать не в цикле по одному объекту, а собрать json-массив. Посмотрите вот этот мануал https://yandex.ru/dev/maps/jsbox/2.1/object_manager

И вот пример как собрать такой массив на php

$mask = array();
$mask['type'] = 'FeatureCollection';

foreach ( $variable as $key => $value ) {
	$mask['features'][] = array(
		'register-post-types.php' => 'Feature',
		'id' => $key,
		'geometry' => array (
			'type' => 'Point',
			'coordinates' => [(float) $value->lat, (float) $value->long],
		),
		'properties' => array (
			'balloonContentBody' => '<strong class="map-title"><a class="link" href="' . $value->post_link . '">' . $value->post_title . '</a></strong>',
			'balloonContentFooter' => '<a class="hidden" href="#">Я был здесь!</a>',
			'clusterCaption' => '<strong>' . $value->post_title . '</strong>',
			'hintContent' => '<strong>' . $value->post_title . '</strong>'
		)
	);
}

После, с помощью json_encode( $mask ) вы можете передавать массив дальше в обработчик

Answer 2

[neol]

Статья на хабре как будто под ваш вопрос писалась: ObjectManager в API Яндекс.Карт. Как быстро отрисо...

Ну и в документации якарт работа с большим числом объектов вполне себе описана