OpenLayers.class()

When you program you own OpenLayers component in OpenLayers you use OpenLayers.Class()

When extending you use already known component like OpenLayers.Control and add you own properties, functions, events and you can also override the existing properties, functions, same like in Ext.

Difference is that Extjs has more example then OpenLayers. But the principle is the same.

OpenLayers.Control.MyControl = OpenLayers.Class(OpenLayers.Control, {
 /**
 CLASS_NAME - Atribute that defines OpenLayers class for registration
 **/
 CLASS_NAME:"OpenLayers.Control.MyControl",
 /**
 * EVENT_TYPES - List of events
 **/
 EVENT_TYPES: [
               "activate",
               "deactivate",
               "featureselected",
               "featuredeselected"
              ],

 initialize: function(layer, options) {
 /**
 * Called during component initialization
 **/
 
 /**
 * Config object that been applied to 'this' so properties can
 * be overriden here
 */
 OpenLayers.Control.prototype.initialize.apply(this, [options]);
 
 /**
 * callbacks -- function that are passed future that are clicked
 **/
 var callbacks = {
 click: this.clickFeature,
 clickout: this.clickoutFeature
 };
 /**
 Layer that will handler will use for selection
 **/
 this.layer = layer;
 /**
 * every OpenLayers Control has handler, handler is a object that
 * interacts with html, example in this we you use 
 * Handler Feature,  wich returns control feature 
 * that is clicked in map object
 **/
 this.handler = new OpenLayers.Handler.Feature(
 this, this.layer, this.callbacks, {clickTolerance:1000}
 )
 },
 clickFeature:function(feature){
 /**
 * feature that is selected
 **/
 
 /**
 * trigger you own event 
 **/
 this.events.triggerEvent("featureselected", {
 feature : feature,
 control:this
 });
 
 /**
 * call you own method to do something with future
 **/
 this.doSomething(feature);
 },
 clickout: function(feature){
 /**
 * feature that is deselected
 **/
 
 /**
 * trigger you own event 
 **/
 this.events.triggerEvent("featuredeselected", {
 feature : feature,
 control:this
 });
 },
 
 activate:function(){
 /**
 * when you activate you control you must activate handler
 **/
 this.handler.activate()
 OpenLayers.Control.prototype.activate.apply(this, arguments);
 },
 deactivate:function(){
 /**
 * when you deactivate you control you must deactivate handler
 **/
 this.handler.deactivate();
 OpenLayers.Control.prototype.deactivate.apply(this, arguments);
 },
 
 doSomething:function(feature){
 /**
 * method that will do something with the future
 **/
 }
});

You can also check for addicional information OpenLayers SVN sandbox:
http://dev.openlayers.org/sandbox/
and you can see addicional staff here :
http://gis.ibbeck.de/ginfo/apps/OLExamples/Index/index.html
(not object oriented examples) :]

Comments

Popular Posts