Интерактивная
карта
Интерактивная
карта
Интерактивная карта - это электронная карта, работающая в режиме диалога человека и ЭВМ, и
представляет собой визуальную информационную систему. Помимо информации, которая
видна сразу при чтении карты, интерактивные карты обладают скрытой информацией,
которая появляется после определенных действий на карте (например, при
наведении курсора на объект и появляется дополнительная информация о данном
объекте).
Примерами таких интерактивных карт могут быть карты метро и городского
наземного транспорта, карты автомобильных и железных дорог, расположения
заправок и магазинов, туристских достопримечательностей и памятников
архитектуры, карты погоды и т.д.
Наибольшую известность и признание среди онлайновых проектов получили
сервисы Google Maps, Google Earth и NASA World Wind, содержащие информацию по всей земной поверхности.
В качестве представленных на современных интерактивных картах объектов
сегодня могут фигурировать различные объекты. Анализируя Интернет-карты,
размещаемые на разных сайтах, можно систематизировать их следующим способом:
· Статичные карты, дающие одноплановую информацию о
картографируемой территории;
· Интерактивные карты, обладающие функциями интерактивного
управления;
· Электронные справочные
карты-системы и атласы,
снабженные большими базами данных и организующие поиск необходимой информации.
При создании электронных карт используются различные программы:
1.
Например,
CorelDRAW, Adobe Illustrator, Macromedia Freehand и
т.п. Для использования такой картой необходима соответствующая программа, в
которой она была создана, или программа, поддерживающая данный формат карты. У
таких карт, обычно интерактивность
отсутствует.
2.
Существуют
специальные (картографические) программы, такие как MapInfo, Panorama, Microstation, Нева и другие программы. В
результате такая карта представляет собой файл (или несколько файлов). Для работы
с такой картой необходима соответствующая программа, в которой она была создана
или программа, поддерживающая данный формат карты.
3.
Существуют
картографические программы такие как, например, Gisware, Curious World Maps,
MapGps и т.п. В отличие от двух предыдущих
случаев, нет необходимости использовать программу, в которой данная карта была
создана, так как в этом случае необходимый механизм визуализации карты будет в
самом файле карты.
Все это программное обеспечение является коммерческим и распространяется
по платной лицензии.
Создать интерактивную карту можно, используя:
1. Язык гипертекстовой разметки HTML версии 5;
2. Объектно-ориентированный язык сценариев JavaScript;
3. Формальный язык стилей CSS версии 3;
4. Библиотеку Bootstrap (getbootstrap.com),
предназначенную для создания сайтов и веб-приложений;
5. Библиотеку Leaflet (leafletjs.com),
предназначенную для отображения карт на веб-сайтах. Она позволяет разработчику,
не знакомому с ГИС,
отображать растровые карты, состоящие из маленьких фрагментов (tile). Фрагменты, в свою очередь, могут
быть дополнительными слоями, накладываемыми поверх основного. Слои могут быть
интерактивными, например, отображать информацию при щелчке мышки по заданному
месту карты.
Отметим, что данное программное обеспечение не является коммерческим и
свободно распространяется. Это основное отличие от картографических программ,
которые мы упомянули в данной статье.
Процесс создания интерактивной карты можно разбить на следующие этапы:
1.
Создание
базы данных для интерактивной карты.
2.
Описание
и создание логической структуры карты в виде графических схем. Подбор
соответствующих растровых карт с помощью интернет-карт
Yandex или Google.
3.
Растровая
карта разбивается на части (tile). Это можно сделать с помощью специального плагина Photoshop
Google Maps Tile Cutter Script (github.com)
в растровом редакторе Photoshop.
4.
Создается
HTML-документ, в которой с помощью Leaflet-библиотеки
эти части объединяются в web-карту
(смотри рис. 1):
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8" />
<title>Статическая карта на основе
Leaflet.js</title>
<link rel="stylesheet"
href="styles/bootstrap.min.css"> <!-- Стили Bootstrap 4 -->
<link rel="stylesheet"
href="styles/leaflet.css"> <!-- Стили Leaflet.js -->
<!--
Собственные стили -->
<style>
html {
position: relative; height: 100%;
}
body {
height: 100%;
}
/* Карта */
#map
{
width:100%; height:100%;
color: #CCC; background: #f9e7d1;
}
#map
.leaflet-popup-content {
width:578px!important;
}
</style>
</head>
<body>
<div
id="map"></div> <!-- Подключение карты -->
<!-- Скрипты
bootstrap 4 -->
<script
src="scripts/tether.min.js"></script>
<script
src="scripts/jquery-3.1.1.slim.min.js"></script>
<script
src="scripts/bootstrap.min.js"></script>
<!-- Скрипт
библиотеки для карт Leaflet.js -->
<script
src="scripts/leaflet-src.js"></script>
<!-- Скрипты
подключения карты -->
<script>
// Объявление карты
- L.map('map')
// Начальные
координаты - [0, 0]
// Масштаб
по-умолчанию - 3
var map =
L.map('map').setView([0, 0], 3);
// Загрузка слоя (тайлов) для карты
L.tileLayer('tiles/{z}/{x}/{y}.png', {
minZoom:
1, maxZoom:
4, noWrap: false,
continuousWorld:
false, crs: L.CRS.Simple
}).addTo(map);
// Закрепить карту по середине
map.setMaxBounds(new
L.LatLngBounds(
map.unproject([0, 1779], map.getMaxZoom()),
map.unproject([3181,
0], map.getMaxZoom())
));
</script>
</body>
</html>
Рис. 1
5.
Создаются
метки (или области) на web-карте,
которые связаны с базой данных (смотри рис. 2).
// Метка
var m1
= L.marker([72.91964, -41.13281],
{
draggable:
false // зафиксирована
}
).addTo(map);
//Содержание
всплывающего окна
m1.bindPopup('<b>Столица
Тувы</b>');
Рис. 2
Для определения координат метки можно использовать код создания метки,
которую можно перемещать по карте протяжкой мышки и щелчком мышки вызвать
текущие координаты:
// Метка для
уточнения координат
var metka = L.marker([75.65959,
-25.30273], { draggable: true } ).addTo(map);
metka.bindPopup('<b>Метка для уточнения
координат</b>');
metka.on('dragend', function(e){
metka.getPopup().setContent(metka.getLatLng().toString()).openOn(map);
});
Рис. 3
Технология создания интерактивных карт позволяет не только оцифровывать результаты
исследовательской работы в различных областях науки, но и облегчает анализ
полученных результатов, благодаря наглядности этих карт.