forked from trippal/newBeginning
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (118 loc) · 5.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Новое</title>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="libs/leaflet/leaflet.css">
<link rel="stylesheet" href="style.css"/>
<script>
// Глобальная переменная для карты
var map, control;
//Инициализируем пустой массив слоев
var layers = new Array();
// Вызываем загрузку конфигурационного файла карты
loadJSON('mapconfig.json',
function (data) {
var mps = data.mapproperties;
varmap(mps, 0, mps.length);
}
);
// Получаем параметры и рисуем карту
/**@param alldata - массив данных, полученных из файла настроек
* @param i - индекс нужного конфига в массиве
* @param l - длина массива (не знаю зачем)*/
function varmap(alldata, i, l) {
var d = alldata[i];
var center = d.center;
var zoom = d.zoom;
var minZoom = d.minZoom;
var maxZoom = d.maxZoom;
//Вносим параметры карты
map = L.map('map', {
center: center,
zoom: zoom,
minZoom: minZoom,
maxZoom: maxZoom
});
//Получаем конфиг для слоев и вызываем функцию загрузки слоев
loadJSON('layersconfig.json', function (data) {
loadLayers(data);
});
}
/**
* Пробегаем по массиву с настройками для слоя
* В зависимости от типа слоя нужным видом инициализируем слой и отрисовываем его
* @param data - массив данных, полученных из файла настроек слоев*/
function loadLayers(data) {
control = L.control.layers({}, {});
control.addTo(map);
var layersJSON = data.layers;
$.each(layersJSON, function (key, value) {
switch (value.layertypefunction) {
case "ltilelayer":
//Добавляем в массив слоев новый слой по индексу value.layercodename
layers[value.layercodename] = L.tileLayer(value.pathto, {});
//Отрисовываем слой
layers[value.layercodename];
loadLayerControl(value);
break;
case "casual":
loadJSON(value.pathto, function (data) {
var points = data.points;
//Добавляем в массив слоев новый слой по индексу value.layercodename
layers[value.layercodename] = L.polyline(points, {
color: value.color,
width: value.width
});
loadLayerControl(value);
});
break;
default:
alert("Not match layerType!");
break;
}
});
};
function loadLayerControl(layer) {
switch (layer.layertype) {
case "basemap":
//Добавляем слой из array в контрол
control.addBaseLayer(layers[layer.layercodename], layer.layername);
break;
case "overlay":
//Добавляем слой из array в контрол
control.addOverlay(layers[layer.layercodename], layer.layername);
break;
default:
alert("Not match layerType!");
break;
}
}
/**
* @param path - путь до файла конфига
* @param success - функция (callback), которая вызовется при успешной загрузке файла
* @param error - функция (callback), которая вызовется при ошибке загрузки*/
function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (success)
success(JSON.parse(xhr.responseText));
} else {
if (error)
error(xhr);
}
}
};
xhr.open("GET", path, true);
xhr.send();
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>