Extended leaflet: Class

Leaflet has hundreds of free plug-ins that extend the functionality of leaflet: sometimes in a common way, sometimes in a specific scenario.

Part of the reason leaflet has so many plugins is that leaflet is easy to scale. This tutorial describes the most common ways to extend leaflet.

Note: This article assumes that you have mastered the knowledge:

JavaScript DOM handling object-oriented programming (ability to understand concepts such as classes, instances, inheritance, methods, and properties)

LEAFET Architecture

Let's take a look at the simplified UML class diagram of leaflet 1.0.0. Leaflet has more than 60 JavaScript classes, so the UML diagram is a bit big, and fortunately we can use L.imageoverlay to make scalable images.

From a technical point of view, leaflet can be extended using several ways:

The most common way: Use L.class.extend () to create L.layer,l.handler or L.control

The layer moves when the map is moved, scaled, handler invisible and used to handle browser events control is a fixed interface element

Use L.class.include () to include new function functions in existing classes

Add new methods and options change some methods use the Addinithook method to execute additional constructor code

Use L.class.include () to change parts of a class that already exists (change the implementation of a method in a class)

This article contains classes and methods that exist only in leaflet 1.0.0, and should be aware of the availability of classes and methods when developing plug-ins for older versions. L.class
JavaScript is a bit of a strange language. It is not a true object-oriented language, but a prototype-oriented language. This makes JavaScript difficult to use in traditional object-oriented programming inheritance, whereas leaflet based on L.class makes class inheritance simple. Although modern JavaScript can use classes in ES6, leaflet is not designed based on ES6.
l.class.extend ()
We can use. Extend () to create any subclass of the leaflet. This method uses a parameter: A simple object of a key-value pair, each of which is the name of the property or method, and each value is the initial value of the property or the implementation of the method.

var Mydemoclass = l.class.extend ({

    //a property with initial value =
    mydemoproperty:42,   

    //a method 
    m Ydemomethod:function () {return this.mydemoproperty;}
    
});

var mydemoinstance = new Mydemoclass ();

This would output "a" to the development console
Console.log (Mydemoinstance.mydemomethod ());   

When naming classes, methods, and properties, observe the following naming conventions:

Functions, methods, properties, and factory method names should use the small Hump style class name to begin with a large hump style private property and a method underscore (_). This isn't really about privatizing properties and methods, just reminding developers not to use them directly

l.class.include ()

If a class is already defined, you can use. Include () to redefine an existing property, method, or add a new property or method.

Mydemoclass.include ({

    //Adding A new property
    to the class _myprivateproperty:78,
    
    //redefining a METHOD
  mydemomethod:function () {return this._myprivateproperty;}

});

var myseconddemoinstance = new Mydemoclass ();

This would output "Console.log"
(Myseconddemoinstance.mydemomethod ());

However, properties and methods from before still exist
//This would output "Console.log"
(myseconddemoinst Ance.mydemoproperty);

l.class.initialize ()

In OOP, a class has a constructor method. In L.class in leaflet, the constructor method is named initialize.

If your class has some specific options, you can use the L.setoptions () method in the constructor to initialize the options. This function merges the options provided and the default options in the class.

var Myboxclass = l.class.extend ({

    options: {
        width:1,
        height:1
    },

    initialize:function (name, Options) {
        this.name = name;
        L.setoptions (this, options);
    }
    
});

var instance = new Myboxclass (' Red ', {width:10});

Console.log (Instance.name); Outputs "Red"
Console.log (instance.options.width);//Outputs "ten"
Console.log (instance.options.height ); Outputs "1", the default

Leaflet handles option properties in a special way: subclasses inherit the option property (options) from the parent class.

var Mycubeclass = myboxclass.extend ({
    options: {
        depth:1
    }
});

var instance = new Mycubeclass (' Blue ');

Console.log (instance.options.width);
Console.log (instance.options.height);
Console.log (instance.options.depth);

It is also common for subclasses to perform the behavior of the parent class constructor and its own constructor. You can use the L.class.addinithook () implementation in Leafleet. This method "hangs" the initialization function after the class's Initialize () method has just been executed, such as:

Myboxclass.addinithook (function () {
    This._area = this.options.width * this.options.length;
});

The function is executed after initialize () executes (calling the method of Setopstions ()). This means that the this.options already exists and is assigned before the hook executes.

Addinithook has an optional syntax that can use the method name and the parameters in the method as parameters of the Addinithook.

Mycubeclass.include ({
    _calculatevolume:function (arg1, arg2) {
        This._volume = this.options.width * This.options.length * this.options.depth;
    }
});

Mycubeclass.addinithook (' _calculatevolume ', argValue1, argValue2);

methods of the parent class

You can call a method in the parent class by accessing the prototype of the parent class, using Function.call (...). can be achieved. For example, you can see in the L.featuregroup code:

L.featuregroup = L.layergroup.extend ({

    addlayer:function (layer) {
        ...
        L.layergroup.prototype.addlayer.call (this, layer);
    },
    
    removelayer:function (layer) {
        ...
        L.layergroup.prototype.removelayer.call (this, layer);
    },

    ...
});

The constructor that invokes the parent class can be substituted in the same way as the following: ParrentClass.prototype.initialize.call (this,...). Factory Method

Most leaflet classes have a corresponding factory method. The factory method has the same name as the corresponding class, except that the class uses the large hump style and the factory method uses the small hump style.

function Myboxclass (name, options) {
    return new Myboxclass (name, options);
}

naming Style

When naming the leaflet class plug-in, follow the naming conventions:

Never expose a global variable in your plugin if you have a new class, put it directly in the L namespace (l.myplugin) If you inherit an existing class, use it as a child of an existing class

Original address: http://leafletjs.com/examples/extending/extending-1-classes.html