добавил карту этажности

CupIvan · Jul 3, 2019 · d265af4 · d265af4
1 parent a67e970
commit d265af4
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -29,6 +29,12 @@ <h3>Валидатор подъездов</h3>
 		<br><small>На данной карте можно посмотреть в каких подъездах не проставлены номера квартир, а также этажность и адрес на здании.</small>
 	</div>
 
+	<div>
+		<h3>Этажность зданий</h3>
+		<a href="/levels/"><img src="/levels/screenshot.png"></a>
+		<br><small>Раскраска зданий по количеству  этажей.<br>Удобно смотреть где ещё не указаны этажи.</small>
+	</div>
+
 	<div>
 		<h3>Архитектурные стили</h3>
 		<a href="/arch/"><img src="/arch/screenshot.png"></a>

diff --git a/levels/favicon.ico b/levels/favicon.ico
diff --git a/levels/index.html b/levels/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+
+	<title>Этажность зданий на карте OSM</title>
+
+	<link rel="icon" href="./favicon.ico" type="image/x-icon">
+
+	<script src="/i/ok.js"></script>
+	<script src="/i/lib.js"></script>
+	<script src="/i/josm.js"></script>
+	<script src="/i/ajax.js"></script>
+	<script src="/i/osm.js"></script>
+	<script src="/i/map.js"></script>
+	<script src="/i/common.js"></script>
+
+	<style>
+		#map  { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
+		#info { position: absolute; left: 50%; margin-left: -300px; width: 600px; text-align: center;
+			padding: 10px 20px; background: #DDD; border: 2px solid #000; opacity: 0.9; z-index: 999; }
+		.ref  { font-weight: bold; box-shadow: none; border: 0; background: none; }
+	</style>
+</head>
+
+<body>
+
+<div id="info"></div>
+<div id="map"></div>
+
+<script>
+var lines = {}
+osm.search_region = 200
+var map = map.init()
+
+function getBuildingColor(a)
+{
+	var x
+	c = '#777'
+	if (a.tags)
+	{
+		if (a.tags['building'] == 'apartments') c = 'yellow'
+		var n = parseInt(a.tags['building:levels'])
+		if (n == 1) c = '#030'
+		if (n >= 2) c = '#090'
+		if (n >= 5) c = '#009'
+		if (n >=10) c = '#99F'
+		if (n >=14) c = '#900'
+		if (n >=20) c = '#F00'
+	}
+	return c
+}
+
+/** содержимое popup на здании */
+function make_popup(a)
+{
+	var x, st = ''
+	if (a.tags['building'] == 'apartments') st += '<b>Многоэтажный жилой дом</b><br><br>'
+	if (a.tags['building'] == 'yes')        st += '<b>Здание</b><br><br>'
+
+
+	if (a.tags['building:levels'])
+		st += 'Этажей: <i>'+a.tags['building:levels']+'</i><br>'
+
+	if (a.tags['addr:street'])
+		st += 'Адрес: <i>'+a.tags['addr:street']+', д. '+a.tags['addr:housenumber']+'</i><br>'
+
+	st += osm.editLinks(a)
+
+	return st;
+}
+
+/** основная функция для загрузки и отрисовки геометрии */
+function draw()
+{
+	if (map.getZoom() >= 16)
+	{
+		osm.search({'building':true, bounds: map.getBounds().toBBoxString().split(','), way: true, relation: true}, function(data){
+			if (!data.length) return $('info', 'Нет данных')
+			$('info', 'Данные загружены')
+			var i, a
+			for (a=data[i=0]; i<data.length; a=data[++i])
+			{
+				c = getBuildingColor(a)
+				if (!lines[a.id])
+				lines[a.id] = L.geoJSON(a.geoJSON, {style: {color: c, weight: 2, fillColor: c }})
+					.addTo(map)
+					.bindPopup('', { data: data[i] })
+			}
+		})
+
+		msg = 'Загрузка...'
+	} else
+		msg = 'Для отображения данных необходимо увеличить масштаб карты.<br>'
+			+' <a href="https://forum.openstreetmap.org/viewtopic.php?pid=635464">Отзывы</a> и'
+			+' <a href="https://wiki.openstreetmap.org/wiki/RU:Key:building:levels">Справка по разметке</a>';
+
+	$('info', msg)
+}
+
+map.on('moveend', draw)
+draw()
+
+</script>
+
+<!-- Yandex.Metrika counter -->
+<script type="text/javascript">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter13902487 = new Ya.Metrika({id:13902487, enableAll: true, trackHash:true, webvisor:true}); } catch(e) {} }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script>
+<noscript><div><img src="//mc.yandex.ru/watch/13902487" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
+<!-- /Yandex.Metrika counter -->
+
+</body>
+</html>
diff --git a/levels/screenshot.png b/levels/screenshot.png