第三节：实现图层管理器逻辑

在上一节中，我们已经实现了按钮的取消和选中，并且与创建和删除图层做了绑定，这一节，我们来实现图层管理器的通用逻辑。

图层缓存

既然我们要能够删除图层，说明我们已经将图层缓存起来，当然Map本身就有对图层的缓存，这个是存储了地图上所有的图层，如果有时候我们只要针对一部分图层做缓存（比如我们的气象图层），这时候就可以自己使用一个key-value对象进行缓存，在本例中，我们增加一个_layers对象用于缓存图层。

private _layers: { [key: string]: L.Layer } = {};

图层创建

在本示例中，到目前为止，我们知道的要添加的图层有实况站点图层、卫星云图切片图层、GFS填色图层这三大类，因此我们创建图层的逻辑也可以大致分为这三类：

private async _createMetarLayer() : Promise<L.Layer> {
   return undefined;
}

private _createCloudLayer() :L.Layer {
  return undefined;
}

private async _createGFSLayer(): Promise<L.Layer> {
	return undefined;
}

public async createLayer(item: IMenuItem): Promise<boolean> {
    if (this._layers[item.id]) {
        return;
    }
    let layer: L.Layer;
    if (item.id === "realtime_metar") {
        layer = await this._createMetarLayer();
    } else if (item.id === "realtime_sate") {
        layer = this._createCloudLayer();
    } else if (item.id.startsWith("gfs")) {
        layer = await this._createGFSLayer();
    }else{
    	//TODO other layers
    }
    if (layer) {
        this._layers[item.id] = layer;
        layer.addTo(map);
        return true;
    }
    return false;
}

这样，我们大致准备好了图层创建的逻辑。

图层的删除

图层的删除逻辑非常简单，只要判断当前图层已经加载，即可执行删除，记得把缓存也要删除。

public removeLayer(item: IMenuItem) {
    if (this._layers[item.id]) {
        this._layers[item.id].remove();
        delete this._layers[item.id];
    }
}

总结

本章有凑字数嫌疑。

完整效果和代码