Использование собственных событий в OpenLayers - История изменений

Denis Rykov в 17:33, 27 июня 2012

2012-06-27T17:33:38Z

← Предыдущая версия		Версия от 19:33, 27 июня 2012
Строка 1:		Строка 1:
	{{Статья\|~~Черновик~~}}		{{Статья\|Опубликована\|openlayers-events}}
	{{Аннотация\|В статье на примере реальной задачи рассмотрен процесс регистрации и обработки собственных событий.}}		{{Аннотация\|В статье на примере реальной задачи рассмотрен процесс регистрации и обработки собственных событий.}}

Denis Rykov в 17:30, 27 июня 2012

2012-06-27T17:30:29Z

← Предыдущая версия		Версия от 19:30, 27 июня 2012
Строка 1:		Строка 1:
	{{Статья\|Черновик}}		{{Статья\|Черновик}}
			{{Аннотация\|В статье на примере реальной задачи рассмотрен процесс регистрации и обработки собственных событий.}}

	Предположим, перед нами стоит следующая задача: имеется векторный слой (vectors)		Предположим, перед нами стоит следующая задача: имеется векторный слой (vectors)
	и некоторое множество объектов (feature) класса OpenLayers.Feature.Vector		и некоторое множество объектов (feature) класса OpenLayers.Feature.Vector

Denis Rykov в 17:01, 27 июня 2012

2012-06-27T17:01:13Z

← Предыдущая версия		Версия от 19:01, 27 июня 2012
Строка 78:		Строка 78:

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
			json = new OpenLayers.Format.JSON();
			geojson = new OpenLayers.Format.GeoJSON();

	function update(evt) {		function update(evt) {
	switch (evt.type) {		switch (evt.type) {

Максим Дубинин в 16:07, 27 июня 2012

2012-06-27T16:07:01Z

← Предыдущая версия		Версия от 18:07, 27 июня 2012
Строка 4:		Строка 4:
	на нём. Необходимо при изменении расположения (feature.geometry),		на нём. Необходимо при изменении расположения (feature.geometry),
	стиля (feature.style) или названия (feature.attributes.title)		стиля (feature.style) или названия (feature.attributes.title)
	сериализовать соответствующие свойства в JSON-объект и передать на сервер.		сериализовать соответствующие свойства в JSON-объект и передать на сервер. Другими словами, мы хотим сохранять данные непосредственно в процессе их изменения, не создавая дополнительных инструментов типа "Сохранить данные".

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

Denis Rykov в 04:25, 27 июня 2012

2012-06-27T04:25:32Z

← Предыдущая версия		Версия от 06:25, 27 июня 2012
Строка 151:		Строка 151:
	}		}
	</syntaxhighlight>		</syntaxhighlight>

			Метод [https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call сall] - стандартная возможность JavaScript, позволяющая
			вызывать функции в контексте нужного объекта.

Denis Rykov в 04:00, 27 июня 2012

2012-06-27T04:00:00Z

← Предыдущая версия		Версия от 06:00, 27 июня 2012
Строка 1:		Строка 1:
			{{Статья\|Черновик}}
	Предположим, перед нами стоит следующая задача: имеется векторный слой (vectors)		Предположим, перед нами стоит следующая задача: имеется векторный слой (vectors)
	и некоторое множество объектов (feature) класса OpenLayers.Feature.Vector		и некоторое множество объектов (feature) класса OpenLayers.Feature.Vector

Denis Rykov: Новая страница: «Предположим, перед нами стоит следующая задача: имеется векторный слой (vectors) и некоторое…»

2012-06-27T03:53:47Z

Новая страница: «Предположим, перед нами стоит следующая задача: имеется векторный слой (vectors) и некоторое…»

Новая страница

Предположим, перед нами стоит следующая задача: имеется векторный слой (vectors)
и некоторое множество объектов (feature) класса OpenLayers.Feature.Vector
на нём. Необходимо при изменении расположения (feature.geometry),
стиля (feature.style) или названия (feature.attributes.title)
сериализовать соответствующие свойства в JSON-объект и передать на сервер.
В принципе нас не интересуют детали того, как именно эти свойства будут изменяться
(с помощью каких-либо контролов или в ручную или еще как-нибудь), для нас важно
научиться отслеживать и должным образом обрабатывать эти события.

По умолчанию при изменении геометрии в OpenLayers происходит срабатывание
стандартного события "featuremodified", нативных же событий, срабатывающих при
изменении стиля или какого-нибудь из свойств объекта feature.attributes не предусмотрено.

Придумаем названия для события изменения стиля - "stylemodified", изменения аттрибута title -
"titlemodified". Переходим к регистрации событий (небольшая справка по
использованию событий в OpenLayers доступна [http://gis-lab.info/forum/viewtopic.php?f=41&t=8401#p48813 здесь]).

<syntaxhighlight lang="javascript">
vectors.events.register("featuremodified", null, update)
vectors.events.register("stylemodified", null, update)
vectors.events.register("titlemodified", null, update)
</syntaxhighlight>

В данном примере update - это callback-функция, вызываемая при срабатывании
события. Обратите внимание на то, что во всех трёх случаях используется одна и
та же callback-функция. Конечно, можно было для каждого события написать свой
обработчик, но так как фактически всё время будет выполнятся одна и та же задача -
передача данных на сервер с разницей лишь в самих данных, то в таком случае код,
отвечающий за передачу информации на сервер дублировался бы трижды.

Так как "featuremodified" - стандартное событие, то вызывать нам вручную его не
требуется, соответствующие вызовы уже расставлены внутри кода OpenLayers. Вызывать
же события "stylemodified" и "titlemodified" придётся вручную.

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

<syntaxhighlight lang="javascript">
function changeStyle(feature) {
...
feature.layer.events.triggerEvent("stylemodified", {feature: feature});
}

function changeTitle(feature) {
...
feature.layer.events.triggerEvent("titlemodified", {feature: feature});
}
</syntaxhighlight>

Второй аргумент функции triggerEvent - объект, который будет передаваться в
callback-функцию. Аналогичным образом стандартное событие "featuremodified"
передаёт в callback объект, свойство feature которого - есть
ссылка на модифицированный объект, подробнее [http://dev.openlayers.org/releases/OpenLayers-2.11/doc/devdocs/files/OpenLayers/Layer/Vector-js.html#OpenLayers.Layer.Vector.EVENT_TYPES здесь].

Как же теперь внутри callback-а update определить от какого именно из событий
пришли данные, чтобы соответствующим образом сформировать строку, которую нужно
передать на сервер, ведь мы вроде-бы подаём на вход только объект {feature: feature}
и он не содержит в себе имени типа события. Однако, если залезть в исходники
OpenLayers и найти определение функции triggerEvent, то можно увидеть следующее:

<syntaxhighlight lang="javascript">
triggerEvent: function (type, evt) {
...
if(!evt.type) {
evt.type = type;
}
...
}
</syntaxhighlight>

То есть в объект (evt), подающийся на вход callback-у добавляется свойство
type, совпадающее с именем события.

Используя полученные знания, напишем callback-функцию update:

<syntaxhighlight lang="javascript">
function update(evt) {
switch (evt.type) {
case "featuremodified":
data = '{"geom":'+geojson.write(evt.feature.geometry)+'}';
break;
case "stylemodified":
data = '{"style":'+json.write(evt.feature.style)+'}';
break;
case "titlemodified":
data = '{"title":'+json.write(evt.feature.attributes.title)+'}';
break;
}
OpenLayers.Request.PUT({
url: "your_url/" + evt.feature.attributes.id,
data: data
});
}
</syntaxhighlight>

Вот и всё, ничего сложного.

== Дополнение ==

Не возникло ли у вас вопроса, почему у функции register второй аргумент равен
null и для чего он в принципе может использоваться? Попробуем разобраться.
Второй аргумент в терминах JavaScript - это scope, в контексте которого будет
вызываться callback-функция обработчик.

Поясним на примере:

<syntaxhighlight lang="javascript">
vectors.events.register("featuremodified", {"type": "geometry"}, update)
</syntaxhighlight>

То есть при вызове функции update её this будет ссылаться на объект:
<syntaxhighlight lang="javascript">
{"type": "geometry"}
</syntaxhighlight>

В этом случае update будет выглядеть следующим образом:

<syntaxhighlight lang="javascript">
function update(evt) {
switch (this.type) {
case "geometry":
data = '{"geom":'+geojson.write(evt.feature.geometry)+'}';
break;
case "style":
data = '{"style":'+json.write(evt.feature.style)+'}';
break;
case "title":
data = '{"title":'+json.write(evt.feature.attributes.title)+'}';
break;
}
OpenLayers.Request.PUT({
url: "your_url/" + evt.feature.attributes.id,
data: data
});
}
</syntaxhighlight>

А функции изменения стиля и названия:

<syntaxhighlight lang="javascript">
function changeStyle(feature) {
...
update.call({"type": "style"}, {feature: feature})
}

function changeTitle(feature) {
...
update.call({"type": "title"}, {feature: feature})
}
</syntaxhighlight>