Интерактивные карты Яндекс. Язык YaMapsML

Ну вот наконец-то мы добрались и до интерактивных карт Яндекс. Интерактивные карты Яндекс - это карты, по которым, грубо говоря, можно перемещаться. То есть, можно увеличивать масштаб, перемещаться карту курсором, вот это одно самое главное преимущество интерактивных карт. Скажу сразу, что тут нам необходимо будет создавать xml-файл. Для того, чтобы обойтись без него, необходимо знать JavaScript и программировать страницу с помощь JavaScript, а потом уже загружать ее в свой проект. Как создавать xml-страницу, мы, тут рассматривать не будем. Это можно сделать в обычном текстовом редакторе, это можно сделать с помощью библиотеки NativeXML, после чего файл сохраняется с расширением *.xml. Все размещение объектов, на карте, происходит с помощью, так называемого, языка YaMapsML, другими словами, в xml-файле, который в дальнейшем подключается в Ваш проект.

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

Вообще, YaMapsML, как я раньше говорил, представляет собой XML-язык, по средствам которых и происходит отображение и нанесение географических данных, объектов в сервисе Яндекс-Карт.

Как Вы поняли, любой объект: текстовый, графический — заключается в определенные теги (элементы) языка. Например, для того, чтобы с помощью языка YaMapsML описать четырехугольник на карте, то необходимо в XML-файле, описать следующие элементы:

Исходный код

<gml:Polygon>
 <gml:exterior>
 <gml:LinearRing>
 <gml:posList>37.178027 55.486953 38.040535 55.486953 38.040535 56.018499 37.178027 56.018499 37.178027 55.486953</gml:posList>
 </gml:LinearRing>
 </gml:exterior>
</gml:Polygon>

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

Также хочется сказать, про один главный элемент данного языка, который Вы обязательно будете указывать — это элемент (тег) — repr:View, который определяет встроенный тип карты:

MAP - схематическое отображение объектов, местности
SATELLITE - спутниковая карта местности
HYBRID - спутниковая карта местности, на которой присутствуют названия объектов местности

Пример определения типа карты, следующий:

Исходный код

<?xml version="1.0" encoding="UTF-8"?>
<ymaps:ymaps xmlns="https://maps.yandex.ru/ymaps/1.x" xmlns:gml="https://www.opengis.net/gml">
    <repr:Representation xmlns="https://maps.yandex.ru/representation/1.x">
        <repr:View>
            <repr:mapType>MAP</repr:mapType>
            <gml:boundedBy>
                <gml:Envelope>
                    <gml:upperCorner>45 60</gml:upperCorner>
                    <gml:lowerCorner>30 50</gml:lowerCorner>
                </gml:Envelope>
            </gml:boundedBy>
        </repr:View>
    </repr:Representation>
</ymaps:ymaps>

Немного, я думаю, понятно, о чем пойдет речь. Теперь, давайте приступим к нашему проекту. Создадим проект в Delphi и установим на форме следующие компоненты:

TWebBrowser
TButton

Как Вы уже поняли, то в TWebBrowser, мы будем отображать нашу интерактивную карту Яндекс, а по нажатию на кнопку, она соответственно будет грузиться.

Самого программирования на Delphi тут немного, главное правильно разобраться в языке YaMapsML, который на мой взгляд очень простой.

Более подробную информацию по языку YaMapsML, а также все элементы и их обозначения, Вы можете найти на официальном сайте данного API

Да, не забываем, что API-ключ нам по-прежнему тут необходим будет. Его мы будем подключать в html-страницу, соответственно и наш, сформированный xml-файл.

Нам необходимо заранее сформировать html-страницу, ну или хотя бы ее код, в дальнейшем она будет неизменна. А уже меняя xml-файл, посредством языка YaMapsML, у нас соответственно будут меняться на карте географические данные.

Код нашей html-страницы, я выкладывать не буду, ее Вы сможете увидеть в исходнике проекта.

Привожу пример xml-файла, который просто размещает на интерактивной карте Яндекс - метку:

Исходный код

<ymaps:ymaps xmlns:ymaps="https://maps.yandex.ru/ymaps/1.x"
 
       xmlns:repr="https://maps.yandex.ru/representation/1.x"
 
       xmlns:gml="https://www.opengis.net/gml"
 
       xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
 
       xsi:schemaLocation="https://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd">
    <ymaps:GeoObjectCollection>
        <gml:name>Объекты карте</gml:name>
        <gml:featureMembers>
            <ymaps:GeoObject>
                <gml:name>Имя</gml:name>
                <gml:description>Описание</gml:description>
                <gml:Point>
                    <gml:pos>37.63 55.75</gml:pos>
                </gml:Point>
            </ymaps:GeoObject>
        </gml:featureMembers>
    </ymaps:GeoObjectCollection>
</ymaps:ymaps>

Сам html-файл, у меня, находятся в проекте, в котором прописан мой API-ключ, а также подключен, данный xml-файл.

Конечно, можно обойтись без данного языка, который формирует xml-файл, но зато придется, программировать Вам свою карту (нанести географические данные) с помощью JavaScript и уже затем подключать его в свой проект.

Так, что смотрите примеры на официальном сайте, а также полное руководство по элементам языка YaMapsML.

Исходник данной статьи, можно скачать тут

Интерактивные карты Яндекс. Язык YaMapsML

Похожие записи: