Разработка ГИС-приложений для ArcGIS Server [4 Разработка на ArcGIS JavaScript API]

Программный интерфейс предназначен для создания ГИС-клиентов, интегрирующих данные из различных источников (сервисы ArcGIS, Google Maps, Microsoft Virtual Earth и другие по принципу mashup) на JavaScript. Предоставляет широкие возможности визуализации, картографирования, геокодирования и геообработки.

Брошюра ESRI для разработчиков ArcGIS JavaScript API.

4.1   Описание ArcGIS JavaScript API

Эта технология позволяет создавать несложные, в тоже время функциональные картографические веб-приложения, на основе данных, предоставляемых сервисами ArcGIS Server.

Библиотеки ArcGIS JavaScript API бесплатны для использования, однако они всегда хранятся на сервере ESRI и для работы приложения необходим доступ в интернет с клиентского рабочего места, даже если использует локальный ГИС-сервер.

Приложение-клиент на ArcGIS JavaScript API: выбор маршрутов, создание буферных зон и построение поверхности трассы

ArcGIS JavaScript API также включает расширения ArcGIS JavaScript Ext. for the Google Maps API, ArcGIS JavaScript Ext. for Microsoft Virtual Earth, которые позволяют использовать API Google Maps и Microsoft Virtual Earth, а также совмещать данные этих сервисов с данными ArcGIS Server.

Разработчику ArcGIS JavaScript API доступны все возможности JavaScript, позволяя дополнять картографические приложения дополнительной функциональностью. ArcGIS JavaScript API также использует JavaScript-библиотеку Dojo, что делает использование этого API более удобным: разработчику доступны все компоненты Dojo, упрощается реализация асинхронности.

ArcGIS JavaScript API предоставляет возможности визуализации динамических и кэшированных (tiled) пространственных данных через сервисы ArcGIS Server, выполнение различных задач, работы с пользовательскими графическими слоями («рисование поверх карты»).

ГИС-приложения ArcGIS JavaScript API выполняются в окне обычного веб-браузера, как и любая HTML-страница.

Благодаря распространенности HTML и JavaScript построение картографических приложений на ArcGIS JavaScript API является несложной задачей даже для начинающих разработчиков. Поэтому знакомство с разработкой картографических приложений рекомендуется начинать именно с  ArcGIS JavaScript API.

4.2   Ресурсы разработчика

·         Центр ресурсов по ArcGIS JavaScript API: http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=home

§   Обзор ArcGIS JavaScript API, Примеры и демонстрация возможностей, Справочник по классам, Галерея программного кода

·         Блог для разработчиков

В галерее программного кода доступно множество примеров приложений на ArcGIS JavaScript API

4.3   Возможности ArcGIS JavaScript API

·         отображение компонента карты на Интернет-странице (esri.Map())

·         настройка внешнего вида карты: включение/ отключение элементов карты, их положения (esriConfig.defaults.map)

·         подключение слоев к карте различного типа (esri.layers, esri.Map.addLayer)

·         управление экстентом (esri.geometry.Extent)

·         навигация на карте (panUp(), panUpperRight(), и другие методы)

·         выполнение задач (Tasks): esri.tasks.Query (выборка FeatureSet по SQL-запросу или по геометрии), esri.tasks.Geoprocessor (выполнение геообработки в соответствии с заданной моделью), и другие

Демонстрация выполнения задачи выборки по запросу: города, с населением более заданного пользователем

Выполнение модели геообработки: моделирование пути переноса предмета по течению

·         работа с временными графическими слоями (esri.Map.graphics, esri.layers.GraphicsLayer):

§   рисование объектов (geometry: точки, линии, полигоны) и прикрепление к ним атрибутивной информации (attributes)

§   отображение настраиваемой символики (esri.symbol)

§   отображение всплывающих информационных окон (esri.InfoTemplate)

§   инструменты рисования для пользователя (esri.toolbars.Draw)

Демонстрация панели для рисования на карте

§   взаимодействие с объектами графического слоя

·         обработка событий, таких как нажатие мыши на карте перемещение указателя

4.4   Приложение «Hello, World!» на ArcGIS JavaScript API

Разработка базового картографического приложения на ArcGIS JavaScript API, позволяющего отображать интерактивную карту не должна вызывать сложностей даже у начинающих.

1.   Создайте пустой html-документ map.html на диске и откройте его для редактирования в любом текстовом редакторе.

2.   Вставьте шаблон кода html-страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title>Простое картографическое приложение</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  </head>

  <body>

  </body>

</html>

3.   Теперь в раздел <head> нужно добавить ссылки на библиотеки ArcGIS JavaScript API:

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>

4.   Затем нужно добавить простой скрипт для загрузки объекта карты и подключения сервиса ArcGIS Server, предоставляющего данные:

<script type="text/javascript">

  dojo.require("esri.map");

  var myMap, myTiledMapServiceLayer;

 

function init() {

      myMap = new esri.Map("mapDiv");

      myTiledMapServiceLayer = new

            esri.layers.ArcGISTiledMapServiceLayer

("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

myMap.addLayer(myTiledMapServiceLayer);

  }

  dojo.addOnLoad(init);

</script>

Этот скрипт подключает возможность работы с картой (dojo.require("esri.map")), и добавляет на карту слои данных сервиса http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer (можно открыть ссылку и посмотреть информацию о сервисе) в функции init(), которая выполняется при загрузке html-страницы (dojo.addOnLoad(init)). Слой представлен в виде объекта кэшированного сервиса (esri.layers.ArcGISTiledMapServiceLayer) и добавляется на объект карты  myMap (myMap.addLayer(myTiledMapServiceLayer)). Сам объект карты создается в контейнере (прямоугольной области на html-странице) mapDiv, который затем в разделе <body> помещается на html-страницу.

5.   Размещение контейнера mapDiv на html-страницу:

<body>

<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>

</body>

6.   Сохраните документ map.html. Содержание должно получиться следующим:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title>Простое картографическое приложение</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>

 

    <script type="text/javascript">

      dojo.require("esri.map");

      var myMap, myTiledMapServiceLayer;

      function init() {

        myMap = new esri.Map("mapDiv");

myTiledMapServiceLayer = new

esri.layers.ArcGISTiledMapServiceLayer

("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

        myMap.addLayer(myTiledMapServiceLayer);

      }

      dojo.addOnLoad(init);

    </script>

  </head>

  <body>

<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>

  </body>

</html>

Текст программы в текстовом редакторе

1.   Откройте документ map.html в окне веб-браузера.

Результат работы: Простое картографическое приложение

 

 

---

Скачать PDF-версию с оригинальным оформлением. © Для использования опубликованных на ресурсе материалов достаточно упоминания имени автора и адреса первоисточника. Дата обновления: 2009-02-15.