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

Обзор

В этом руководстве мы рассказываем, как визуализировать данные из файла KML на карте Google и на боковой панели. Подробнее о работе с KML читайте в статье Слои 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 присваивает текстовому элементу BalloonStyle значение #[video].
Код $[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 присваивает файлу KML URL-адрес. Он также определяет следующие свойства объекта KMLLayer:
  • Дает слою команду не показывать информационное окно при нажатии.
  • Центрирует и масштабирует карту в границах контейнера.
  • Добавляет карту в созданный ранее объект карты.
В руководстве по Maps JavaScript API перечислены все доступные для этого слоя функции.
Загрузите свой файл 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.