-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
322 lines (255 loc) · 18.8 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Crimea availible power</title>
<meta name="author" content="DefuZe">
<meta name="keywords" content="defuze, defu3e, defuzeru, defuzic yandex crimea availible power maps api osm openstreetmap reverse geocoder yandexmap map esosedi OSMeRegions voda">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="padding: 10px">
Выберите район, чтобы получить информацию о доступной мощности.
</div>
<br />
<div id="map" style="width: 820px; height: 520px; padding: 10px"></div>
<hr />
<!-- external scipts -->
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?load=package.map&lang=ru_RU" ></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="https://yastatic.net/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://kashey.ru/maps/regions.js?4"></script>
<script type="text/javascript">
ymaps.ready(init); // инициализация яндекс карты
/****************************************** Определение глобальных структур и переменных ********************************************/
/************************************************************************************************************************************/
var jsonData = 'availablePower.json'; // ссылка на файл с json данными
var saki_id = 1754561; // id Сакского района
var myMap; // ссылка на объект яндекс карты
var osmid_array = [ //********* Массив id районов Крыма ***********
"1754551", // [0] Алуштинский район
"1574582", // [1] Бахчисарайский район
"1754552", // [2] Белагорский район
"1754553", // [3] Джанкойский район
"1581042", // [4] Евпатория
"1754557", // [5] Ленинский район (Керчь)
"1754555", // [6] Красноперекопский район
"1754561", // [7] Сакский район
"1754564", // [8] Симферополь
"1754563", // [9] Судак
"1754565" // [10] Феодосия
];
/***************************************************************************************************************************************/
function init ()
{
/*********************************************** Подключение и конфигурация yandex карты ********************************************/
/************************************************************************************************************************************/
myMap = new ymaps.Map ("map",
{
controls: [ // добавление элементов управления
'typeSelector', // выбор схемы карты
'searchControl', // поле поиска по адресу
'zoomControl', // кнопки масштабирования карты
'fullscreenControl' // кнопка управления размером карты
],
type: 'yandex#hybrid', // тип схемы по умолчанию
center: [45.2, 34.5], // установка центра карты
zoom: 8, // установка масштаба карты
},
{
searchControlSize: 'small', // установка размера кнопки поиска
zoomControlSize: 'small', // установка размера кнопок масштабирования
maxZoom: 20, // установка максимального масштабирования карты
minZoom: 8 // установка минимального масштабирвоания карты
}
); // end ymap()
myMap.behaviors.disable('scrollZoom'); // отключение скролла (масштабирование колесом мыши)
/************************************************************************************************************************************/
var geoMap = myMap, // копия ссылки на объект яндекс.карты
collection = 0, // коллекция для esosedi regions (osme)
lastRegion = 0; // коллекция последнего выделенного региона
/***********************************************************************************************************************************/
/************************************* Создание коллекции Крыма (без Сакского района) **********************************************/
/***********************************************************************************************************************************/
osmeRegions.geoJSON (
'RU-CR', // osm id Крыма
{
lang: 'ru', // язык надписей
quality: 0, // качество отображения
scheme: { // отображение только тех районов
72639:function (region){ // которые являются дочерними
return region.hasParent('RU-CR'); // для Крыма
}
}
},
function (data) {
var collection = osmeRegions.toYandex(data, ymaps); // добавление коллекции
collection.add(geoMap); // на карту
setMouseClickEvent (collection); // добавление события нажатия ЛКМ
setMouseMovEvent (collection); // добавление события перемещения курсора
setCollectionStyle (collection, data); // установка стился коллекции
});
/*********************************************** Создание коллекции Сакского района *************************************************/
/************************************************************************************************************************************/
osmeRegions.geoJSON(saki_id,
{
lang: 'ru',
quality:0,
},
function (data, pure) {
var collection = osmeRegions.toYandex(data, ymaps);
collection.add(geoMap);
setMouseClickEvent (collection);
/******************* Добавление события перемещения курсора *******************/
collection.addEvent('mouseenter', function (object, type, target, event) {
collection.setStyles(function (object, yobject) {
var level = object.properties.level;
return ({
zIndex: level,
zIndexHover: level,
strokeWidth: Math.max(1, level == 3 ? 5 : 2),
strokeColor: '#0C68F3',
strokeStyle: 'solid',
fillColor: '#FFF7',
});
});
});
collection.addEvent('mouseleave', function (object, type, target, event) {
setCollectionStyle (collection, data);
});
/*******************************************************************************/
setCollectionStyle (collection, data);
}
);
function setCollectionStyle(collection, data)
{
var meta = data.metaData,
maxLevel = meta.levels[1] + 1;
collection.setStyles(function (object, yobject) {
var level = object.properties.level;
return ({
strokeWidth: Math.max(1, level == 3 ? 5 : 2),
strokeColor: '#0C68F3',
fillColor: '#FFE1',
});
});
}
/*********************************************** Изменение стиля для региона oid **************************************************/
/**********************************************************************************************************************************/
function loadRegion (oid, targetOid) {
oid = oid || targetOid;
lastRegion = oid;
osmeRegions.geoJSON
(
oid, {lang: 'ru', quality: 0},
function (data, pure) {
if (collection)
var lastCollection = collection;
collection = osmeRegions.toYandex(data, ymaps);
/************************* применение стиля для района *************************/
collection.setStyles(
function (object, yobject) {
var level = object.properties.level;
return ({
zIndex: level, // отображение района поверх карты
zIndexHover: level, // оверлей при наведении на район
strokeWidth: level / 2, // ширина контура
strokeColor: '#4445', // цвет контура
fillColor: '#FFF5', // цвет заполнения района (с прозрачностью)
}); // end return
} // end function ()
); // end setStyles()
/******************************************************************************/
collection.add(myMap); // добавление коллекции на яндекс карту
if (lastCollection) // удаление стиля предыдущего района
lastCollection.remove(myMap);
}
); // end osmeRegions.geoJSON
} // end loadRegion()
/*********************************************************************************************************************************/
/********************************************** Установка события перемещения курсора мыши ***************************************/
/*********************************************************************************************************************************/
function setMouseMovEvent (collection) {
var osmId_current, // id текущего района
osmId_last = 0; // id последнего района
collection.addEvent('mousemove',
function (object, type, target, event) {
collection.removeEvent(event); // удаление события
var coords = event.get('coords'); // определение текущих коордирант
var osmId = object.properties.osmId; // получение текущего id района
osmId_current = osmId; // запись текущего id района
if (osmId_current != osmId_last) { // если было перемещение курсора между районами
if (osmId_last != 0) // и id последнего района не равен нулю
loadRegion (osmId_current, target.ll); // перекрасить районы
osmId_last = osmId_current; // послений район становится текущим
}
collection.addEvent(event); // добавить событие к коллекции
});
} // end setMouseClickEvent()
/*********************************************************************************************************************************/
/************************************************ Установка события нажатия кнопкой мыши *****************************************/
/*********************************************************************************************************************************/
function setMouseClickEvent (collection) {
collection.addEvent('click',
function (object, type, target, event) {
var osmId = object.properties.osmId; // получение текущего id района
var coords = event.get('coords'); // определение текущих коордирант
$.getJSON( jsonData, function(data) {
var jsonDataIndex = osmid_array.indexOf(osmId); // получение индекса района
var out = createBallonText(data, jsonDataIndex); // формирования данных баллуна
myMap.balloon.open(coords, out);
})
event.preventDefault();
}
);
}
/*********************************************************************************************************************************/
/*************************************************** Формирование содержимого баллуна *********************************************/
/**********************************************************************************************************************************/
function createBallonText (data, jsonDataIndex) {
if (jsonDataIndex < 0) // если района нет в базе
return "Услуги ГУП РК \"Вода Крыма\" в данном районе не предоставляются."; // выдать сообщение
console.log (data[jsonDataIndex]);
/********************************** Определение размерностей массивов json данных **********************************/
var sourcePowerNumber = data[jsonDataIndex]["Мощность источника водоснабжения"].length;
var destinationPowerNumber = data[jsonDataIndex]["Мощность водоотведения"].length;
var citiesVodaCrimeaWorkNumber = 2;
/******************************************************************************************************************/
var j = 0; // переменная для цикла
/*************************************** CSS стиль для содержимого баллуна ****************************************/
var out = "<style>table {width: 100%} border-collapse: collapse; td {text-align: center; padding-left: 3px;}" +
"th {padding: 8px; text-align: center; background-color: #428BEA; color: white;}" +
"tr:nth-child(even){background-color: #f2f2f2} #pwr {text-align:center} </style> ";
/*****************************************************************************************************************/
/******************************************** Создание данных баллуна ********************************************/
out += "<b><big>" + data[jsonDataIndex]["Наименование филиала"] + "</big></b><p><hr />";
out += "<table>";
out += "<caption><strong>Мощность источника водоснабжения</strong></caption>";
out += "<tr><th width=50%>Наименование</th><th>Вид источника</th><th>Мощность (м3/сут)</th></tr>";
for (j = 0; j < sourcePowerNumber; j++ ) {
out += "<tr><td>" + data[jsonDataIndex]["Мощность источника водоснабжения"][j]["Наименование"] + "</td>" +
"<td> " + data[jsonDataIndex]["Мощность источника водоснабжения"][j]["Вид источника"] + "</td>" +
"<td id='pwr'>" + data[jsonDataIndex]["Мощность источника водоснабжения"][j]["м3/сут"] + "</td></tr>";
}
out += "</table><br /><hr />";
out += "<table>";
out += "<caption><strong>Мощность водоотведения </strong></caption>";
out += "<tr><th>Наименование</th><th>Мощность (м3/сут)</th></tr>";
for (j = 0; j < destinationPowerNumber; j++ ) {
out += "<tr><td>" + data[jsonDataIndex]["Мощность водоотведения"][j]["Наименование"] + "</td>" +
"<td id='pwr'>" + data[jsonDataIndex]["Мощность водоотведения"][j]["м3/сут"] + "<td>";
}
out += "</table><br /><hr />";
out +="<center><strong>Населенные пункты, в которых предоставляются услуги ГУП РК «Вода Крыма»</strong></center>";
out += "<p style=\"color:#428BEA\"><b>Водоснабжение: </b></p>" +
data[jsonDataIndex]["Населенные пункты, в которых предоставляются услуги ГУП РК Вода Крыма"]["Водоснабжение"] +
"<p style=\"color:#428BEA\"><b>Водоотведение: </b><p>" +
data[jsonDataIndex]["Населенные пункты, в которых предоставляются услуги ГУП РК Вода Крыма"]["Водоотведение"] +"<hr />";
out += "</div>";
/*****************************************************************************************************************/
return out;
} // end createBallonText()
} // end init()
</script>
</body>
</html>