js 设计模式学习（2）

昨天弄到3点 可能迷糊了 没有保存 缺了一部分过程 不过不重要 今天把完整的代码记录一下

新的设计模式 还需加油 “寒假”结束了 也算是给自己一个交代

var Map = function (container, lat, lng, zoom) {
            //判断执行过程中this是否是当前对象
            if (this instanceof Map) {

                //私有属性
                var zoomSize = { maxZoom: 18, minZoom: 5 },                                         //最大/小地图级别
                normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', zoomSize),               //矢量
                normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', zoomSize),          //矢量标注
                imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', zoomSize),               //影像
                imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', zoomSize),          //影像标注
                normal = L.layerGroup([normalm, normala]),                                          //矢量地图
                image = L.layerGroup([imgm, imga]);                                                 //影像地图

                //特权属性（公有属性）
                this.center = [lat, lng];                                                           //中心点

                //特权方法
                //通过闭包直接初始化地图
                (function () {
                    map = L.map(container, {
                        center: [lat, lng],
                        zoom: zoom,
                        layers: [normal]
                    });
                })();

                //底图切换
                this.createControl = function () {
                    var baseLayers = {
                        "地图": normal,
                        "影像": image,
                    }
                    var overlayLayers = {
                    }

                    L.control.layers(baseLayers, overlayLayers).addTo(map);
                }

            //否则重新创建对象
            } else {
                return new Map(container,lat, lng, zoom);
            }
        }

        Map.prototype = {
            //静态公有方法
            //图例
            addLegend:function(cnt){
                L.control.legend({ content: cnt }).addTo(map);
            },
            //添加标注
            addMarkers: function (data) {
                var i = 0,
                    len = data.length;
                markGroup = L.layerGroup();

                //遍历数据将标注添加到LayerGroup中
                for (; i < len; i++) {
                    var redMarker = L.ExtraMarkers.icon({
                        icon: data[i].icon,
                        markerColor: data[i].color,
                        shape: 'square',
                        prefix: 'fa'
                    });

                    var marker = L.marker(data[i].latlng, { icon: redMarker, }).addTo(markGroup);
                    marker.bindPopup(data[i].popContent).bindLabel(data[i].popContent, { noHide: true });
                }

                //叠加上地图
                markGroup.addTo(map);
            },
            //删除标注
            delMarkers: function () {
                if (markGroup) {
                    map.removeLayer(markGroup);
                }
            }
        }

        var iMap = new Map("map", 34.618129, 112.454059, 11);
        iMap.createControl();

        //数据
        var footmarkData = [
            { popContent: '老城十字街', latlng: [34.683570, 112.479280], color: 'red', icon: 'fa-coffee' },
            { popContent: '明堂', latlng: [34.68357587385, 112.45378017], color: 'red', icon: 'fa-picture-o' },
            { popContent: '龙门石窟、香山、白园', latlng: [34.5502, 112.47941], color: 'yellow', icon: 'fa-picture-o' },
            { popContent: '天子驾六博物馆', latlng: [34.673432, 112.431204], color: 'yellow', icon: 'fa-university' },
            { popContent: '少林寺、三皇寨', latlng: [34.529090, 112.931460], color: 'green-light', icon: 'fa-picture-o' },
            { popContent: '邙山、景陵、古墓博物馆', latlng: [34.732919, 112.4091696], color: 'cyan', icon: 'fa-university' },
            { popContent: '白马寺', latlng: [34.721460, 112.605650], color: 'cyan', icon: 'fa-picture-o' },
            { popContent: '黄河小浪底', latlng: [34.913640, 112.362160], color: 'blue', icon: 'fa-tree' },
            { popContent: '洛阳博物馆、隋唐植物园', latlng: [34.638398, 112.4417209], color: 'pink', icon: 'fa-university' }];

        //添加标注
        iMap.addMarkers(footmarkData);

        var legendDiv = "<h3>行程图例</h3>"+
                        "<ul>" +
                            "<li style='border-left: 45px solid red;'>第一天</li>" +
                            "<li style='border-left: 45px solid #EEAD0E;'>第二天</li>" +
                            "<li style='border-left: 45px solid #66CD00;'>第三天</li>" +
                            "<li style='border-left: 45px solid #4F94CD;'>第四天</li>" +
                            "<li style='border-left: 45px solid #104E8B;'>第五天</li>" +
                            "<li style='border-left: 45px solid #CD69C9;'>第六天</li>" +
                        "</ul>";
        iMap.addLegend(legendDiv);