js 设计模式学习（2）

1 var Map = function (container, lat, lng, zoom) {
2             //判断执行过程中this是否是当前对象
3             if (this instanceof Map) {
4
5                 //私有属性
6                 var zoomSize = { maxZoom: 18, minZoom: 5 },                                         //最大/小地图级别
7                 normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', zoomSize),               //矢量
8                 normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', zoomSize),          //矢量标注
9                 imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', zoomSize),               //影像
10                 imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', zoomSize),          //影像标注
11                 normal = L.layerGroup([normalm, normala]),                                          //矢量地图
12                 image = L.layerGroup([imgm, imga]);                                                 //影像地图
13
14                 //特权属性（公有属性）
15                 this.center = [lat, lng];                                                           //中心点
16
17                 //特权方法
18                 //通过闭包直接初始化地图
19                 (function () {
20                     map = L.map(container, {
21                         center: [lat, lng],
22                         zoom: zoom,
23                         layers: [normal]
24                     });
25                 })();
26
27                 //底图切换
28                 this.createControl = function () {
29                     var baseLayers = {
30                         "地图": normal,
31                         "影像": image,
32                     }
33                     var overlayLayers = {
34                     }
35
36                     L.control.layers(baseLayers, overlayLayers).addTo(map);
37                 }
38
39             //否则重新创建对象
40             } else {
41                 return new Map(container,lat, lng, zoom);
42             }
43         }
44
45         Map.prototype = {
46             //静态公有方法
47             //图例
48             addLegend:function(cnt){
49                 L.control.legend({ content: cnt }).addTo(map);
50             },
51             //添加标注
52             addMarkers: function (data) {
53                 var i = 0,
54                     len = data.length;
55                 markGroup = L.layerGroup();
56
57                 //遍历数据将标注添加到LayerGroup中
58                 for (; i < len; i++) {
59                     var redMarker = L.ExtraMarkers.icon({
60                         icon: data[i].icon,
61                         markerColor: data[i].color,
62                         shape: 'square',
63                         prefix: 'fa'
64                     });
65
66                     var marker = L.marker(data[i].latlng, { icon: redMarker, }).addTo(markGroup);
67                     marker.bindPopup(data[i].popContent).bindLabel(data[i].popContent, { noHide: true });
68                 }
69
70                 //叠加上地图
71                 markGroup.addTo(map);
72             },
73             //删除标注
74             delMarkers: function () {
75                 if (markGroup) {
76                     map.removeLayer(markGroup);
77                 }
78             }
79         }
80
81         var iMap = new Map("map", 34.618129, 112.454059, 11);
82         iMap.createControl();
83
84         //数据
85         var footmarkData = [
86             { popContent: '老城十字街', latlng: [34.683570, 112.479280], color: 'red', icon: 'fa-coffee' },
87             { popContent: '明堂', latlng: [34.68357587385, 112.45378017], color: 'red', icon: 'fa-picture-o' },
88             { popContent: '龙门石窟、香山、白园', latlng: [34.5502, 112.47941], color: 'yellow', icon: 'fa-picture-o' },
89             { popContent: '天子驾六博物馆', latlng: [34.673432, 112.431204], color: 'yellow', icon: 'fa-university' },
90             { popContent: '少林寺、三皇寨', latlng: [34.529090, 112.931460], color: 'green-light', icon: 'fa-picture-o' },
91             { popContent: '邙山、景陵、古墓博物馆', latlng: [34.732919, 112.4091696], color: 'cyan', icon: 'fa-university' },
92             { popContent: '白马寺', latlng: [34.721460, 112.605650], color: 'cyan', icon: 'fa-picture-o' },
93             { popContent: '黄河小浪底', latlng: [34.913640, 112.362160], color: 'blue', icon: 'fa-tree' },
94             { popContent: '洛阳博物馆、隋唐植物园', latlng: [34.638398, 112.4417209], color: 'pink', icon: 'fa-university' }];
95
96         //添加标注
97         iMap.addMarkers(footmarkData);
98
99         var legendDiv = "<h3>行程图例</h3>"+
100                         "<ul>" +
101                             "<li style='border-left: 45px solid red;'>第一天</li>" +
102                             "<li style='border-left: 45px solid #EEAD0E;'>第二天</li>" +
103                             "<li style='border-left: 45px solid #66CD00;'>第三天</li>" +
104                             "<li style='border-left: 45px solid #4F94CD;'>第四天</li>" +
105                             "<li style='border-left: 45px solid #104E8B;'>第五天</li>" +
106                             "<li style='border-left: 45px solid #CD69C9;'>第六天</li>" +
107                         "</ul>";
108         iMap.addLegend(legendDiv);