uk en pl it
Web Monarx
BACK NEXT

Типы карт Google Maps JavaScript API V3


Примечание. Пакет Google Maps javascript API V3, описание которого приводится на этих страницах, теперь имеет статус официального javascript API. В соответствии с правилами версия 2 этого API является официально устаревшей. Рекомендуем перевести свой код на обновленную и улучшенную версию.

  1. Типы карт
  2. Базовые типы карт
  3. Изображения под углом 45°
    1. Включение изображений под углом 45°
    2. Вращение изображений под углом 45°
  4. Изменение реестра типов карт
  5. Стилизованные карты
    1. Компоненты
    2. Стилизаторы
  6. Пользовательские типы карт
    1. Координаты на карте
      1. Мировые координаты
      2. Пиксельные координаты
      3. Координаты фрагментов
    2. Интерфейс MapType
      1. Базовые типы карт
      2. Типы наложений карт
      3. Графические типы карт
  7. Персонализированные проекции
    1. Реализация интерфейса проекции
    2. Преобразование координат в проекциях
    3. Выбор фрагментов в проекциях

Типы карт

В настоящем документе описываются типы карт, которые можно показывать с помощью Google Maps javascript API. API использует объект MapType для хранения информации об этих картах. MapType представляет собой интерфейс, который определяет показ и использование фрагментов карты и перевод координат из экранных в мировые (на карте). Каждый MapType должен содержать ряд методов для обработки получения и показа фрагментов, а также свойства, определяющие их визуальные характеристики.

Внутренняя организация типов карт в Maps API – сложная тема. Большинство разработчиков могут просто использовать базовые типы карт, описанные ниже. Однако вы также имеете возможность задать собственные фрагменты для карты с помощью персонализированных типов карт или изменить вид карты существующего типа с помощью стилизованных карт. Чтобы создавать карты персонализированных типов вам потребуется знать, как изменить реестр типов карт.

Базовые типы карт

В Google Maps API доступно множество типов карт. Помимо знакомых "рисованных" дорожных карт, состоящих из фрагментов, Google Maps API поддерживает и другие типы карт.

В Google Maps API доступны следующие типы карт:

  • MapTypeId.ROADMAP – тип по умолчанию
  • MapTypeId.SATELLITE – снимки из Google Earth, сделанные со спутника
  • MapTypeId.HYBRID – комбинация обычной карты и снимков со спутника
  • MapTypeId.TERRAIN – физическая карта, основанная на информации о ландшафте

Чтобы изменить тип карты, используемый Map, нужно задать для него свойство mapTypeId. Это осуществляется либо в конструкторе путем установки объекта Map options, либо путем вызова метода setMapTypeId() карты.

#
# Setting the mapTypeId upon construction
#
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom
: 8,
  center
: myLatlng,
  mapTypeId
: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions
);

#
# Modifying the mapTypeId dynamically
#
map
.setMapTypeId(google.maps.MapTypeId.TERRAIN);

Обратите внимание, что типа карты не задается напрямую. Вместо этого для mapTypeId устанавливается ссылка на MapType с помощью идентификатора. Maps javascript API V3 использует реестр типов карт, описанный ниже, для управления этими ссылками.

Изображения под углом 45°

Google Maps API поддерживает специальные изображения под углом 45° для определенных местоположений. Эти изображения с высоким разрешением обеспечивают перспективный обзор в направлении четырех сторон света (север, юг, запад и восток). Изображения доступны для просмотра при высоком уровне масштабирования на картах поддерживаемых типов.

На снимке ниже представлен перспективный вид под углом 45° на улицы города Санта-Круз, штат Калифорния:

 

Существующие типы карт google.maps.MapTypeId.SATELLITE и google.maps.MapTypeId.HYBRID поддерживают отображение перспективных снимков под углом 45° при просмотре с высоким уровнем масштабирования (если такие снимки имеются). При этом функцию необходимо включить. Если увеличить масштаб при просмотре места, для которого имеется аэрофотоснимок, на картах этих типов, то их вид автоматически изменится, как описано ниже.

  • Ко всем существующим элементам управления панорамированием на карте будет добавлен компас (вокруг элементов навигации). С помощью этого компаса можно изменять направление просмотра любого снимка под углом 45°, привязывая его к ближайшей из доступных сторон света.
  • Между элементами управления панорамированием и масштабированием появится промежуточный элемент управления вращением, позволяющий вращать карту в поддерживаемых направлениях. Элемент управления вращением позволяет осуществлять вращение только по часовой стрелке.
  • Спутниковое или гибридное изображение будет заменено видом в перспективе под углом 45° с центром в текущем местоположении. По умолчанию используется ориентация на север. При отдалении карты будет возвращен ее исходный вид (спутниковое или гибридное изображение).
  • Элемент управления MapType активирует элемент управления переключением подменю для показа изображений под углом 45°.

При отдалении карты с изображением под углом 45° изменение будет осуществляться наоборот, что приведет к восстановлению исходного типа карты.

Google постоянно добавляет снимки под углом 45° для новых городов. Последнюю информацию можно узнать в таблице покрытия Google Maps API.

Включение изображений под углом 45°

Чтобы включить показ изображений под углом 45° на картах поддерживаемых типов, следует вызвать setTilt(45) для объекта Map. По умолчанию изображения под углом 45° ориентированы на север. Чтобы завершить показ изображений под углом 45°, следует вызвать setTilt(0).

У Map имеется метод getTilt(), который всегда отображает текущий наклон изображения на карте. Если задать наклон для карты, а затем удалить его (например, путем изменения коэффициента масштабирования), метод getTilt() карты возвратит 0.

В примере ниже показывается вид под углом 45° центральной части Портленда, штат Орегон:

var mapOptions = {
  center
: new google.maps.LatLng(37.339085, -121.8914807),
  zoom
: 18,
  mapTypeId
: \'satellite\'
};
map
= new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map
.setTilt(45);

Просмотреть пример (aerial-simple.php)

Вращение изображения под углом 45°

Фактически изображение под углом 45° состоит из набора снимков для каждой стороны света (север, юг, восток, запад). При просмотре снимков под углом 45° на карте можно развернуть изображение относительно одной из сторон света, вызвав setHeading() для объекта Map и передав значение, выраженное в градусах относительно северного направления.

Код в примере ниже позволяет отобразить карту на основе аэрофотоснимков и вращать ее каждые 3 секунды при нажатии кнопки:

var map;
function initialize() {

 
var mapOptions = {
    center
: new google.maps.LatLng(45.518970, -122.672899),
    zoom
: 18,
    mapTypeId
: google.maps.MapTypeId.SATELLITE
 
};
  map
= new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map
.setTilt(45);
  map
.setHeading(90);
}

function autoRotate() {
 
// Determine if we\'re showing aerial imagery
 
if (map.getTilt() != 0) {
    map
.setHeading(180);
    setTimeout
(\'map.setHeading(270)\',3000);
    setTimeout
(\'map.setHeading(0)\',6000);
    setTimeout
(\'map.setHeading(90)\',9000);
 
}
}

Просмотреть пример (aerial-rotation.php)

Изменение реестра типов карт

mapTypeId карты представляет собой строковый идентификатор, который используется для связи MapType с уникальным значением. Каждый объект Map хранит MapTypeRegistry, в котором содержится набор доступных MapType для данной карты. Этот реестр используется, к примеру, для выбора типов карт, которые доступны в элементе управления MapType карты.

Чтение не выполняется непосредственно из реестра типов карт. Вместо этого нужно изменить реестр путем добавления типов пользовательских карт и их привязки к строковому идентификатору по вашему выбору. Нельзя изменять базовые типы карт (хотя их можно удалить из карты, изменив вид mapTypeControlOptions, связанного с картой).

В приведенном ниже коде в mapTypeControlOptions отображаются только два типа карт. При этом реестр изменяется таким образом, чтобы связь с данным идентификатором устанавливалась с фактической реализацией интерфейса MapType. Примечание. В предыдущем фрагменте кода создание персонализированного типа карты не было задокументировано намеренно. Подробнее о создании типа карты см. в разделах Стилизованные карты и Пользовательские типы карт ниже.

# Modify the control to only display two maptypes, the
# default ROADMAP and the custom \'mymap\'.
# Note that because this is simply an association, we
# don\'t need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = \'mymaps\';

var mapOptions = {
  zoom
: 12,
  center
: brooklyn,
  mapTypeControlOptions
: {
     mapTypeIds
: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
 
},
  mapTypeId
: MY_MAPTYPE_ID
};

# Create our map. This creation will implicitly create a
# map type registry.
map
= new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions
);

# Create your custom map type using your own code.
# (See below.)
var myMapType = new MyMapType();

# Set the registry to associate \'mymap\' with the
# custom map type we created, and set the map to
# show that map type.
map
.mapTypes.set(MY_MAPTYPE_ID, myMapType);

Стилизованные карты

Тип StyledMapType позволяет настраивать внешний вид обычных карт Google, т. е. изменять стиль отображения различных элементов по умолчанию, таких как дороги, парки и застроенные участки. Эти компоненты называют элементами, а тип StyledMapType позволяет выбирать эти компоненты и изменять стиль их отображения, в том числе и полностью скрывать их. Такие изменения позволяют выделять отдельные компоненты на карте или дополнять содержание окружающей страницы.

Конструктор StyledMapType() принимает массив объектов MapTypeStyles, каждый из которых состоит из инструментов выбора и стилизаторов. Инструменты выбора определяют выбор компонентов карты, стиль которых будет изменен, а стилизаторы определяют параметры внешнего изменения данных компонентов.

Компоненты карты

Карта состоит из набора компонентов, таких как дорога или парк, которые определяются при помощи объектов MapTypeStyleFeatureType. Типы компонентов составляют дерево категорий, в котором элемент all является корнем. Полный список компонентов, доступных для выбора в карте, см. в справочнике по Maps javascript API V3. Если указать для компонентов значение all, будут выбраны все элементы карты.

Некоторые категории типа компонента содержат подкатегории, задаваемые записью, разделенной точкой (например, landscape.natural или road.local). При указании родительского компонента (например, road) стилизаторы, примененные к данному компоненту, будут применены ко всем дорогам, включая подкатегории.

Кроме того, некоторые компоненты карты обычно состоят из разных элементов. Например, дорога представляет собой не только линию (фигуру), нанесенную на карту, но и текст с ее названием (ярлык), прикрепленный к карте. Для выбора элементов в компонентах нужно указать категорию типа MapTypeStyleElementType. Поддерживаются следующие типы элементов:

  • all (по умолчанию) – выбирает все элементы данного компонента.
  • geometry – выбирает только геометрические элементы данного компонента.
  • labels – выбирает только текстовые метки, относящиеся к данному компоненту.

Если тип элемента не задан, стили будут применены ко всем элементам независимо от их типа.

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

{
  featureType
: "road.local",
  elementType
: "labels"
}

Стилизаторы

Стилизаторы – это параметры форматирования типа MapTypeStyler, которые применяются к элементам и компонентам, определенным в каждом правиле MapTypeStyle. В настоящий момент поддерживаются следующие параметры MapTypeStyler:

  • hue (шестнадцатеричная строка цвета RGB) – указывает основной цвет. (* См. примечание об использовании ниже.)
  • lightness (значение с плавающей точкой в диапазоне от -100 до 100) – указывает процентное изменение яркости элемента. Отрицательные значения делают элемент более темным (-100 обозначает черный цвет), а положительные – увеличивают ярость (+100 обозначает белый цвет).
  • saturation (значение с плавающей точкой в диапазоне от -100 до 100) – указывает процентное изменение интенсивности основного цвета, применяемого к элементу.
  • gamma (значение с плавающей точкой в диапазоне от 0.01 до 10.0, где 1.0 обозначает отсутствие корректировки) – указывает значение гамма-коррекции, применяемой к элементу. Гамма позволяет нелинейно изменять ярость оттенка, не затрагивая значения черного и белого. Обычно она используется для изменения контрастности нескольких элементов. Например, можно изменить гамму, чтобы увеличить или уменьшить контраст между краями и внутренними частями элементов. Низкие значения гаммы (< 1) увеличивают контрастность, а высокие (> 1) – уменьшают ее.
  • inverse_lightness (если значение равно true) – инвертирует текущую яркость.
  • visibility (on, off или simplified) – указывает, отображается ли элемент на карте и, если отображается, как именно. Значение прозрачности simplified указывает, что следует подобрать оптимальные параметры отображения элементов. (Например, при упрощенной структуре дорог может отображаться меньше дорог.)

Правила стилизатора применяются как отдельные, независимые стили в том порядке, в каком они перечислены в массиве MapTypeStyler. Не следует объединять различные операции стилизатора в одну. Задайте каждую операцию как отдельный элемент в массиве стилизатора. Порядок имеет значение, поскольку некоторые операции не могут быть перемещены. Компоненты и/или элементы, измененные с помощью операций стилизатора (обычно) уже имеют существующие стили. Операции выполняются для этих существующих стилей (при их наличии).

Обратите внимание, что для обозначения цвета в операциях стилизатора используется модель HSL (Hue, Saturation, Lightness – оттенок, насыщенность, яркость). Такие операции по определению цвета являются стандартными в графическом дизайне. Оттенок обозначает базовый цвет, насыщенность указывает интенсивность этого цвета, а яркость задает относительное количество белого и черного в этом составном цвете. Все три значения HSL можно соотнести со значениями RGB, и наоборот. Гамма-коррекция позволяет изменить насыщенность цветового пространства, обычно для повышения или уменьшения контрастности. Кроме того, модель HSL определяет цвет в пространстве координат, где hue обозначает ориентацию в цветовом круге, а насыщенность и ярость указывают амплитуды по осям. Оттенки измеряются в пространстве цветов RGB, которое сходно с большинством цветовых пространств RGB за исключением отсутствия оттенков белого и черного.

Цветовой круг RGB

Примечание. Хотя hue принимает шестнадцатеричное цветовое значения HTML, это значение используется только для определения основного цвета (его положения в цветовом круге), но не его насыщенности или ярости, которые указываются отдельно в процентном соотношении. Например, оттенок для чистого зеленого цвета можно указать с помощью значения "#00ff00" или "#000100" в свойстве hue. При этом оба оттенка будут одинаковыми. (Оба эти значения обозначают чистый зеленый цвет в модели HSL.) RGB-значения hue, которые состоят в равных пропорциях из красного, зеленого и синего (например, "#000000" (черный) и "#FFFFFF" (белый) и все оттенки серого) по сути не обозначают оттенка, поскольку ни одно из этих значений не указывает ориентацию в пространстве координат HSL. Чтобы обозначить черный, белый или серый цвет, необходимо удалить все saturation (установить значение, равное -100) и отрегулировать lightness.

Кроме того, при изменении существующих компонентов, для которых уже имеется цветовая схема, изменение значения hue не приведет к изменению существующего значения saturation или lightness.

В следующем примере приведена карта Бруклина, на которой цвет отображения дорог был изменен на ярко-зеленый, а цвет жилых зон – на черный:

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

function initialize() {

 
var stylez = [
   
{
      featureType
: "road.local",
      elementType
: "geometry",
      stylers
: [
       
{ hue: "#00ff00" },
       
{ saturation:100 }
     
]
   
},
   
{
      featureType
: "landscape",
      elementType
: "geometry",
      stylers
: [
       
{ lightness: -100 }
     
]
   
}
 
];

 
var mapOptions = {
    zoom
: 11,
    center
: brooklyn,
    mapTypeControlOptions
: {
       mapTypeIds
: [google.maps.MapTypeId.ROADMAP, \'hiphop\']
   
}
 
};
  map
= new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions
);

 
var styledMapOptions = {
      name
: "Hip-Hop"
 
}

 
var jayzMapType = new google.maps.StyledMapType(
      stylez
, styledMapOptions);

  map
.mapTypes.set(\'hiphop\', jayzMapType);
  map
.setMapTypeId(\'hiphop\');
}

Посмотреть пример (maptype-styled-simple.php)

В следующем более сложном примере с помощью ряда операций и упрощений карте придан вид, напоминающий атлас дорог США:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.650052);

function initialize() {

 
var roadAtlasStyles = [
   
{
      featureType
: "road.highway",
      elementType
: "geometry",
      stylers
: [
       
{ hue: "#ff0022" },
       
{ saturation: 60 },
       
{ lightness: -20 }
     
]
   
},{
      featureType
: "road.arterial",
      elementType
: "all",
      stylers
: [
       
{ hue: "#2200ff" },
       
{ lightness: -40 },
       
{ visibility: "simplified" },
       
{ saturation: 30 }
     
]
   
},{
      featureType
: "road.local",
      elementType
: "all",
      stylers
: [
       
{ hue: "#f6ff00" },
       
{ saturation: 50 },
       
{ gamma: 0.7 },
       
{ visibility: "simplified" }
     
]
   
},{
      featureType
: "water",
      elementType
: "geometry",
      stylers
: [
       
{ saturation: 40 },
       
{ lightness: 40 }
     
]
   
},{
      featureType
: "road.highway",
      elementType
: "labels",
      stylers
: [
       
{ visibility: "on" },
       
{ saturation: 98 }
     
]
   
},{
      featureType
: "administrative.locality",
      elementType
: "labels",
      stylers
: [
       
{ hue: "#0022ff" },
       
{ saturation: 50 },
       
{ lightness: -10 },
       
{ gamma: 0.9 }
     
]
   
},{
      featureType
: "transit.line",
      elementType
: "geometry",
      stylers
: [
       
{ hue: "#ff0000" },
       
{ visibility: "on" },
       
{ lightness: -70 }
     
]
   
}
 
];

 
var mapOptions = {
    zoom
: 12,
    center
: chicago,
    mapTypeControlOptions
: {
       mapTypeIds
: [google.maps.MapTypeId.ROADMAP, \'usroadatlas\']
   
}
 
};

  map
= new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions
);
 
var styledMapOptions = {
     name
: "US Road Atlas"
 
}

 
var usRoadMapType = new google.maps.StyledMapType(
      roadAtlasStyles
, styledMapOptions);
      map
.mapTypes.set(\'usroadatlas\', usRoadMapType);
  map
.setMapTypeId(\'usroadatlas\');
}

Просмотреть пример (maptype-styled-complex.php)

Для создания стилей вручную и проверки внешнего вида карты может потребоваться много времени. Чтобы не тратить время, можно воспользоваться мастером изменения стиля карт, который поможет создать JSON для ваших StyledMapStyle. Мастер позволяет выбрать компоненты и элементы в рамках компонентов, применить к ним стили и сохранить стили в формате JSON, который можно скопировать и вставить в ваше приложение.

Пользовательские типы карт

Примечание. Это раздел повышенной сложности.

Google Maps javascript API V3 теперь поддерживает функцию отображения пользовательских типов карт и управления ими. Эта функция позволяет вам добавлять на карту ваши собственные изображения и фрагменты наложений.

В V3 API реализован ряд возможных типов карт:

  • Стандартные наборы фрагментов, состоящие из изображений, вместе составляющих полные географические карты. Эти наборы фрагментов также известны, как основные типы карты. Данные типы карты ведут себя аналогично типам карт по умолчанию: ROADMAP, SATELLITE, HYBRID и TERRAIN. Если добавить пользовательский тип карты к массиву типов mapTypes карты, пользовательский интерфейс Maps API будет обрабатывать этот пользовательский тип карты как стандартный тип (например, включив его в элемент управления выбором типа карты).
  • Наложения фрагментов изображения, отображаемые поверх существующих основных типов карты. Как правило, данные типы карты используются для дополнения существующего типа карты (отображения дополнительной информации) и часто ограничены определенными областями и/или уровнями масштабирования. Обратите внимание, что данные фрагменты могут быть прозрачными, что позволяет добавлять компоненты к существующим картам.
  • Неграфические типы карты, позволяющие настраивать отображение информации на карте на самом низком уровне.

Эти возможности достигаются созданием классов, реализующих интерфейс MapType. Кроме этого, класс ImageMapType предоставляет ряд встроенных функций, упрощающих создание MapType для работы с изображениями.

Перед тем как мы перейдем к описанию классов, реализующих MapType, важно понять, каким образом Google Maps определяет координаты и выбирает части карты для отображения. Для любых базовых или MapType наложений вам придется реализовать в программе аналогичную логику.

Координаты на карте

Google Maps API использует несколько систем координат:

  • Значения широты и долготы, определяющие уникальное местоположение на поверхности земли. (Google использует Мировую геодезическую систему координат WGS84.)
  • Глобальные координаты, определяющие уникальную точку на карте.
  • Координаты, задающие конкретный фрагмент на карте при указанном уровне масштабирования.

Мировые координаты

Когда Maps API преобразует местоположение на поверхности земли в местоположение на карте (экране), сначала происходит преобразование значений широты и долготы в "мировые" координаты. Данное преобразование осуществляется при помощи проекции карты. Для этого Google Maps использует проекцию Меркатора. Вы можете задать собственную проекцию, реализовав интерфейс google.maps.Projection. (Обратите внимание, что интерфейсы V3 не являются классами, от которых можно образовать производные классы. Они представляют собой спецификации для классов, которые вы создаете самостоятельно.)

Для удобства вычисления пиксельных координат (см. ниже) мы предполагаем, что при уровне масштабирования 0 карта представляет собой один фрагмент размером с базовый фрагмент. Затем мы определяем мировые координаты относительно пиксельных координат при коэффициенте масштабирования, равном нулю. Для этого мы используем проекцию и преобразуем значения координат долготы и широты в пиксельные положения в данном базовом фрагменте. Данная мировая координата является значением с плавающей запятой, измеряемым с отсчетом от начала координат проекции карты по отношению к определенному местоположению. Так как данное значение является значением с плавающей запятой, оно может быть намного точнее текущего разрешения отображаемой карты. Другими словами, мировая координа

Сайт является частным собранием материалов и представляет собой любительский информационно-образовательный ресурс. Вся информация получена из открытых источников. Администрация не претендует на авторство использованных материалов. Все права принадлежат их правообладателям