Настройка карт в КУРС: Showcase

Материал из Course Orchestra
Перейти к: навигация, поиск

Настройка стилей

Стили рекомендуется держать в отдельном файле. Файл со стилями должен иметь такую структуру:

define([],[
{
// определение стиля
},
{
// определение стиля
},
{
// определение стиля
}
]);

Внутри блока, ограниченного фигурными скобками, задаются пары атрибут - значение атрибута.

Допустимые атрибуты стиля точечных объектов

img

Задает иконку для точечного объекта. Значением является javascript объект. Обязательными атрибутами этого объекта являются:

  • src (задает путь к иконке),
  • size (задает размер иконки в виде массива из двух чисел - ширины и высоты).

Необязательный атрибут:

  • anchor

Атрибут anchor задает положение центра иконки относительно ее левого верхнего угла. Значением атрибута anchor является массив из двух чисел - горизонтальной и вертикальной координат центра иконки. Если атрибут anchor отсутствует, то центр иконки будет находиться в центральной точке иконки

img: {
	src: "icons/myicon.png",
	size: [110, 60],
	anchor: [10, 5] // центр находится 10 пикселей вправо и 5 пикселей вниз от левого верхнего угла иконки
},

text

Задает настройки подписи. Значением является javascript-объект или массив javascript-объектов. В случае массива будет создано столько подписей, сколько элементов в массиве. Атрибутами объекта могут быть:

  • size

Задает размер подписи

  • fill

Задает цвет подписи

  • haloFill

Задает цвет окантовки

  • haloRadius

Задает размер окантовки

  • dx

Задает горизонтальное смещение подписи относительно центра иконки

  • dy

Задает вертикальное смещение подписи относительно центра иконки

  • attr

Атрибут, содержащий подпись (по умолчанию - label или name)

Пример одной подписи:

text: {
	size: 15,
	fill: "black",
	haloFill: "white",
	haloRadius: 1.5,
	dy: -48,
	dx: 24
}

Пример двух подписей:

text: [
{
	size: 15,
	fill: "black",
	haloFill: "white",
	haloRadius: 1.5,
	dy: -48,
	dx: 24
},
{
	size: 15,
	fill: "black",
	haloFill: "white",
	haloRadius: 1.5,
	dy: 8,
	dx: 10,
	attr: "label2" // label2 должен приходить из Showcase
}
]


Допустимые атрибуты стиля площадных объектов

  • fill

Цвет объекта

  • stroke

Цвет границы объекта

  • strokeWidth

Толщина границы объекта

  • fillOpacity

Прозрачность объекта: 0-полностью прозрачный, 1-полностью непрозрачный

  • strokeOpacity

Прозрачность границы объекта: 0-полностью прозрачная, 1-полностью непрозрачная

Допустимые атрибуты стиля линейных объектов

  • stroke

Цвет границы объекта

  • strokeWidth

Толщина границы объекта

  • strokeOpacity

Прозрачность границы объекта: 0-полностью прозрачная, 1-полностью непрозрачная


Служебные атрибуты

styleClass

Если этот атрибут задан в блоке, ограниченном фигурными скобками, то атрибуты стиля в этом же блоке будут применены только для объектов, у которых задан атрибут styleClass с тем же самым значением.

fid

Если этот атрибут задан в блоке, ограниченном фигурными скобками, то атрибуты стиля в этом же блоке будут применены только для объекта с id равным значению атрибута fid.

theme

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

Применение атрибутов стиля в зависимости от масштаба (zoom)

Блок со стилем может содержать атрибут zoom, значением которого является массив или целое неотрицательное число:

style: {
	...
	zoom: [1, 8]
}

Атрибут zoom устанавливает на каких масштабах следует использовать данный блок стиля для вычисления итогового стиля элемента карты. Первый элемент массива устанавливает минимальный зум, второй элемент массива - максимальный зум. Нулевому зуму соответствует размер карты 256x256 пикселей. Каждый последующий зум увеличивает длину и ширину карты в 2 раза. Например, на первом зуме размер карты: 512x512 пикселей.

Атрибут zoom можно также задать в таком виде:

style: {
	...
	zoom: [1,]
}

В этом случае максимальный зум не устанавливается.

Если значением атрибута zoom является число, то данный блок со стилем будет использоваться только когда зум карты равен заданному значению атрибута zoom.

Чтобы не показывать объект на определённых зумах, рекомендуется в стиле задать следующие атрибуты:

style: {
	...
	img: {},
	size: 0
}