Онлайн сервис для конвертирования gpx-треков в YMapsML

Если у Вас имеется GPS-навигатор, то возможно сохранять путевые треки в формате GPX.

GPX (GPS eXchange Format) — это текстовый формат хранения и обмена данными GPS, являющийся подмножеством XML.

Формат позволяет хранить информацию об ориентирах (waypoints), маршрутах (routes) и треках (tracklogs). Для каждой точки хранятся её долгота, широта и высота над уровнем моря (если имеется информация о высоте). Для точек трека хранится также время прохождения точки. XML-схема предусматривает также хранение произвольной пользовательской информации по каждой точке.

Я хочу познакомить Вас с одним онлайн сервисом для конвертирования  gpx-треков в YMapsML и отображения на Яндекс.Картах.

Сервис расположен по адресу http://map.z66.ru/gpx2ymaps/

Использовать его очень просто.

Вы выбираете gpx-файл на своем компьютере для его загрузки (максимальный размер файла 300 кб).

Нажимаете на кнопку загрузить.

После этого отображается Яндекс.Карта с загруженным треком.



Дополнительные возможности сервиса: вы можете получить ссылку на страницу Яндекс.Карта с загруженным треком для последующего использования (разместить ссылку в своем блоге или послать по e-mail), сохранить исходный gpx-трек, сохранить сформированный YMapsML-файл для работы с ним.

Ссылка на пример http://map.z66.ru/gpx2ymaps/view/d816d1634d0e88db3ef155c58fcaf607

Загрузить сформированный YMapsML-файл здесь

Продолжаем изучать язык YMapsML для Яндекс.Карт

В предыдущей заметке «Начинаем изучать язык YMapsML для Яндекс.Карт» мы начали с Вами изучать язык YMapsML для описания географических данных на картах Яндекса.

В этой заметке мы продолжим его изучение.

Узнаем, как описываются несколько объектов в одном файле, о использовании стилей и задания начальных параметров карты.

Давайте рассмотрим это на конкретном примере файла в формате  YMapsML (загрузить полный код файла).

Часть кода файла prim_YMapsML_2.xml

<?xml  version="1.0" encoding="utf-8"?>

<ymaps xmlns="http://maps.yandex.ru/ymaps/1.x" xmlns:gml="http://www.opengis.net/gml">



<Representation xmlns="http://maps.yandex.ru/representation/1.x">

<View>

<mapType>MAP</mapType>

<gml:boundedBy>

<gml:Envelope>

<gml:upperCorner>44.121546 56.372383</gml:upperCorner>

<gml:lowerCorner>43.799509 56.231518</gml:lowerCorner>

</gml:Envelope>

</gml:boundedBy>

</View>

<Style gml:id="styleCinimaNN">

<iconStyle>

<href>http://www.map.cek.ru/images/stories/kinoteatrs.jpg</href>

<size x="20" y="20"></size>

<offset x="-10" y="-10"></offset>

</iconStyle>

<balloonContentStyle>

<template>#balloonTemplate</template>

</balloonContentStyle>

</Style>

<Template gml:id="balloonTemplate">

<text>

<![CDATA[<div style="text-align:center"><strong>$[name]</strong><br /><img src="http:$[metaDataProperty.AnyMetaData.link]" alt="" width="100" height="62"/><br />$[description]</div>]]>

</text>

</Template>

</Representation>

<GeoObjectCollection>

<gml:name>Кинотеатры Нижнего Новгорода</gml:name>

<style>#styleCinimaNN</style>

<gml:featureMembers>

<GeoObject>

<gml:name>Кинотеатр Импульс</gml:name>

<gml:description>пр. Гагарина, 192</gml:description>

<gml:metaDataProperty>

<AnyMetaData>

<link>//www.map.cek.ru/images/stories/afisha/cinema/imp.jpg</link>

</AnyMetaData>

</gml:metaDataProperty>

<gml:Point>

<gml:pos>43.959184 56.237457</gml:pos>

</gml:Point>

</GeoObject><GeoObject>

<gml:name>Кинотеатр Канавинскийсий</gml:name>

<gml:description>ул. Фильченкова, 7</gml:description>

<gml:metaDataProperty>

<AnyMetaData>

<link>//www.map.cek.ru/images/stories/afisha/cinema/kanaviskiy.jpg</link>

</AnyMetaData>

</gml:metaDataProperty>

<gml:Point>

<gml:pos>43.944335 56.317977</gml:pos>

</gml:Point>

</GeoObject>

…

<GeoObject>

<gml:name>Кинотеатр Электрон</gml:name>

<gml:description>пр. Гагарина, 98</gml:description>

<gml:metaDataProperty>

<AnyMetaData>

<link>//www.map.cek.ru/images/stories/afisha/cinema/elektron.jpg</link>

</AnyMetaData>

</gml:metaDataProperty>

<gml:Point>

<gml:pos>43.978839 56.274389</gml:pos>

</gml:Point>

</GeoObject>

</gml:featureMembers>

</GeoObjectCollection>



</ymaps>

Если отобразить содержимое этого файла на Яндекс.Карте, мы увидим следующее



Посмотреть работающий пример и исходный код можно здесь.

И так что же здесь интересного.

Первые две строки нам уже известны.

В них задается формат файла XML версии 1.0 и его кодировка utf-8.

Далее идет корневой элемент файла ymaps:ymaps. В его атрибутах описываются пространства имен XML и используемые XSD-схемы.

Элемент ymaps:ymaps содержит внутри себя два контейнера repr:Repsentation и GeoObjectCollection.

Первый  repr:Repsentation содержит в себе правила отображения геообъектов на карте – это элементы View (задает область показа геообъектов) и Style (содержит описание внешнего вида объектов), элемент Template – содержит шаблон для представления html-объектов карты.

Второй  GeoObjectCollection  служит для описания набора геообъектов.

Рассмотрим подробнее назначение и параметры каждого из элементов кода.

Элемент View включает в себя следующие теги:

mapType – задает тип карты, в нашем случае MAP обычная карта.

gml:boundedBy – задет границы области показа на карте, в нашем случае задается прямоугольная область с координатами нижнего левого угла gml:lowerCorner - 43.799509 56.231518 и правого верхнего угла gml:upperCorner - 44.121546 56.372383.

После этого задается стиль для отображения меток кинотеатров iconStyle и для содержимого балуна balloonContentStyle.

В контейнере Template задается шаблон для html-содержания балуна.

Далее в контейнере GeoObjectCollection описывается набор точек.

Задается его наименование gml:name и общий стиль для всех styleCinimaNN.

Каждая точка задается конкретными параметрами:

• Наименование кинотеатра – name,


• Описание – description,


• Ссылка на картинку внутри балуна – link


• Координаты точки – Point

Продолжение следует …

Начинаем изучать язык YMapsML для Яндекс.Карт

Также как у API карт Google (язык – KML) для описания географических данных на картах Яндекса  используется специальный язык YMapsML (Yandex Maps Markup Language).

YMapsML – это XML язык с помощью которого возможно в текстовом виде задать участок карты с нанесенными метками и другими объектами, а затем отобразить его в браузере средствами JS API Яндекс.Карт.

Также он используется сервисом геокодирования для описания найденных по запросу географических объектов.

В качестве геометрических объектов можно использовать метку или линию.

Можно задавать стиль отображения объектов и границы области показа.

Давайте для начала рассмотрим простейший пример файла на языке YMapsML и как вывести его содержимое с использованием API Яндекс.Карт.

Привожу код файла примера:

<?xml version="1.0" encoding="utf-8"?>

<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">

<GeoObjectCollection>

<gml:name>Объекты карте</gml:name>

<gml:featureMembers>

<GeoObject>

<gml:name>Дворец спорта</gml:name>

<gml:description>Дворец спорта «Нагорный» просп. Гагарина, 29</gml:description>

<gml:Point>

<gml:pos>43.979459 56.291908</gml:pos>

</gml:Point>

</GeoObject>

</gml:featureMembers>

</GeoObjectCollection>

</ymaps>

В этом примере:

В первой строке задается формат файла XML версии 1.0 и его кодировка utf-8.

Далее идет корневой элемент файла ymaps:ymaps. В его атрибутах описываются пространства имен XML и используемые XSD-схемы.

Элемент  ymaps:ymaps может содержать в себе несколько тегов, служащих контейнерами для различных данных или групп данных, отображаемых на карте.

Это repr:Repsentation – который содержит в себе правила отображения геообъектов на карте (в нашем примере отсутствует).

И контейнер GeoObjectCollection – содержит в себе описания объектов, помещаемых на карту.

Элемент gml:featureMembers – содержит в себе описание отдельного геообъекта или группы.

В нашем случае это простой элемент метка.

О имеет имя - name Дворец спорта, описание – description Дворец спорта «Нагорный» просп. Гагарина, 29.

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

<gml:Point>

<gml:pos>43.979459 56.291908</gml:pos>

</gml:Point>

Для визуализации данного файла в наш пример вывода Яндекс.Карты (см.первый код в заметке "Добавляем маркер на карту используя API Яндекс.Карт") необходимо добавить несколько строк в функцию init.

var ml = new YMaps.YMapsML( 'http://webmap-blog.ru/examples/YMapsML/prim_YMapsML_1.xml' );

map.addOverlay(ml);

YMaps.Events.observe(ml, ml.Events.Fault, function (error) {

alert('Ошибка: ' + error);

});

В первой строке мы присваиваем переменной ml путь к файлу с нашим примером prim_YMapsML_1.xml.

И затем добавляем его на нашу карту.

Последние три строки служат для контроля ошибок, возникающих при загрузке YMapsML-документа.

Загружаем пример в браузере и наблюдаем результат.



Посмотреть работающий пример и исходный код можно здесь.

Далее я продолжу описания работы с языком YMapsML

Более подробную информацию Вы можете найти в документации на странице по адресу http://api.yandex.ru/maps/ymapsml/doc/ref/concepts/About.xml