Визуализация данных KML

Обзор

В этом руководстве мы рассказываем, как визуализировать данные из файла KML на карте Google и на боковой панели. Подробнее о работе с KLM читайте в статье Слои KML и GeoRSS. Нажмите маркер на следующей карте, чтобы увидеть данные на боковой панели.

Ниже приведен полный программный код, необходимый для создания карты и боковой панели.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Попробуйте сами

Нажмите на значок <> в правом верхнем углу этого окна и попробуйте поработать с кодом в JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Начало работы

Создание приведенных в нашем примере карты и боковой панели можно разбить на следующие этапы:

  1. Настройка файла KML
  2. Визуализация слоя KMLlayer
  3. Визуализация данных на боковой панели

Настройка файла KML для импорта

Структура вашего файла должна соответствовать стандарту KML. Подробнее об этом стандарте читайте на сайте Open Geospatial Consortium. Описание языка, справочные материалы и базовую документацию для разработчиков также можно найти в нашем Обзоре документации по KML.

Если вы только учите язык и у вас нет своего файла KML:

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

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
    
  • найдите файл KML в интернете, например с помощью оператора filetype в Google Поиске.

    Замените velodromes на любой поисковый запрос или опустите его, чтобы найти все файлы KML.

Если вы создаете свой собственный файл, то допускаем в целях примера, что:

  • Вы разместили файл в открытом доступе в интернете. Это требование применимо ко всем приложениям, которые загружают KML в KMLLayer, чтобы серверы Google могли найти и извлечь его содержимое для отображения на карте.
  • Этот файл находится на странице, не защищенной паролем.
  • Объекты в слое содержат контент для информационных окон. Его можно разместить в элементе description или включить с помощью элемента ExtendedData и замены объектов (подробнее см. ниже). Оба эти элемента доступны как свойства infoWindowHtml.

Элементы ExtendedData

Файл KML из этого руководства содержит информацию в элементе ExtendedData. Чтобы передать эту информацию в описание объекта, используйте свойство замены объекта (фактически является переменной тега BalloonStyle).

В таблице ниже поясняется пример кода для этого раздела.

Код и описание

<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

Файл KML содержит единственный элемент Style, который применяется ко всем меткам.
Элемент Style присваивает значение #[video] текстовому элементу BalloonStyle.
Код $[x] дает задание парсеру KML найти элемент Data с названием video и добавить его во всплывающее окно.

<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

Каждый объект Placemark содержит элемент ExtendedData, в котором хранится элемент Data. Обратите внимание, что объекты Placemark содержат только один элемент Data с атрибутом имени video.
В файле из этого руководства во все объекты всплывающих окон Placemark добавлены встроенные видео YouTube.

Подробнее о замене объектов читайте в главе Персонализированные данные документации по KML.

Визуализация слоя KMLlayer

Инициализация карты

В таблице ниже поясняется пример кода для этого раздела.

Код и описание

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Чтобы отобразить KML на карте, сначала необходимо создать ее.
Этот код создает новый объект Google Карт, сообщает ему параметры центрирования и масштабирования, вставляет карту в контейнер div.
Подробнее о базовых операциях с картами Google читайте в статье Как добавить карту Google с маркером на свой сайт.

Создание слоя KMLLayer

В таблице ниже поясняется пример кода для создания слоя KMLLayer.

Код и описание

var kmlLayer = new google.maps.KmlLayer();

Создает новый объект KMLLayer для отображения вашего KML.

var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

Конструктор KMLLayer присваивает URL-адрес файлу KML. Он также определяет следующие свойства объекта KMLLayer:
  • Дает команду слою не показывать информационное окно при нажатии.
  • Центрирует и масштабирует карту в границах контейнера.
  • Добавляет карту в созданный ранее объект Map.
В руководстве по Maps JavaScript перечислены все доступные для этого слоя функции.
Загрузите свой файл HTML, чтобы отобразить содержимое файла KML как слой поверх базовой карты. Вы увидите, что нажатие на объекты не вызовет ответной реакции.

Визуализация данных на боковой панели

Ниже дается пояснение к настройкам, которые отображают содержимое информационного окна на боковой панели при нажатии на объект карты. Как это происходит:

  • Система отслеживает событие клика (нажатия на объекты) в слое KMLLayer.
  • Данные нажатого объекта считываются.
  • Считанные данные записываются на боковую панель.

Добавление прослушивателя

Google Карты позволяют прослушивать действия пользователей, например клики и нажатия клавиш, и настраивать ответные действия интерфейса. Для этого к событиям типа click добавляется прослушиватель.

В таблице ниже поясняется пример кода для этого раздела.

Код и описание

kmlLayer.addListener('click', function(event) {});

В прослушивателе kmlLayer.addListener заданы:
  • Тип отслеживаемого события (в нашем примере это click).
  • Функция, вызываемая при возникновении события.
Подробнее о событиях читайте в руководстве для разработчиков.

Запись данных слоя KML на боковую панель

Вы уже отслеживаете нажатия (события клика) на объекты в слое. Теперь приложение можно настроить на запись данных KML и информационного окна на боковую панель.

В таблице ниже поясняется пример кода для этого раздела.

Код и описание

var content = event.featureData.infoWindowHtml;

Записывает содержимое информационного окна в переменную.

var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Определяет контейнер div для записи и заменяет в нём код HTML содержимым объекта.

kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Эти строки кода становятся функцией в конструкторе addListener.

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

Дополнительная информация

Узнайте больше об использовании файлов KML.