Отображение множества маркеров на Яндекс.Картах

Если Вам необходимо отобразить на Яндекс.Карте большое количество объектов (например, несколько тысяч меток), то используя традиционный подход map.addOverlay(placemark); Вы можете столкнуться с проблемами. Долгое время загрузки карты в браузере, резкое замедление реакции карты при панарамировании и т. д.

В этой заметке я хочу рассмотреть один из способов решения данной проблемы — использование активных областей .

И так что нам необходимо для реализации примера:

1. Я подготовил файл в формате CSV с исходными данными — платежные терминалы QIWI в Нижнем Новгороде, 550 строк адреса и координаты.
2. Специальное приложение, которое позволяет из YMapsML-файла получить набор тайлов, от пользователя клуба API Яндекс.Карт twirl необходимых для создания слоя активных областей. Скачать приложение можно по адресу: http://github.com/twirl/hsTiler.

Для начала нужно из csv-файла получить YmapsML-файл.

Сделать это можно с помощью специального скрипта, его исходный код:

<?php
 
header("Content-type: text/xml");
 
echo '<ymaps xmlns="http://maps.yandex.ru/ymaps/1.x" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd"> 
    <Representation xmlns="http://maps.yandex.ru/representation/1.x"> 
        <Style gml:id="qiwist"> 
 	<iconStyle> 
            <href>http://api-maps.yandex.ru/i/0.4/placemarks/pmgns.png</href> 
                <size x="19" y="20"/> 
                <offset x="-9" y="-20"/> 
            </iconStyle> 
 
            <balloonContentStyle> 
                <template>#balloonTemplate</template> 
            </balloonContentStyle> 
        </Style> 
 
        <Template gml:id="balloonTemplate"> 
            <text><![CDATA[
                   <div style="font-size:12px;">
                        <div style="color:#ff0303;font-weight:bold">$[name]</div> 
                        <div>Адрес: $[metaDataProperty.AnyMetaData.adres]</div>
 
                    </div>]]></text> 
        </Template> 
    </Representation> 
 
    <GeoObjectCollection> 
        <gml:name>Объекты карте</gml:name> 
        <style>#qiwist</style> 
        <gml:featureMembers>';
 
$filename1 = "qiwi-nn-coordinats.csv";
 
$content1 = file($filename1);
 
for($i=0; $i<count($content1); $i++)
{
$content1[$i] = trim($content1[$i]);
 
$exp_str1 = explode(";", $content1[$i]);
 
 
echo '<GeoObject>', "n";
echo '<gml:name>Терминал №', $exp_str1[0], '</gml:name>', "n";
echo '<gml:metaDataProperty>', "n";
echo '<AnyMetaData>', "n";
echo '<adres>', $exp_str1[1], '</adres>', "n";
echo '</AnyMetaData>', "n";
echo '</gml:metaDataProperty>', "n";
echo '<gml:Point>', "n";
echo '<gml:pos>', $exp_str1[2], ' ', $exp_str1[3], '</gml:pos>', "n";
echo '</gml:Point>', "n";
echo '</GeoObject>', "n";
 
echo "n";
 
}
 
echo '</gml:featureMembers>
    </GeoObjectCollection>
</ymaps>';
 
?>

После этого разархивируем скаченный файл twirl-hsTiler-adaccd8.zip.

Копируем папку с о всем содержимым на сервер и добавляем в нее полученный файл ymapqiwi.xml и пустую папку qiwimap, где будут сохраняться тайлы для слоя активных областей.

Теперь мы должны отредактировать файл index.php в папке twirl-hsTiler-adaccd8.

Указать путь к YmapsML-файлу в седьмой строке, для нашего примера ‘XML’ => ‘ymapqiwi.xml’,

Минимальный и максимальный уровень масштаба, для которых необходимо создавать тайлы, в нашем примере это ‘minZoom’ => 15 и ‘maxZoom’ => 17

В строке 17 название папки для размещения тайлов примера и файла со стилями.

У нас это будет ‘directory’ => ‘qiwimap’

Вы также можете задать префикс для имен стилей, у нас это ‘styleKey’ => ‘qiwimap’.

Сохраняем измененный файл index.php

Запускаем в браузере этот файл на выполнение.

Через некоторое время мы увидим следующую картину

Это означает, что процесс генерации тайлов закончен и изменив центр карты и уровень масштаба мы увидим результат

Посмотреть пример в действии

Щелкнув по метке, мы можем посмотреть ее параметры.

Это не единственный способ решение проблемы размещения большого количества маркеров на Яндекс.Карте, можно использовать диспетчер объектов или кластеризацию.

В качестве дополнительной информации предлагаю Вам посмотреть два видео в которых как раз говориться о проектах в ходе реализации которых было необходимо решать проблему размещения большого количества маркеров на Яндекс.Карте.

Встреча клуба посвященная дню рождения API Яндекс.Карт — О проектах ГдеЭтотДом и Тили-Тесто

Встреча клуба посвященная дню рождения API Яндекс.Карт — О проекте Банкоматор