站点图标 GIS开发者

leaflet之扩展leaflet类,定制功能

简介:leaflet提供了操作地图的基本类,提供了扩展功能。用户可以自由个性化定制扩展功能,开发自己的插件。

扩展leaflet

Leaflet有几百个插件。这些扩展了Leaflet的功能:有时以通用方式,有时以特定于用例的方式。

有这么多插件的部分原因是Leaflet很容易扩展。本教程将介绍最常用的方法。

请注意,本教程需要已经掌握了以下基础:

leaflet架构

让我们看一下Leaflet 1.0.0的简化UML类图。有超过60个JavaScript类,所以图表有点大。幸运的是,我们可以制作一个可缩放的图像L.ImageOverlay:

单独查看此示例。

从技术角度来看,Leaflet可以以不同的方式扩展:

本教程介绍了仅在Leaflet 1.0.0中可用的一些类和方法。如果您正在为以前的版本开发插件,请谨慎使用。

L.Class

JavaScript是一种奇怪的语言。它不是一种面向对象的语言,而是一种面向原型的语言。这使得JavaScript在历史上难以在术语的经典OOP含义中使用类继承。

Leaflet通过使用来解决这个问题L.Class,从而简化了类的继承。

尽管现代JavaScript可以使用ES6类,但Leaflet并不是围绕它们设计的。

L.Class.extend()

要在Leaflet中创建任何子类,请使用该.extend()方法。这接受一个参数:具有键值对的普通对象,每个键是属性或方法的名称,每个值是属性的初始值,或方法的实现:

var MyDemoClass = L.Class.extend({

    // A property with initial value = 42
    myDemoProperty: 42,   

    // A method 
    myDemoMethod: function() { return this.myDemoProperty; }
    
});

var myDemoInstance = new MyDemoClass();

// This will output "42" to the development console
console.log( myDemoInstance.myDemoMethod() );   

命名类,方法和属性时,请遵循以下约定:

L.Class.include()

如果已定义类,则可以重新定义现有属性/方法,或者可以使用.include()以下方法添加新属性/方法:

MyDemoClass.include({

    // Adding a new property to the class
    _myPrivateProperty: 78,
    
    // Redefining a method
    myDemoMethod: function() { return this._myPrivateProperty; }

});

var mySecondDemoInstance = new MyDemoClass();

// This will output "78"
console.log( mySecondDemoInstance.myDemoMethod() );

// However, properties and methods from before still exist
// This will output "42"
console.log( mySecondDemoInstance.myDemoProperty );

L.Class.initialize()

在OOP中,类具有构造函数方法。在Leaflet中L.Class,构造函数方法总是被命名initialize。

如果你的类有一些特定的options,那么L.setOptions()在构造函数中初始化它们是个好主意。此实用程序函数将提供的选项与类的默认选项合并。

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 "10"
console.log(instance.options.height); // Outputs "1", the default

Leaflet options以特殊方式处理属性:父类可用的选项将由子类继承:

var MyCubeClass = MyBoxClass.extend({
    options: {
        depth: 1
    }
});

var instance = new MyCubeClass('Blue');

console.log(instance.options.width); // Outputs "1", parent class default
console.log(instance.options.height); // Outputs "1", parent class default
console.log(instance.options.depth); // Outputs "1"

子类运行父的构造函数,然后运行自己的构造函数是很常见的。在传单中,这是使用L.Class.addInitHook()。此方法可用于“挂钩”在类’之后运行的初始化函数,initialize()例如:

MyBoxClass.addInitHook(function(){
    this._area = this.options.width * this.options.length;
});

这将在initialize()调用之后运行(调用setOptions())。这意味着this.options存在并且在init钩子运行时有效。

addInitHook 有一个替代语法,它使用方法名称并可以填充方法参数:

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

MyCubeClass.addInitHook('_calculateVolume', argValue1, argValue2);

父类的方法

调用父类的方法是通过到达父类的原型并使用来实现的Function.call(…)。例如,可以在以下代码中看到L.FeatureGroup:

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);
    },

    …
});

调用父的构造函数是以类似的方式完成的,而是使用ParentClass.prototype.initialize.call(this, …)。

工厂

大多数Leaflet类具有相应的工厂功能。工厂函数与类具有相同的名称,但lowerCamelCase代替UpperCamelCase:

function myBoxClass(name, options) {
    return new MyBoxClass(name, options);
}

命名规范

为Leaflet插件命名类时,请遵循以下命名约定:

 

退出移动版