leaflet地图原理_动手撸一个地图引擎（三）

地图拖动实现原理相对比较简单，就是地图面板容器随着鼠标移动的过程；地图图层及其他要素监听移地图动事件，进行更新状态操作。例如地图移动过程中瓦片图层需要加载当前视图范围未加载的瓦片，需要销毁超出当前范围的瓦片。

1 Event事件类设计

     Event事件类通常会使用观察者设计模式，观察者模式定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并被自动更新。这种设计模式应用非常广泛，大家熟悉的Vue、leaflet、tomcat、Netty等等都有观察者模式的身影。js-event-bus是javascript开源的事件总线，大家可以拿来直接用，本文给大家简单写一个。

//事件类class Event{
        constructor() {
            this.listener = [];    }    //注册事件    on(type, fn, ctx) {
            this.listener.push({
                type,            fn,            ctx        });    }    //触发事件    fire(type, object) {
            this.listener.filter(item => {
                return item.type === type;        }).forEach(item => {
                let {
    type, fn, ctx} = item;            ctx = ctx || this;            fn && fn.call(ctx, object);        });    }}

2 让地图类、图层类继承Event

     使地图和图层等实例具有发布、订阅事件的能力，之后的几乎所有功能都离不开事件。鼠标拖动地图是触发move事件，瓦片、marker等图层及其他叠加物监听地图move事件，做出相应的更新。

//地图类class Map extends Event{
      ...}//图层类class Layer extends Event{
      ...  }

3 MouseHandler