Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Министерство образования и науки РФ
Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования
«Пермский национальный исследовательский политехнический университет»
Кафедра микропроцессорных средств автоматизации
А.В. Кычкин
ГЕОИНФОРМАЦИОННЫЕ СИСТЕМЫ
Методические указания по выполнению
лабораторной работы
«Знакомство с информационными технологиями разработки
Web-ориентированных ГИС»
Издательство
Пермского национального исследовательского политехнического университета
2013
1.1 Цели и задачи работы 3
1.2 Краткие технические требования для геоинформационной системы GoogleMaps 4
1.2.1 Системные требования компьютера: 4
1.2.2 Веб-браузеры,поддерживающиеAPIJavaScript Карт Google: 5
1.3 Краткие описание языков HTML и JavaScript 6
1.3.1 Описание HTML 6
1.3.2 Описание JavaScript 11
1.4 Варианты заданий 18
1.5 Этапы разработки 19
1.6 Пример разработки информационной системы 20
1.6.1 Начало работы 20
1.6.2 Пример рабочего скрипта 29
1.7 Контрольные вопросы и задания 33
1.8 Содержание отчета по работе 34
1.9 Правила оформления схем алгоритмов и программ 35
Цели:
углубить знания о сущности и применении Web ориентированной информационной системы;
усвоить методы и средства разработки Web ориентированной географической информационной системы.
Задачи:
Ознакомиться с Google Maps JavaScript API V3;
Изучить основные элементы приложения GoogleMaps API
Используя «Руководство по GoogleMapsJavaScript API V3» написать скрипт для отображения комплекса ПНИПУ на GMaps;
|
|
Требования для Windows |
Требования для Mac |
Требования для Linux |
|
Операционная система |
Windows XP с пакетом обновления 2 или более поздней версии |
Mac OS X 10.6 или более поздняя версия |
Ubuntu 10.04+ |
|
Процессор |
IntelPentium 4 или более поздней версии |
Intel |
IntelPentium 3/Athlon 64 или более поздней версии |
|
Свободное место на диске |
100 МБ |
||
|
ОЗУ |
128 МБ |
СлужбаGoogleMapsJavaScriptAPIподдерживаетследующиевеб-браузеры.
Google Maps JavaScript API V3:
IE 7.0 иболеепозднихверсий (Windows);
Firefox 3.0 и более поздних версий (Windows, Mac OS X, Linux);
Safari 4 и более поздних версий (Mac OS X, iOS);
Chrome (Windows, Mac OS X, Linux);
Android;
BlackBerry 6;
Dolfin 2.0 и более поздних версий (SamsungBada).
Google Maps JavaScript API V2:
IE 6.0 и более поздних версий (Windows);
Firefox 2.0 и более поздних версий (Windows, Mac OS X, Linux);
Safari 3.1 и более поздних версий (Mac OS X, iOS);
Chrome (Windows).
Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.
Тег <body>
Описание
Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.
Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.
Синтаксис
<body>
...
</body>
Атрибуты
Alink-Устанавливает цвет активной ссылки.
Background - Задает фоновый рисунок на веб-странице.
Bgcolor - Цвет фона веб-страницы.
Bgproperties - Определяет, прокручивать фон совместно с текстом или нет.
Bottommargin - Отступ от нижнего края окна браузера до контента.
Leftmargin - Отступ по горизонтали от левого края окна браузера до контента.
Link - Цвет ссылок на веб-странице.
Rightmargin - Отступ от правого края окна браузера до контента.
Scroll - Устанавливает, отображать полосы прокрутки или нет.
Text - Цвет текста в документе.
Topmargin - Отступ от верхнего края окна браузера до контента.
Vlink - Цвет посещенных ссылок.
Тег <title>
Описание
Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Синтаксис
<head>
<title>Заголовок</title>
</head>
Закрывающий тег обязателен.
Атрибутов нет.
Тег <head>
Описание
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.
Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.
Синтаксис
<head>
...
</head>
Закрывающий тег не обязателен.
Атрибуты
profile
Указывает адрес профиля метаданных.
Тег <html>
Описание
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа (DocumentTypeDefinition, DTD), устанавливаемого через элемент <!DOCTYPE>. Закрывающий тег <html> должен всегда стоять в документе последним.
Синтаксис
<html>
...
</html>
Атрибуты
Title Добавляет всплывающую подсказку на веб-страницу.
Manifest Указывает файл манифеста, необходимый для создания оффлайнового приложения.
Xmlns Указывает пространство имен для XHTML-документов.
Также для этого тега доступны универсальные атрибуты.
Закрывающий тег не обязателен.
Тег <script>
Описание
Тег <script> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Синтаксис
<script type="тип">
...
</script>
<script type="тип" src="../files/237/files/237/URL"></script>
Атрибуты
Defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
Language Устанавливает язык программирования на котором написан скрипт.
Src Адрес скрипта из внешнего файла для импорта в текущий документ.
Type Определяет тип содержимого тега <script>.
Закрывающий тег обязателен.
JavaScript — прототипно-ориентированный скриптовый язык программирования. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.
Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Основные архитектурные черты:
1) динамическая типизация;
2) слабая типизация;
3) автоматическое управление памятью;
4) прототипное программирование;
5) функции как объекты первого класса;
JavaScript — быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения.
Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя. В браузере Firefox существует способ «подписи» скриптов с целью обхода части ограничений, но он нестандартный и не кросс-браузерный.
Этих ограничений нет там, где JavaScript используется вне браузера, например на сервере.
Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.
JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией — песочницей. Возможности по доступу к устройствам также прорабатываются в современных стандартах и, частично, доступны в некоторых браузерах.
JavaScript, работающий в одной вкладке, почти не может общаться с другими вкладками и окнами. За исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).
Есть способы это обойти, и они раскрыты в учебнике, но для этого требуется как минимум явное согласие обеих сторон. Просто так взять и залезть в произвольную вкладку с другого домена нельзя.
Из JavaScript можно легко посылать запросы на сервер, с которого пришла страничка. Запрос на другой домен тоже возможен, но менее удобен, т.к. и здесь есть ограничения безопасности.
Есть как минимум три замечательных особенности JavaScript:
Полная интеграция с HTML/CSS.
Простые вещи делаются просто.
Поддерживается всеми распространенными браузерами и включен по умолчанию.
Этих трех вещей одновременно нет больше ни в одной браузерной технологии. Поэтому JavaScript и является самым распространенным средством создания браузерных интерфейсов.
Программы на языке JavaScript можно вставить в любое место HTML при помощи тега SCRIPT. Например:показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки
<!DOCTYPE HTML>
<html>
<head>
<!-- Тег meta для указания кодировки -->
<meta charset="utf-8">
</head>
<body>
<p>Начало документа...</p>
<script>
alert('Привет, Мир!');
</script>
<p>...Конец документа</p>
</body>
</html>
Этот пример использует следующие элементы:
<script> ... </script>
Тег script содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута type, но сейчас он уже не нужен. Достаточно просто<script>.
Браузер, когда видит <script>:
Начинает отображать страницу, показывает часть документа до script
Встретив тег script, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.
Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.
Попробуйте этот пример в действии, обратите внимание что пока браузер не выполнит скрипт - он не может отобразить часть страницы после него.
alert(...)
Отображает окно с сообщением и ждет, пока посетитель не нажмет «Ок»
ри попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой — выводятся «кракозяблы», «квадратики» и «вопросики» вместо русского текста.
Чтобы всё было хорошо, нужно:
Убедиться, что в HEAD есть строка <meta charset="utf-8">. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку.
Убедиться, что редактор сохранил файл в кодировке UTF-8, а не, скажем, вwindows-1251. На английском соответствующий параметр может называться «charset» или «encoding».
Указание кодировки — часть обычного HTML, к JavaScript не имеет отношения.
Если JavaScript-кода много — его выносят в отдельный файл, который подключается в HTML:
<script src="../files/237/files/237//path/to/script.js"></script>
Здесь /path/to/script.js - это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
Браузер сам скачает скрипт и выполнит. В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
В зависимости от того, для чего вы делаете скрипт, понадобится работать с информацией.
Если это электронный магазин - то это товары, корзина. Если чат - посетители, сообщения и так далее.
Переменные
Чтобы хранить информацию, используются переменные.Переменная состоит из имени и выделенной области памяти, которая ему соответствует.
Для объявления или, другими словами, создания переменной используется ключевое слово var:
var message;
После объявления, можно записать в переменную данные:
var message;
message = 'Привет'; // сохраним в переменной строку
Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:
var message;
message = 'Привет';
alert(message); // выведет содержимое переменной
Для краткости можно совместить объявление переменной и запись данных:
var message = 'Привет';
Константа — это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например:
var COLOR_BLUE = "#00F";
var COLOR_RED = "#0F0";
var COLOR_GREEN = "#F00";
var COLOR_ORANGE = "#FF7F00";
alert(COLOR_RED); // #0F0
Технически, константа является обычной переменной, то есть её можно изменить. Но мы договариваемся этого не делать.
Зачем нужны константы? Почему бы просто не использовать "#F00" или "#0F0"?
Во-первых, константа — это понятное имя, в отличие от строки "#FF7F00".
Во-вторых, опечатка в строке может быть не замечена, а в имени константы её упустить невозможно — будет ошибка при выполнении.
Константы используют вместо строк и цифр, чтобы сделать программу понятнее и избежать ошибок.
В JavaScript существует несколько основных типов данных.
Типы данных
Число number:
var n = 123;
n = 12.345;
Единый тип число используется как для целых, так и для дробных чисел.
Существуют специальные числовые значения Infinity (бесконечность) и NaN (ошибка вычислений). Они также принадлежат типу «число».
Например, бесконечность Infinity получается при делении на ноль:
alert( 1 / 0 ); // Infinity
Ошибка вычислений NaN будет результатом некорректной математической операции, например:
alert( "нечисло" * 2 ); // NaN, ошибка
Строка string:
var str = "Мама мыла раму";
str = 'Одинарные кавычки тоже подойдут';
В JavaScript одинарные и двойные кавычки равноправны. Можно использовать или те или другие.
Тип символ не существует, есть только строка
В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это char. В JavaScript есть только тип «строка» string.
Булевый (логический) тип boolean. У него всего два значения - true (истина) и false (ложь).
Как правило, такой тип используется для хранения значения типа да/нет, например:
var checked = true; // поле формы помечено галочкой
checked = false; // поле формы не содержит галочки
О нём мы поговорим более подробно, когда будем обсуждать логические вычисления и условные операторы.
null — специальное значение. Оно имеет смысл «ничего». Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null:
var age = null;
В JavaScript null не является «ссылкой на несуществующий объект» или «нулевым указателем», как в некоторых других языках. Это просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».
В частности, код выше говорит о том, что возраст age неизвестен.
undefined — специальное значение, которое, как и null, образует свой собственный тип. Оно имеет смысл «значение не присвоено».
Если переменная объявлена, но в неё ничего не записано, то ее значение как раз и есть undefined:
var u;
alert(u); // выведет "undefined"
Можно присвоить undefined и в явном виде, хотя это делается редко:
var x = 123;
x = undefined;
В явном виде undefined обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную «пустого значения» используется null.
Объекты object.
Первые 5 типов называют «примитивными».
Особняком стоит шестой тип: «объекты». К нему относятся, например, даты, он используется для коллекций данных и для многого другого.
Итого
Есть 5 «примитивных» типов: number, string, boolean, null, undefined и объекты object.
1) Найти следующие достопримечательности по вариантам:
Вариант 1 - Болотная площадь (г. Москва).
Вариант 2 - Елисейские поля.
Вариант 3 - Окрестности Тауерского моста (г. Лондон).
Вариант 4 - Центральный парк Нью – Йорка.
2) Самостоятельно подключите слой, если данная операция возможна (пробки, пешеходные пути, велосипедный пути и т.д.)
3) Реализовать операцию “ZOOM” нажатием кнопки мыши
4) Реализовать переход по нажатию соответствующей кнопки,в зависимости от варианта.
5) Реализовать операцию “ZOOM” нажатием кнопки.
6) Реализовать любую другую функцию из руководства
Изучить основы JavaScript и HTML.
Ознакомиться с руководством по «GoogleMapsJavaScript API V3».
Реализовать скрипт, согласно варианту.
Реализовать методы указанные в задании.
Путь к руководству:
https://developers.google.com/maps/?hl=ru→Документация (в списке слева) →JavaScript API Google Карт→Руководство для разработчиков
Первые шаги:
Легче всего начать ознакомление с API Google Карт, рассмотрев простой пример. На следующей веб-странице отображается карта с центром в Сиднее (Новый Южный Уэльс, Австралия):
<!DOCTYPE html>
<html>
<head>
<metaname=”viewport”content=”initial-scale=1.0, user-scalable=no”/>
<styletype=”text/css”>
html {height:100%}
body {height:100%;margin:0;padding:0}
#map_canvas{height:100%}
</style>
<scripttype=”text/javascript”
src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE”>
</script>
<scripttype=”text/javascript”>
function initialize(){
varmapOptions={
center:newgoogle.maps.LatLng(-34.397,150.644),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map =newgoogle.maps.Map(document.getElementById(“map_canvas”),
mapOptions);
}
</script>
</head>
<bodyonload=”initialize()”>
<divid=”map_canvas”style=”width:100%;height:100%”></div>
</body>
</html>
Объявление приложения в виде документа HTML5
Рекомендуем вам использовать в веб-приложении настоящую инструкцию DOCTYPE. В приведенных примерах для объявления приложения в качестве документа HTML5 используется простой HTML5 DOCTYPE:
<!DOCTYPE html>
Большинство современных браузеров отображают содержание, объявленное с помощью инструкции DOCTYPE, в "стандартном режиме". Это означает, что приложение будет совместимо с различными браузерами. Элемент DOCTYPE создан таким образом, чтобы его присутствие корректно обрабатывалось браузерами, которые этот элемент не поддерживают. Такие браузеры проигнорируют его и отобразят содержание в "режиме совместимости".
Обратите внимание, что некоторые CSS, работающие в режиме совместимости, являются недопустимыми в стандартном режиме. В частности, все элементы, размеры которых выражены в процентах, должны наследовать от элементов родительских блоков. Если для родительского элемента размер не указан, будет предполагаться, что он составляет 0 x 0 пикселей. По этой причине в код включено следующее объявление <style>:
<styletype="text/css">
html{height:100%}
body{height:100%;margin:0;padding:0}
#map_canvas{height:100%}
</style>
Объявление CSS указывает, что контейнер карты <div> (с именем map_canvas) должен занимать 100% высоты элемента HTML body. Обратите внимание, что требуется также особо объявить эти процентные значения для <body> и <html>.
ЗакрузкаAPI Google карт
<html>
<head>
<script type="text/javascript"
src="../files/237/files/237/http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
URL, содержащийся в теге script, является местоположением файла JavaScript, загружающего все символы и определения, требуемые для использования API Google Карт. Тег script является обязательным.
Параметр key содержит ключ API приложения. Подробнее см. в разделе Получение ключа API. Имейте в виду, что этот ключ отличается отиспользовавшегося в API версии 2, и его генерация должна производиться из консоли интерфейсов API.
Требуется также включить параметр sensor URL-адреса, который указывает, используется или нет в приложении датчик определения местоположения пользователя (например, локатор GPS). В данном примере мы выразили этот параметр в виде переменной set_to_true_or_false, чтобы подчеркнуть необходимость явно присвоить ему значение true или false.
HTTPS
Если приложение построено на основе протокола HTTPS, вам может потребоваться загрузить JavaScript API Google Карт по протоколу HTTPS:
<script src="../files/237/files/237/https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>
Чтобы при работе с SSL-приложениями избежать появления предупреждений в веб-браузерах, загрузите API Карт по протоколу HTTPS. Кроме того, этот протокол рекомендуется использовать, если приложение передает в запросах конфиденциальные данные пользователей (например, данные о местоположении).
Библиотеки
При загрузке JavaScript API Google Карт посредством URL http://maps.googleapis.com/maps/api/js можно загрузить дополнительные библиотеки с помощью параметра libraries. Библиотеки содержат модули кода, реализующие дополнительные функции для основного интерфейса JavaScript API. Загрузка библиотек производится только по специальному запросу.
Асинхронная загрузка API
Вам может понадобиться загрузить код JavaScript API Google Карт после окончания загрузки страницы или по запросу. Для этой цели можно ввести собственный тег<script>, отвечающий на событие window.onload или вызов функции. Однако при этом требуется предусмотреть дополнительные команды начальной загрузки JavaScript API Google Карт, обеспечивающие задержку выполнения кода приложения до момента полной загрузки кода этого интерфейса. Это осуществляется с помощью параметра callback, принимающего функцию, выполняемую по завершению загрузки API.
В следующем коде приложение получает команду загрузить API Google Карт после полной загрузки страницы (с помощью window.onload) и записать JavaScript API Google Карт втег <script> на этой странице. Кроме того, API получает команду выполнить функцию initialize() только после того, как интерфейс будет полностью загружен. Для этого на этапе начальной загрузки передается параметр callback=initialize:
functioninitialize() {
varmapOptions = {
zoom: 8,
center: newgoogle.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
varmap = newgoogle.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
functionloadScript() {
varscript = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Эдементы DOM карты
<div id="map_canvas" style="width: 100%; height: 100%"></div>
Чтобы карту отобразить на веб-странице, следует зарезервировать для нее место. Обычно это осуществляется путем создания именованного элемента div и получения ссылки на него в модели объекта документа (DOM) браузера.
В приведенном выше примере определен элемент <div> с именем "map_canvas", и с помощью атрибутов стиля установлен его размер. Обратите внимание, что для данного размера установлено значение "100%", и на мобильных устройствах размер будет увеличиваться для соответствия размеру экрана. В зависимости от размеров экрана браузера и отступов может потребоваться корректировка этих значений. Обратите внимание, что карта всегда принимает размер содержащего ее элемента, поэтому всегда требуется явно указывать размер в элементе <div>.
Параметры карты
varmapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Для инициализации карты в первую очередь создается объект Mapoptions для включения в него переменных инициализации карты. Этот объект не конструируется, а создается как литерал объекта.
varmapOptions = {};
Географические координаты
Поскольку в нашем примере требуется с помощью свойства center поместить карту в конкретную точку, мы создаем объект LatLng для хранения этого местоположения и передаем координаты в порядке {широта, долгота}:
center = new google.maps.LatLng(-34.397, 150.644)
Процесс преобразования адреса в географическую точку называется геокодированием. Данная версия API Google Карт поддерживает геокодирование. Подробнее см. в разделе Геокодирование главы Службы этого руководства.
Уровни масштабирования
Начальное разрешение, используемое при отображении карты, устанавливается в свойстве zoom, причем значение 0 соответствует наименьшему уровню масштабирования. При увеличении этого значения увеличивается разрешение изображения карты.
zoom: 8
Чтобы показать карту Земли на одном изображении, потребуется использовать либо огромную карту, либо маленькую карту с очень низким разрешением. По этой причине изображения карты в Google Картах и API Google Карт подразделяются на фрагменты с разными уровнями масштабирования. При низких уровнях масштабирования небольшой набор фрагментов позволяет представить обширную область, а при высоких уровнях масштабирования фрагменты имеют более высокое разрешение и представляют меньшую область.
Типы карт
На этом этапе также необходимо задать начальный тип карты.
mapTypeId:google.maps.MapTypeId.ROADMAP
Поддерживаются следующие типы карт:
ROADMAP – стандартные двухмерные фрагменты Google Карт.
SATELLITE – фрагменты, представленные сделанными со спутника фотографиями.
HYBRID – фотографические фрагменты с наложенным слоем, содержащим наиболее важные объекты (дороги, названия городов).
TERRAIN – фрагменты топографической карты с рельефом местности, высотами и гидрографическими объектами (горы, реки и т. д.).
В большинстве случаев пользователям достаточно карт этих основных типов.
Объекты Map(карта)
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
Карту представляет класс JavaScript Map. Объекты этого класса определяют одну карту на странице. (Можно создать несколько экземпляров этого класса.При этом каждый объект будет определять отдельную карту на странице.) Экземпляр этого класса создается с помощью оператора JavaScript new.
При создании нового экземпляра карты указывается элемент HTML <div> на странице, выступающий в качестве контейнера для карты. HTML-узлы являются потомками объекта JavaScript document. Ссылку на этот элемент можно получить с помощью метода document.getElementById().
В данном коде определяется переменная (с именем map), которая назначается новому объекту Map, при этом передаются параметры, определенные в литерале объектаmapOptions. Эти параметры используются для инициализации свойств карты. Далее показано определение функции Map(), являющейся конструктором:
|
Конструктор |
Описание |
|
Map(mapDiv:Node, opts?:MapOptions) |
На основе переданных параметров (необязательных) создается новая карта внутри заданного HTML-контейнера, обычно являющегося элементом DIV. |
Загрузка карты
<bodyonload="initialize()">
В процессе визуализации HTML-страницы формируется модель объекта документа (DOM), принимаются все внешние изображения и скрипты, и встраиваются в объектdocument. Чтобы карта помещалась на страницу только после полной загрузки последней, достаточно выполнить функцию, создающую объект Map незамедлительно после получения события onload элементом <body> HTML-страницы. Такой прием позволяет избежать непредсказуемого поведения и расширить возможности управления процессом и моментом построения карты.
Атрибут onload тега body является примером обработчика событий. JavaScript API Google Карт предоставляет также набор событий, обрабатывая которые можно узнавать об изменениях состояния.
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!--
-->
<!DOCTYPE html>
<!--
С помощью инструкции <!DOCTYPE html> приложение объявляется как документ HTML5.
-->
<html>
<head>
<!--
Для того что бы отделить скрипт от документа используется тег <head>
-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> *
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!--
Если для родительского элемента размер не указан, будет предполагаться,
что он составляет 0 x 0 пикселей. По этой причине в код включено следующее объявление <style>
-->
<script type="text/javascript"
<!--
Тег <script> сообщает браузеру о том, что внутри находится исполняемый скрипт.
Атрибут type говорит о том, что это javascript. Вообще говоря,
атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.
-->
rc="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
<!--
URL, содержащийся в теге script, является местоположением файла JavaScript,
загружающего все символы и определения, требуемые для использования API Google Карт.
Тег script является обязательным.
Параметр key содержит ключ API приложения. Подробнее см. в разделе Получение ключа API,
по адресу: https://developers.google.com/maps/documentation/javascript/tutorial?hl=ru#api_key
Имейте в виду, что этот ключ отличается от использовавшегося в API версии 2, и его генерация должна производиться из консоли интерфейсов API.
Требуется также включить параметр sensor URL-адреса, который указывает, используется или нет в приложении датчик определения местоположения пользователя (например, локатор GPS). В данном примере мы выразили этот параметр в виде переменной
set_to_true_or_false, чтобы подчеркнуть необходимость явно присвоить ему значение true или false.
-->
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<!--
Функция JavaScript для создания объекта "карта".
где center создает новый объект карты с ценровкой в указанных координатах
zoom - соответственно масштаб
mapTypeId - тип карты гугл
-->
</head>
<body onload="initialize()">
<!--
Инициализируется объект карты
-->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
1) Дайте определение геообъекта, геоинформации, геоданных.
2) Что такое Web ориентированная информационная система?
3) Дайте определение JavaScript.
4) Перечислить источники данных для формиррования ГИС
5) Перечислите браузеры поддерживающие APIGoogleMaps.
6) Перечислить основные области применеия ГИС.
Титульный лист.
Тема, цель и задачи лабораторной работы.
Подробный порядок выполнения работы.
Блок-схема алгоритма.
Листинг скрипта.
Ответы на контрольные вопросы и задания.
При выполнении схем алгоритмов и программ отдельные функции алгоритмов и программ с учетом степени их детализации отображаются в виде условных графических обозначений - символов по ГОСТ 19.701-90 - Единая система программной документации. Схемы алгоритмов, программ, данных и систем. Обозначения условные и правила выполнения.
Схемы алгоритмов, программ, данных и систем состоят из имеющих заданное значение символов, краткого пояснительного текста и соединяющих линий.
В стандарте определены символы, предназначенные для использования в документации по обработке данных, и приведено руководство по их условным обозначениям для различных применений:
в схемах данных, предназначенных для отображения этапов ТПОИ включая ручные операции. Компонентами схемы данных являются:
- символы данных;
- символы процессов;
- линии и спецсимволы;
в схемах программ, отображающих последовательность операций в программе. Компонентами схемы программы являются
- символы процесса, указывающие фактические операции обработки данных (включая символы, определяющие путь, которого следует придерживаться с учетом логических условий);
- линейные символы, указывающие поток управления;
- специальные символы, используемые для облегчения написания и чтения схемы.
в схемах работы системы, предназначенных для изображения управления операциями и потоками данных в системе. Компонентами схемы работы системы являются
- символы данных;
- символы процесса;
- линии, указывающие потоки данных между процессами;
в схемах взаимодействия программ, которые отображают путь активизации программы и взаимодействие с соответствующими данными каждой программы, показывается в системе только один раз. Компонентами в этих схемах являются
- символы данных, указывающие на используемые данные;
- символы процесса, указывающие на операции над данными;
- линии, отображающие потоки данных между процессами.
Все эти компоненты должны быть лаконичными, точными, иметь поясняющие надписи, названия.
Условные обозначения перечисленных символов приведены в таблицах 1 – 5;
Таблица 1 Символы линий
|
Линия |
Поток данных или управления. Могут быть добавлены стрелки |
|
|
Передача управления |
Передача управления от одного процесса к другому. Тип передачи управления должен быть назван внутри символа (запрос, вызов, событие). |
|
|
Канал связи |
Передача данных по каналу связи. |
|
|
Пунктирная линия |
Альтернативная связь между двумя или более символами |
|
|
Процесс |
Функция обработки данных любого вида |
Таблица 2 Символы процесса
|
Предопределенный процесс |
Процесс, состоящий из одной или нескольких операций, которые определены в другом месте |
|
|
Ручная операция |
Любой процесс, выполняемый человеком |
|
|
Подготовка |
Модификация команды или группы команд с целью воздействия на некоторую последующую функцию |
|
|
Решение |
Процесс переключательного типа, выбор из нескольких альтернативных выходов |
|
|
Граница цикла |
Циклический процесс, начало и конец цикла |
|
|
Параллельные действия |
Синхронизация двух или более параллельных операций |
Таблица 3 Специальные символы
|
Терминатор |
Выход во внешнюю среду и вход из внешней среды |
|
|
Соединитель |
Выход в часть схемы и вход из другой части этой схемы, используется для обрыва линии и продолжения ее в другом месте. Соответствующие символы - соединители должны содержать одно и то же уникальное обозначение. |
|
|
Комментарий |
Используют для добавления описательных комментариев или пояснительных записей в целях объяснения или примечаний |
|
|
… |
Пропуск |
Отображение пропуска символов, в которых не определены ни тип, ни число символов. Он применяется в схемах, изображающих общие решения. |
Таблица 4 Символы данных
|
Данные |
Данные, носитель не определен |
|
|
Запоминаемые данные |
Данные хранящиеся в виде пригодном для обработки, носитель не определен |
|
|
ОЗУ |
Данные, хранящиеся в ОЗУ |
|
|
Запоминающее устройство с последовательным доступом |
Данные, хранящиеся в запоминающем устройстве с последовательным доступом |
|
|
Запоминающее устройство с прямым доступом |
Данные, хранящиеся в запоминающем устройстве с прямым доступом |
|
|
Ручной ввод |
Данные, вводимые вручную во время обработки с устройств любого типа |
|
|
Дисплей |
Данные, представленные в человекочитаемой форме на носителе в виде отображающего устройства |
Таблица 5 Правила применения символов и выполнения схем
|
Символу может быть присвоен идентификатор, (например, для ссылки в других частях документации). Располагается слева над символом. |
|
|
Допускается краткая информация о символе (описание, уточнение или другие перекрестные ссылки для более полного понимания функции данной части системы). Описание символа должно помещаться справа над символом |
|
|
Детализация программы. Обозначается символом с полосой для процесса или данных. Детализируемая программа начинается и заканчивается символом "Терминатор". Внутри символа "Терминатора", обозначающее начало детализируемой программы, указывается идентификатор данной программы. |
ХВ4 |