KML Reference в Delphi по-русски #7: Добавляем «интерактивности» на карту — используем StyleMap

До настоящего момента мы использовали стили для того, чтобы изменить внешний вид элементов при прорисовке их на карте Google. Вместе с этим, KML позволяет изменять внешний вид элементов и в случае их выделения на карте. Для этого в KML предусмотрен элемент StyleMap, позволяющий указать какой стиль будет применяться к элементу в зависимости от того выделен он или нет.

Элемент StyleMap является наследником абстрактного StyleSelector:

Часть иерархии элементов KML (https://developers.google.com/kml/documentation/kmlreference)

StyleMap, судя по его описанию в KML Reference, может содержать как сами элементы стилей (Style), так и ссылки на них (StyleURL). Мы в Delphi воспользуемся вторым способом — будем указывать в StyleMap ссылки на общие стили в kml-документе.

Особенностью StyleMap является то, что этот элемент содержит в себе пары «имя — значение», где «имя» — это одно из двух значений (normal или highlight), а «значение» — ссылка на элемент стиля, который будет применяться к элементу в зависимости от его состояния:

• normal — стиль применяется, когда курсор мыши находится не на элементе
• highlight — стиль применится, когда пользователь наведет курсор мыши на элемент.

Таким образом, для того, чтобы реализовать работу со StyleMap в Delphi нам достаточно создать вот такой класс:

TKmlStyleMap = class(TKmlStyleSelector)
  private
    FNormalStyleURL: string;
    FHighlightStyleURL: string;
  protected
    function GetName: string; override;
  public
    constructor Create(const AID, ANormalURL, AHighlightURL: string); overload;
    function Save(AParentNode: IXMLNode): IXMLNode; override;
    property NormalStyleURL: string read FNormalStyleURL write FNormalStyleURL;
    property HighlightStyleURL: string read FHighlightStyleURL write FHighlightStyleURL;
  end;

Свойства TKmlStyleMap следующие:

Метод Save будет выглядеть следующим образом:

function TKmlStyleMap.Save(AParentNode: IXMLNode): IXMLNode;
var
  PairNode: IXMLNode;
begin
  Result := inherited CreateNode(GetName, AParentNode, nil);
  PairNode := Result.AddChild('Pair');
  PairNode.AddChild('key').Text := 'normal';
  PairNode.AddChild('styleUrl').Text := FNormalStyleURL;
  PairNode := Result.AddChild('Pair');
  PairNode.AddChild('key').Text := 'highlight';
  PairNode.AddChild('styleUrl').Text := FHighlightStyleURL;
end;

Ссылаться на StyleMap в любых элементах-наследниках Feature можно так же, как и на обычные стили, т.е. записывать ссылку на StyleMap в свойстве StyleURL. Чтобы продемонстрировать возможности работы со StyleMap создадим метку на карте, у которой, в зависимости от её состояния, будет изменяться иконка.
Для начала, создадим два стиля для иконки.
Первый стиль — для нормального состояния метки:

  Style := TKmlStyle.Create;
  ADocument.Styles.Add(Style);
  Style.ID := 'NormalStyle';
  Style.AddStyle(TKmlIconStyle);
  TKmlIconStyle(Style.SubStyle.Last).Scale := 1;
  TKmlIconStyle(Style.SubStyle.Last).Href := 'https://maps.google.com/mapfiles/kml/pal3/icon21.png';
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.X := 0.5;
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.Y := 0.5;
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.Xunits := huFraction;
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.Yunits := huFraction;

Второй стиль — для состояния, когда над меткой будет находиться курсор мыши:

 Style := TKmlStyle.Create;
  ADocument.Styles.Add(Style);
 
  Style.ID := 'HiglightStyle';
  Style.AddStyle(TKmlIconStyle);
  TKmlIconStyle(Style.SubStyle.Last).Scale := 2.5; //иконка будет увеличена в 2,5 раза
  TKmlIconStyle(Style.SubStyle.Last).Href := 'https://maps.google.com/mapfiles/kml/shapes/square.png';
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.X := 0.5;
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.Y := 0.5;
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.Xunits := huFraction;
  TKmlIconStyle(Style.SubStyle.Last).HotSpot.Yunits := huFraction;

Теперь создаем карту стилей (StyleMap), указав в конструкторе ID и ссылки на созданные стили:

ADocument.StyleMaps.Add(TKmlStyleMap.Create('StyleMap', '#NormalStyle', '#HiglightStyle'));

После создания таким образом kml-документа мы увидим следующую метку на карте:

Стиль метки в состоянии normal

Если же мы подведем к метке курсор мыши, то её иконка изменится следующим образом:

Стиль метки в состоянии highlight

Аналогичным образом можно менять стили любых элементов в KML. Например, убирать или менять заливку полигонов при их выделении, менять толщину линий и так далее. Таким образом можно добавить на ваши карты в Google Earth некий элемент «интерактивности».

Скачать обновленный модуль kml.pas можно всё там же:

В следующей статье разберемся как рисовать различные «нестандартные» для kml фигуры, например, окружности.

Книжная полка

	Автор: Дмитрий Осипов Название: Delphi. Программирование для Windows, OS X, iOS и Android Описание Подробно рассматривается библиотека FM, позволяющая создавать полнофункциональное программное обеспечение для операционных систем Windows и OS X, а также для смартфонов и планшетных компьютеров, работающих под управлением Android и iOS
	Автор: Андрей Шкрыль Название: Разработка клиент-серверных приложений в Delphi Описание: Рассмотрены практические вопросы по разработке клиент-серверных приложений в среде Delphi 7 и Delphi 2005 с использованием СУБД MS SQL Server 2000, InterBase и Firebird. Приведена информация о теории построения реляционных баз данных и языке SQL. Освещены вопросы эксплуатации и администрирования СУБД.
	Автор: Антон Григорьев Название: О чем не пишут в книгах по Delphi Описание: Рассмотрены малоосвещенные вопросы программирования в Delphi. Описаны методы интеграции VCL и API. Показаны внутренние механизмы VCL и приведены примеры вмешательства в эти механизмы. Рассмотрено использование сокетов в Delphi: различные режимы их работы, особенности для протоколов TCP и UDP и др.