Александр Зинчук "Настройка карты: внешний вид и...
description
Transcript of Александр Зинчук "Настройка карты: внешний вид и...
![Page 1: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/1.jpg)
Настройка карты:внешний вид и поведение
Александр Зинчук,разработчик интерфейсов API Яндекс.Карт
APIшник Яндекс.Карт, Москва, 26 апреля 2012
![Page 2: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/2.jpg)
1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
1
![Page 3: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/3.jpg)
1. Геообъекты
2
![Page 4: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/4.jpg)
Как мне задатьсвою иконку для метки?!
1. Геообъекты
3
![Page 5: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/5.jpg)
отображениегеометрии
балун хинт
1. Геообъекты
4
![Page 6: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/6.jpg)
отображениегеометрии
балун хинт
1. Геообъекты
5
![Page 7: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/7.jpg)
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape
![Page 8: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/8.jpg)
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape
![Page 9: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/9.jpg)
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape8
![Page 10: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/10.jpg)
map.geoObjects.options.set(‘overlayFactory’,ymaps.geoObject.overlayFactory.hotspot
);
Геообъект / отображение геометрии
фабрики оверлеев
интерактивная
статическая графикахотспотная
интерактивная графикаIOverlayFactory
оверлеиIOverlay
9
![Page 11: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/11.jpg)
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape
![Page 12: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/12.jpg)
1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
10
![Page 13: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/13.jpg)
2. Макеты (Лейауты)
ILayout
метод параметры
конструктор {Object} dataSet
setParentElement() / getParentElement()
{DOMElement} parent
setData() / getData() {Object} dataSet
isEmpty() -
getClientBoundingRect() -
< IDomEventEmitter
интерфейс
11
![Page 14: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/14.jpg)
Макеты (лейауты)
ILayout
тема twirl
Контролы
Геообъекты Балун Хинт
универсальные
фабрика лейаутовtemplateLayoutFactory.createClass()
ImageWithContentImage12
![Page 15: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/15.jpg)
theme.twirl.label.Layout
layout.Image
layout.ImageWithContent
theme.twirl.geoObject.layout.StretchyIcontwirl#stretchyIcon
theme.twirl.balloon.Layout.layout.CloseButton.layout.Content
13
![Page 16: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/16.jpg)
placemark.options.set('iconLayout', ymaps.templateLayoutFactory.createClass('\ <ymaps class="custom-layout">\ $[[options.contentLayout\ observeSize = true\ maxWidth = options.maxWidth\ maxHeight = 150\ ]]\ </ymaps>\ '));
Фабрика лейаутов
Язык шаблонов
DOM-события
Слежение за размерами
14
![Page 17: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/17.jpg)
Языкшаблонов
<div>$[someData|defaultValue]</div>
<div style="width: $[options.size.0]px"></div>
var layout = new Layout({ someData: 'Hello', options: { size: [100, 200] } });
1. Подстановка данных
dataSet
15
![Page 18: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/18.jpg)
Языкшаблонов
<div>[if options.htmlView] $[htmlContent][else]$[textContent][endif]</div>
[ifdef data]<div id="data">$[data]</div>[endif]
var layout = new Layout({ htmlContent: '<b>Hello</b>', textContent: 'Hello', data: 0, options: { htmlView: false } });
2. Условные операторы
dataSet
16
![Page 19: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/19.jpg)
Языкшаблонов
<div>$[[options.contentLayout observeSize = true minWidth = 15 minHeight = 20 maxWidth = options.maxWidth|200 maxHeight = options.maxHeight|100 ]];</div>
<div id="my-sub">$[[sublayout]]</div>
var layout = new Layout({ options: { contentLayout: SomeLayoutClass, maxWidth: 500, maxHeight: 100 } });
3. Подстановка сублейаутов
dataSet
17
![Page 20: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/20.jpg)
Как мне задатьсвою иконку для метки?!
options
stat
e
geometry
properties
placemark.options.set('iconImageHref', 'mylogo.png');
ymaps.Image
dataSet<ymaps style=" background: url($[options.imageHref]);"></ymaps>
geoObject
из геообъекта
в макет{ }
18
![Page 21: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/21.jpg)
1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
19
![Page 22: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/22.jpg)
Button
TypeControl
MiniMap
Scaleline
ZoomControl
SmallZoomControl
TrafficControl
ListBox
SearchControl
3. Контролы
RollupButton20
![Page 23: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/23.jpg)
map.controls.add(new ym.control.Button('Launch <b>Nuclear</b> Attack'));
Контролы: Свой контент
map.controls.add(new ym.control.Button({ data: { image: ‘sun.png’ }}));
21
![Page 24: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/24.jpg)
Контролы:Группировка и позиционирование
map.controls.add(new ym.control.ToolBar({ items: [ new ym.control.Button('test2'), new ym.control.Button('test3'), new ym.control.RollupButton([ new ym.control.Button('A'), new ym.control.Button('B') ]) ] }), { top: 40, left: 5 });
22
![Page 25: Александр Зинчук "Настройка карты: внешний вид и поведение"](https://reader035.fdocuments.net/reader035/viewer/2022081718/556aba8dd8b42a89038b525b/html5/thumbnails/25.jpg)
Вопросы?Александр Зинчук
@ajaxy_ru