Отображение множества маркеров на Яндекс.Картах
Если Вам необходимо отобразить на Яндекс.Карте большое количество объектов (например, несколько тысяч меток), то используя традиционный подход 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
Запускаем в браузере этот файл на выполнение.
Через некоторое время мы увидим следующую картину
Это означает, что процесс генерации тайлов закончен и изменив центр карты и уровень масштаба мы увидим результат
Посмотреть пример в действии http://webmap-blog.ru/examples/qiwimap/index.html
Щелкнув по метке, мы можем посмотреть ее параметры.
Это не единственный способ решение проблемы размещения большого количества маркеров на Яндекс.Карте, можно использовать диспетчер объектов или кластеризацию.
В качестве дополнительной информации предлагаю Вам посмотреть два видео в которых как раз говориться о проектах в ходе реализации которых было необходимо решать проблему размещения большого количества маркеров на Яндекс.Карте.
источник http://webmap-blog.ru
Отображение множества маркеров на Яндекс.Картах - Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.
