Мастер-класс "Создание карты игрового мира при...

Создание карты игрового мира при помощи API Яндекс.КартВсеволод Шмыров

API Яндекс.Карт

Весь проект

bit.ly/1vRhlus

Для когоэтот

мастер-класс?

Почемутакая тема?

Уильям Шекспир

│ “Вся жизнь - игра, а люди в ней актёры”

14http://skyrim.coolaps.com/

15http://gorodkerch.com/map/

Как будетпроходить

мастер-класс?

«Документация - друг

разработчика»

bit.ly/1FXfrNo

>= 8 >= 12.15 >= 4.0 >= 7

Поехали!

bit.ly/1vRhlus

21

Определение координат

bit.ly/1I7MyjN

Первая часть

bit.ly/1I7NBAc

Что такое тайлы

и тайловый слой?

29

Чем хороши тайлы?

› Меньшая нагрузка на сервер › Кеширование› Экономия трафика пользователя› Генерация по изменению

x0

0

0

x1

0

0

1

1

x2

Инструмент для нарезки

тайлов

bit.ly/1ylLDUT

Сформированный слой

bit.ly/1FSCN4O

38

Вторая часть

bit.ly/12rgF4p

bit.ly/1zYDTKu

49

Третья часть

bit.ly/1BjK4wE

│ ObjectManager

Активныеобласти

GeoObject

ObjectManager

ObjectManager

Готовый JSON

bit.ly/1z0gg5V

62

Подключение данных

<script type="text/javascript"

src="./data/placesData.js">

</script>

Правильное подключение данных

$.ajax({

url: "./data/placesData.js"

}).done(function(data) {

objectManager.add(data);

});

ObjectManager

LoadingObjectManager

RemoteObjectManager

Четвертая часть

bit.ly/1wCMOn5

Создание своего макета

var LayoutClass =

ymaps.templateLayoutFactory.createClass(

"<h1>{{ properties.header }}</h1>"

);

70

Возможности шаблонизатора

› Подстановка данных › Подстановка подмакета› Условие› Цикл

Создание своего макета

var LayoutClass =

ymaps.templateLayoutFactory.createClass(

"<h1>{{ properties.header }}</h1>", {

build: function () {

// ..

}

}

);

│ domEvent.manager

mousedownmouseupmousemoveclickdbclick…

touchstarttouchendtouchmove…

pointerdownpointeruppointermove…

Стили

bit.ly/1FXj8CF

75

Пятая часть

bit.ly/1BjKDXs

Спасибо за внимание!

vsesh@yandex-team.ru

vsevolod.shmyrov

Всеволод Шмыров

Разработчик API Яндекс.Карт