Наложение фото

В более ранних версиях KML к меткам можно было добавлять небольшие фото, вставляя их во всплывающие окна с описаниями. В Google Планете Земля целые слои, например Panoramio, состоят из загруженных пользователями изображений. Чтобы их просмотреть, необходимо нажать на значок метки (или на ее название в панели "Список") и открыть всплывающее окно с описанием.

Элемент <PhotoOverlay> позволяет размещать фото прямо на местности. Это могут быть обычные двухмерные прямоугольники (нечто вроде рекламных щитов, дополняющих изображения со спутника), либо цилиндрические или сферические панорамы, которые пользователь может рассмотреть в деталях. Кроме того, <PhotoOverlay> в KML 2.2 поддерживает крупные изображения с большим количеством мегапикселей. Если вы планируете использовать такие фото, подумайте о добавлении нескольких уменьшенных версий, чтобы их можно было загружать по частям и с минимально необходимым разрешением в зависимости от того, куда направлена виртуальная камера и как далеко она находится от изображения.

Рекомендуем также прочитать главу Камеры, так как в <PhotoOverlay> используется элемент <Camera>. Если вы планируете добавлять крупные изображения, обязательно ознакомьтесь с элементом <ImagePyramid>.

Возможности

Новый элемент <PhotoOverlay> позволяет разместить фото в определенной точке Земли и задать положение и ориентацию виртуальной камеры (с помощью элемента <Camera>), с которой просматривается изображение. Элемент <PhotoOverlay> может быть простым двумерным прямоугольником, неполным или полным цилиндром, а также сферой (для сферических панорам). Фото размещается в указанном месте и ориентируется по направлению к виртуальной камере.

Обратите внимание на то, что элемент <PhotoOverlay> позволяет добавлять крупные изображения с большим количеством мегапикселей, которые пользователь может приближать и рассматривать в деталях. Подробнее…

Ключевые понятия

Ниже перечислены основные понятия, относящиеся к элементу <PhotoOverlay> и рассматриваемые на этой странице.

  • Наследование от элементов <Feature> и <AbstractView>
  • Наследование от элемента <Overlay>
  • Форма
  • Поле обзора
  • Ориентация поля обзора с помощью элемента <rotation>
  • Добавление значков к наложенным фото
  • Пирамида изображений (для опытных разработчиков – подробные сведения приведены в разделе Добавление крупных изображений)

Синтаксис

Представленный здесь синтаксис элемента <PhotoOverlay> призван упростить понимание связанных с ним ключевых понятий.

<PhotoOverlay>
  <!-- наследование из элемента Feature -->   
  <name>...</name>                      <!-- строка -->   
  <visibility>1</visibility>            <!-- логическое значение -->   
  <open>0</open>                        <!-- логическое значение -->
  <atom:author>...<atom:author>         <!-- xmlns:atom -->   
  <atom:link>...</atom:link>            <!-- xmlns:atom -->   
  <address>...</address>                <!-- строка -->   
  <AddressDetails xmlns="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">...
 </AddressDetails> <!-- строка --> <phoneNumber>...</phoneNumber> <!-- строка -->
 <Snippet maxLines="2">...</Snippet> <!-- строка --> <description>...</description> <!-- строка --> <AbstractView>...</AbstractView> <!-- Camera или LookAt --> <TimePrimitive>...</TimePrimitive> <styleUrl>...</styleUrl> <!-- anyURI --> <StyleSelector>...</StyleSelector> <Region>...</Region> <ExtendedData>...</ExtendedData> <!-- наследование из Overlay --> <color>ffffffff</color> <!-- kml:color --> <drawOrder>0</drawOrder> <!-- int --> <Icon> <href>...</href> <!-- anyURI --> ... </Icon> <!-- только для PhotoOverlay --> <rotation>0</rotation> <!-- kml:angle180 --> <ViewVolume> <leftFov>0</leftFov> <!-- kml:angle180 --> <rightFov>0</rightFov> <!-- kml:angle180 --> <bottomFov>0</bottomFov> <!-- kml:angle90 --> <topFov>0</topFov> <!-- kml:angle90 --> <near>0</near> <!-- double --> </ViewVolume> <ImagePyramid> <tileSize>256</tileSize> <!-- int --> <maxWidth>...</maxWidth> <!-- int --> <maxHeight>...</maxHeight> <!-- int --> <gridOrigin>lowerLeft</gridOrigin> <!-- lowerLeft или upperLeft--> </ImagePyramid> <Point> <coordinates>...</coordinates> <!-- lon,lat[,alt] --> </Point> <shape>rectangle</shape> <!-- kml:shape --> </PhotoOverlay>

Наследование от элемента <Feature>

Так как <PhotoOverlay> наследуется от элемента <Feature>, он может содержать один из двух элементов, производных от <AbstractView>: либо <Camera>, либо <LookAt>. Camera (или LookAt) определяет точку обзора и направление обзора (которое также называется вектором обзора). Положение <PhotoOverlay> определяется точкой обзора. В частности, плоскость двухмерного прямоугольного изображения перпендикулярна вектору обзора. Перпендикуляр к этой плоскости направлен в сторону точки обзора.

Наследование от элемента <Overlay>

URL накладываемого изображения задается в теге <Icon>, который наследуется от <Overlay>. Тег <Icon> должен содержать элемент <href>, указывающий на файл изображения для элемента <PhotoOverlay>. Если размер фото превышает гигапиксель, URL в <href> должен указывать на пирамиду изображений с разными разрешениями. Подробнее…

Форма

Изображение, заданное элементом <PhotoOverlay>, проектируется на поверхность определенной формы. Определяющий ее параметр <shape> может принимать следующие значения:

  • rectangle – для обычной прямоугольной фотографии;
  • cylinder – для панорам; может быть частичным или полным цилиндром;
  • sphere – для сферических панорам.

Поле обзора

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

Поле обзора для элемента <PhotoOverlay> ограничивается четырьмя плоскостями, каждую из которых определяет угол относительно вектора обзора. Эти четыре плоскости формируют верхнюю, нижнюю, левую и правую стороны поля обзора, которое имеет форму усеченной пирамиды, как показано на рисунке.

Поле обзора камеры

Ниже схематически представлены параметры этой пирамиды: <rightFov>, <leftFov> (вид сбоку), <topFov> и <bottomFov> (вид сверху).

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

bottomFov = -topFov

и 

leftFov = -rightFov

Типичные значения этих параметров таковы:

<ViewVolume>
  <near>1000</near>
  <leftFov>-60</leftFov>
  <rightFov>60</rightFov>
  <bottomFov>-60</bottomFov>
  <topFov>60</topFov>
</ViewVolume>

Для элемента <shape>, содержащего <PhotoOverlay>, задается значение <near> – расстояние в метрах от точки обзора (виртуальной камеры). Изображение пересекают четыре плоскости, ограничивающие поле обзора, в результате чего отображается только содержание внутри пирамиды, образуемой этими плоскостями. Все, что остается за ее пределами, обрезается.

Поле обзора прямоугольника

Для прямоугольника значение <topFov> должно быть меньше 90°, а значение <bottomFov> – больше -90°. Если хотя бы одно из этих ограничений превышено, поле обзора вовсе не будет пересекаться с изображением. Элементы <bottomFov> и <leftFov> обычно имеют отрицательные значения.

Поле обзора цилиндра

Ось цилиндра совпадает с вектором вверх (осью Y), а радиус цилиндра равен значению параметра <near>.

Значения параметров поля обзора для цилиндра лежат в следующих диапазонах:

-90 < bottomFov < topFov < 90
-180 < leftFov < rightFov < 180

Поле обзора сферы

Центр сферы совпадает с точкой, в которой расположена виртуальная камера (точкой обзора), а радиус сферы равен значению параметра <near>. Значения параметров поля обзора для сферы лежат в следующих диапазонах:

-90 < bottomFov < topFov < 90
-180 < leftFov < rightFov < 180

Ориентация поля обзора с помощью элемента <rotation>

Используя <rotation> как дочерний элемент элемента <PhotoOverlay>, можно определить способ размещения фото в поле обзора. Эта возможность пригодится, если изображение было повернуто и немного отклоняется от горизонтали.

Добавление значков к наложенным фото

Элемент <PhotoOverlay> содержит элемент <Point>, который используется так же, как <Point> внутри <Placemark>, т. е. Google Планета Земля отображает значок, отвечающий расположению <PhotoOverlay>. Как и в случае <Placemark>, значок определяется с помощью полей <styleUrl> и <StyleSelector>.

Добавление крупных изображений

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

Если фото слишком велико, создайте для него пирамиду изображений и включите в тег <href> элемента <Icon> ссылки на соответствующие фрагменты. В следующих разделах приведены инструкции по созданию пирамиды изображений и определению тега <href> для фотографий размером более одного гигапикселя.

Элемент <ImagePyramid>

Ниже показан синтаксис элемента <ImagePyramid>.

<ImagePyramid>
  <tileSize>256</tileSize>              <!-- int -->
  <maxWidth>...</maxWidth>              <!-- int -->
  <maxHeight>...</maxHeight>            <!-- int -->
  <gridOrigin>lowerLeft</gridOrigin>    <!-- lowerLeft или upperLeft -->
</ImagePyramid>

Размер исходного изображения в пикселях задается с помощью параметров <maxWidth> и <maxHeight>, которые могут иметь любые значения (не обязательно степень двойки). Оставшееся место заполняется пустыми пикселями. Подробнее…

Фрагменты должны быть квадратными, а значение <tileSize> должно быть степенью двойки. Рекомендуется использовать значение 256 (по умолчанию) или 512.

Создание пирамиды изображений

В инструкциях ниже предполагается, что значения длин сторон изображения являются степенями двойки. (Если это не так, сначала добавьте пустые пиксели, как описано в разделе Заполнение пустых областей изображения.) Чтобы создать пирамиду изображений, выполните указанные ниже действия.

  1. Разделите исходное изображение на фрагменты (например, размером 256х256 пикселей).
  2. Уменьшите изображение в два раза.
  3. Разделите получившуюся картинку на фрагменты того же размера, что и в пункте 1.
  4. Повторяйте шаги 1 и 2, пока изображение не будет помещаться в квадрат, равный по размерам фрагменту (например, 256х256 пикселей).

Заполнение пустых областей изображения

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

Пример

В качестве примера рассмотрим фото размером 3600х2700 пикселей (примерно 10 мегапикселей). Ниже описано, как создать для него пирамиду изображения.

  1. Разделите исходное изображение на квадраты со стороной 256 пикселей (их должно получиться 16 по вертикали и 16 по горизонтали). Количество уровней пирамиды будет в этом случае равно четырем.
  2. Заполните пустые области, чтобы все фрагменты имели форму квадрата. При условии, что значение <gridOrigin> – lowerLeft, пустые области будут находиться в последнем столбце (справа) и в последнем ряду (вверху).
  3. Уменьшите изображение в два раза.
  4. Разделите его на фрагменты по 256 пикселей. На этот раз их получится 8 по вертикали и 8 по горизонтали (уровень 3).
  5. Снова уменьшите изображение в два раза.
  6. Разделите его на фрагменты. Их получится 4 по вертикали и 4 по горизонтали (уровень 2).
  7. Снова уменьшите изображение в два раза.
  8. Разделите его на фрагменты. Их получится 2 по вертикали и 2 по горизонтали (уровень 1).
  9. Снова уменьшите изображение в два раза.
  10. В результате получится картинка размером 256х256 пикселей – это последний уровень пирамиды (уровень 0).

Для изображения размером 4096х4096 пикселей потребуется пятиуровневая пирамида, как описано в таблице ниже.

Уровень
Количество фрагментов
Размер изображения (в пикселях)
0
 1
256х256
1
 4 (2х2)
512х512
2
 16 (4х4)
1024х1024
3
 64 (8х8)
2048х2048
4
 256 (16х16)
4096х4096

Таким образом, на уровне пирамиды n количество фрагментов по горизонтали и по вертикали равно 2n.

Ниже показаны нулевой, первый и второй уровни пирамиды изображений.

Нумерация фрагментов

Фрагменты на каждом уровне нумеруются, чтобы загружать в Google Планету Земля только те из них, которые отвечают текущей точке обзора. Каждый фрагмент описывается с помощью трех значений:

  • x – номер ряда;
  • y – номер столбца;
  • level – уровень в пирамиде изображений (высший уровень – 0).

По умолчанию начало координат – фрагмент 0,0 – располагается в левом нижнем углу. Если оно находится в левом верхнем углу, задайте для <gridOrigin> значение topLeft.

Ниже проиллюстрирована нумерация фрагментов изображения размером 10 мегапикселей на втором уровне пирамиды (начало координат находится в левом нижнем углу).

Указание URL для крупных изображений

Если размер изображения превышает один гигапиксель, в тег <href> элемента <Icon> необходимо включить значения level, x и y для отдельных фрагментов изображения, чтобы они были правильно обработаны Google Планетой Земля. Например, URL изображения можно определить так:

http://server.company.com/bigphoto/$[level]/row_$[x]_column_[$y].jpg

Чтобы получить фрагмент, расположенный во 2-м ряду и 1-м столбце на уровне 3, Google Планета Земля сформирует следующий URL:

http://server.company.com/bigphoto/3/row_2_column_1.jpg

Прозрачность

Если изображение не имеет прозрачных областей, используйте формат JPEG. Если оно содержит как прозрачные, так и непрозрачные области, можно комбинировать PNG- и JPEG-фрагменты. Формат PNG рекомендуется использовать только для фрагментов с прозрачностью. Если используются оба формата, не указывайте расширение в теге <href>; вместо этого включите его в имя файла каждого из фрагментов.

Наверх