麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Leaflet API - Class 类 中文文档

本文介绍下 Leaflet 中 Class 类 API的详细使用说明。

Class 类 API 调用方法

L.Class 为 Leaflet 的 OOP 设施提供了动力,它被用来创建这里记录的几乎所有 Leaflet 类。

除了实现一个简单的经典继承模型之外,它还引入了几个方便代码组织的特殊属性——options, includes 和 statics。

使用示例

var MyClass = L.Class.extend({
initialize: function (greeter) {
    this.greeter = greeter;
    // 类构造函数
},
greet: function (name) {
    alert(this.greeter + ', ' + name)
    }
});
// 创建 MyClass 的实例,将 "Hello" 传给构造函数
var a = new MyClass("Hello");
// 调用 greet 方法,提示 "Hello, World"
a.greet("World");

Class Factories

您可能已经注意到 Leaflet 对象是在不使用 new 关键字的情况下创建的。这是通过用小写工厂方法补充每个类来实现的:

new L.Map('map'); // becomes:
L.map('map');

工厂的实现非常容易,你可以为你自己的类做这个:

L.map = function (id, options) {
    return new L.Map(id, options);
};

Inheritance 继承

你使用 L.Class.extend 来定义新的类,但你可以在任何类上使用同样的方法来继承它:

var MyChildClass = MyClass.extend({
    // ... 新的属性和方法
});

这将创建一个继承父类的所有方法和属性的类(通过适当的原型链),添加或覆盖您传递给扩展的方法和属性。它也会对 instanceof 做出正确的反应:

var a = new MyChildClass();
a instanceof MyChildClass; // true
a instanceof MyClass; // true

您可以通过访问父类原型并使用 JavaScript 的 call 或 apply 从相应的子方法调用父方法(包括构造函数)(就像其他语言中的超级调用一样):

var MyChildClass = MyClass.extend({
    initialize: function () {
        MyClass.prototype.initialize.call(this, "Yo");
    },
    greet: function (name) {
        MyClass.prototype.greet.call(this, 'bro ' + name + '!');
    }
});
var a = new MyChildClass();
a.greet('Jason'); // alerts "Yo, bro Jason!"

Options 选项

options 是一个特殊的属性,与其他对象不同,你传递给到 extend 将与父对象合并,而不是完全覆盖它,这使得管理对象的配置和默认值更加方便。

var MyClass = L.Class.extend({
    options: {
        myOption1: 'foo',
        myOption2: 'bar'
    }
});
var MyChildClass = MyClass.extend({
    options: {
        myOption1: 'baz',
        myOption3: 5
    }
});
var a = new MyChildClass();
a.options.myOption1; // 'baz'
a.options.myOption2; // 'bar'
a.options.myOption3; // 5

还有 L.Util.setOptions,这个方法可以方便地将传递给构造函数的选项与类中定义的默认值合并:

var MyClass = L.Class.extend({
    options: {
        foo: 'bar',
        bla: 5
    },
    initialize: function (options) {
        L.Util.setOptions(this, options);
        ...
    }
});
var a = new MyClass({bla: 10});
a.options; // {foo: 'bar', bla: 10}

请注意,options对象允许任何键,而不仅仅是该类及其基类所定义的选项。这意味着你可以使用options对象来存储应用程序的特定信息,只要你避免使用已经被有关类使用的键。

Includes 包含

includes 是一个特殊的类属性,它将所有指定的对象合并到类中(这样的对象被称为mixins)。

 var MyMixin = {
    foo: function () { ... },
    bar: 5
};
var MyClass = L.Class.extend({
    includes: MyMixin
});
var a = new MyClass();
a.foo();

你也可以在运行时用 include 方法做这种包含:

MyClass.include(MyMixin);

statics 只是一个方便的属性,它将指定的对象属性注入到类的静态属性中,对于定义常量很有用:

var MyClass = L.Class.extend({
    statics: {
        FOO: 'bar',
        BLA: 5
    }
});
MyClass.FOO; // 'bar'

Constructor hooks

如果你是一个插件的开发者,你经常需要为现有的类添加额外的初始化代码 (例如,为 L.Polyline 编辑钩子)。Leaflet自带了一种方法,可以使用 addInitHook 方法轻松做到这一点:

MyClass.addInitHook(function () {
    // ... 在构造函数中额外做一些事情
    // 例如添加事件侦听器,设置自定义属性等。
});

当您只需要进行一个额外的方法调用时,您也可以使用以下快捷方式:

MyClass.addInitHook('methodName', arg1, arg2, …);

Functions 函数

Function 返回值 说明
extend(<Object> props) Function 扩展当前的类 ,给定要包括的属性。返回一个Javascript函数,该函数是一个类的构造函数 (可与 new 一起调用)。
include(<Object> properties) this 在当前类中包含一个 mixin
mergeOptions(<Object> options) this 合并 选项 到类的默认值中。
addInitHook(<Function> fn) this 给类添加一个构造函数钩子

其他API

Leaflet中文API文档手机(v.19版本)参考:《Leaflet中文API文档手机(v.19版本)

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
公众号关注
知识星球
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
关注麻辣GIS知识星球
私享圈子

留言板(小编看到第一时间回复)