From a1f439001aa2fdfedb965ad7b6c41608d18ecef6 Mon Sep 17 00:00:00 2001 From: Dauren777 Date: Fri, 19 Jun 2026 06:09:19 +0000 Subject: [PATCH] v4: auto-detect streets & buildings from OSM, snap to road --- index.html | 381 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 218 insertions(+), 163 deletions(-) diff --git a/index.html b/index.html index 69c2012..334a71f 100644 --- a/index.html +++ b/index.html @@ -6,44 +6,47 @@ Планировщик опор ВЛ — РК @@ -51,15 +54,14 @@ body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;

⚡ Опоры ВЛ-0.4 кВ

- + - - - + + + - + -
@@ -68,20 +70,30 @@ body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif; - + +
+ Режим: ручная расстановка
+
+ 🔄 Автоопределение
+ Загрузка данных... +
+ +
- Опора ЖБ - Линия ВЛ - В Въезд + Опора + ВЛ + В Въезд + Улица (OSM) + Здание
📋 Спецификация0 шт
@@ -115,7 +127,6 @@ const REGIONS = [ {name:'Северо-Казахстанская',center:[54.5,69.0]}, {name:'Туркестанская',center:[43.0,68.0]}, {name:'Улытау',center:[48.0,67.0]}, - {name:'Ұлытау',center:[48.0,67.0]}, {name:'г.Алматы',center:[43.238,76.946]}, {name:'г.Астана',center:[51.16,71.44]}, {name:'г.Шымкент',center:[42.32,69.6]} @@ -124,18 +135,20 @@ const REGIONS = [ // ====================== ГЛОБАЛЬНЫЕ ====================== let map, markers=[], lines=[], entrances=[], entranceCircles=[]; let poleCount=0, linePoints=[], mode='manual'; +let roadsLayer=null, buildingsLayer=null; +let loadedRoads=[], loadedBuildings=0; // ====================== ИНИЦИАЛИЗАЦИЯ ====================== function init(){ - // заполняем регионы const sel=document.getElementById('regionSelect'); - REGIONS.forEach(r=>{ - const o=document.createElement('option');o.value=r.name;o.textContent=r.name;sel.appendChild(o); - }); + REGIONS.forEach(r=>{const o=document.createElement('option');o.value=r.name;o.textContent=r.name;sel.appendChild(o);}); const sat=L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',{maxZoom:20,attribution:'Esri'}); const osm=L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:20,opacity:0.45,attribution:'OSM'}); map=L.map('map',{zoomControl:true,layers:[sat,osm]}).setView([48.0,68.0],6); map.on('click',onMapClick); + map.on('moveend',()=>{if(map.getZoom()>10)autoLoadOSM();}); + roadsLayer=L.layerGroup().addTo(map); + buildingsLayer=L.layerGroup().addTo(map); updateModeBadge(); } @@ -146,59 +159,183 @@ function onRegionChange(){ if(r)map.setView(r.center,9); } function onDistrictChange(){ - const name=document.getElementById('districtSelect').value; - if(name)searchLocation(); + if(document.getElementById('districtSelect').value)searchLocation(); } function searchLocation(){ - const q=[ - document.getElementById('regionSelect').value, - document.getElementById('districtSelect').value, - document.getElementById('villageInput').value - ].filter(Boolean).join(', '); + const q=[document.getElementById('regionSelect').value,document.getElementById('districtSelect').value,document.getElementById('villageInput').value].filter(Boolean).join(', '); if(!q){showToast('Выберите регион или введите название');return;} fetch('https://nominatim.openstreetmap.org/search?format=json&q='+encodeURIComponent(q)+'&countrycodes=kz&limit=5') - .then(r=>r.json()) - .then(data=>{ - if(!data.length){showToast('Не найдено: '+q);return;} - const loc=data[0]; - map.setView([loc.lat,loc.lon],16); - showToast('📍 '+loc.display_name.split(',')[0]); + .then(r=>r.json()).then(data=>{ + if(!data.length){showToast('Не найдено');return;} + map.setView([data[0].lat,data[0].lon],16);showToast('📍 '+data[0].display_name.split(',')[0]); }); } +// ====================== АВТООПРЕДЕЛЕНИЕ УЛИЦ И ЗДАНИЙ (OSM) ====================== +function autoDetect(){ + document.getElementById('autoPanel').style.display='block'; + document.getElementById('autoStatus').textContent='⏳ Загрузка улиц и зданий...'; + autoLoadOSM(); +} + +function autoLoadOSM(){ + if(map.getZoom()<12){showToast('Приблизьтесь к селу (зум 13+)');return;} + const b=map.getBounds(); + const bbox=b.getSouth()+','+b.getWest()+','+b.getNorth()+','+b.getEast(); + document.getElementById('autoResults').innerHTML=''; + document.getElementById('autoPanel').style.display='block'; + document.getElementById('autoStatus').textContent='⏳ Загрузка...'; + + // Дороги + const qRoads='[out:json];(way["highway"]('+bbox+'););out geom;'; + fetch('https://overpass-api.de/api/interpreter?data='+encodeURIComponent(qRoads)) + .then(r=>r.json()).then(data=>{ + roadsLayer.clearLayers(); + loadedRoads=[]; + let roadCount=0, namedCount=0; + const colors={primary:'#7c3aed',secondary:'#7c3aed',tertiary:'#7c3aed',residential:'#7c3aed',service:'#7c3aed',unclassified:'#7c3aed',track:'#aaa'}; + (data.elements||[]).forEach(el=>{ + if(!el.geometry||el.geometry.length<2)return; + const coords=el.geometry.map(g=>[g.lat,g.lon]); + const type=el.tags&&el.tags.highway||'unclassified'; + const name=el.tags&&el.tags.name||el.tags&&el.tags['ref']||''; + const color=colors[type]||'#7c3aed'; + const weight=type==='track'?1.5:type==='service'?2:2.5; + const road=L.polyline(coords,{color,weight,opacity:0.7}).addTo(roadsLayer); + if(name){road.bindPopup('🛣 '+name);namedCount++;} + loadedRoads.push({coords,type,name,road}); + roadCount++; + }); + document.getElementById('autoStatus').textContent='✅ Улиц: '+roadCount+', здания: '+loadedBuildings; + let html=''+roadCount+' улиц'+namedCount+' с названиями'+loadedBuildings+' зданий'; + document.getElementById('autoResults').innerHTML=html; + if(roadCount+namedCount+loadedBuildings===0)document.getElementById('autoStatus').textContent='⚠ Данные не загружены — проверьте зум'; + if(roadCount===0)document.getElementById('autoStatus').textContent='⚠ Нет улиц в этом районе'; + }); + // Здания + const qBuild='[out:json];(way["building"]('+bbox+');rel["building"]('+bbox+'););out geom;'; + fetch('https://overpass-api.de/api/interpreter?data='+encodeURIComponent(qBuild)) + .then(r=>r.json()).then(data=>{ + buildingsLayer.clearLayers(); + loadedBuildings=0; + (data.elements||[]).forEach(el=>{ + if(!el.geometry||el.geometry.length<2)return; + const coords=el.geometry.map(g=>[g.lat,g.lon]); + const poly=L.polygon(coords,{color:'#ff6b35',weight:1,fillColor:'#ff6b35',fillOpacity:0.15}); + let info=[]; + if(el.tags){ + if(el.tags.building)info.push('🏠 '+el.tags.building); + if(el.tags['addr:housenumber'])info.push('№'+el.tags['addr:housenumber']); + if(el.tags['addr:street'])info.push(el.tags['addr:street']); + if(el.tags.name)info.push('📌 '+el.tags.name); + } + if(info.length)poly.bindPopup(info.join('
')); + poly.addTo(buildingsLayer); + loadedBuildings++; + }); + document.getElementById('autoStatus').textContent='✅ Улиц: '+loadedRoads.length+', здания: '+loadedBuildings; + let html=''+loadedRoads.length+' улиц'+loadedBuildings+' зданий'; + document.getElementById('autoResults').innerHTML=html; + }); +} + +// ====================== РАССТАВИТЬ ОПОРЫ ВДОЛЬ УЛИЦ ====================== +function applyRoadPoles(){ + if(!loadedRoads.length){showToast('Нет улиц. Нажмите "Авто" сначала');return;} + const step=parseFloat(document.getElementById('poleStep').value)||50; + const margin=parseFloat(document.getElementById('entranceMargin').value)||5; + let totalPoles=0; + loadedRoads.forEach(road=>{ + if(!road.name)return; // только именованные улицы + const pts=road.coords; + if(pts.length<2)return; + const len=pathLength2(pts); + const n=Math.max(1,Math.round(len/step)); + for(let i=0;i<=n;i++){ + const pt=pointOnPath2(pts,i/n); + if(!isNearEntrance(pt,margin)){ + addPole(L.latLng(pt.lat,pt.lng)); + totalPoles++; + } + } + }); + document.getElementById('autoPanel').style.display='none'; + showToast('✅ Расставлено '+totalPoles+' опор вдоль '+loadedRoads.length+' улиц'); +} +function pathLength2(pts){let t=0;for(let i=1;i=target||i===pts.length-1){ + const frac=(target-acc)/seg; + return{lat:pts[i-1][0]+(pts[i][0]-pts[i-1][0])*frac,lng:pts[i-1][1]+(pts[i][1]-pts[i-1][1])*frac}; + } + acc+=seg; + } + return{lat:pts[pts.length-1][0],lng:pts[pts.length-1][1]}; +} + // ====================== РЕЖИМЫ ====================== function setMode(newMode){ mode=newMode; ['btnLine','btnManual','btnEntrance'].forEach(id=>document.getElementById(id).className=''); - document.getElementById('btnLine').className='btn-line'; - document.getElementById('btnManual').className='btn-add'; - document.getElementById('btnEntrance').className='btn-driveway'; + document.getElementById('btnLine').className='btn-primary'; + document.getElementById('btnManual').className='btn-secondary'; + document.getElementById('btnEntrance').className='btn-warning'; const el=document.getElementById({line:'btnLine',manual:'btnManual',entrance:'btnEntrance'}[mode]); if(el)el.classList.add('btn-active'); if(mode==='line')linePoints=[]; document.getElementById('modeInfo').textContent={ - line:'📏 Линия: клик по улице → Enter для расстановки', + line:'📏 Линия: клик по улице, Enter = расставить', manual:'🎯 Клик для установки опоры', entrance:'🚗 Клик для отметки въезда'}[mode]; updateModeBadge(); } function updateModeBadge(){ const b=document.getElementById('modeBadge'); - const msgs={ + b.style.display='block'; + b.innerHTML={ manual:'🎯 Кликните для опоры', - line:'📏 Клик точки линии улицы · Enter = расставить', - entrance:'🚗 Клик на въезде во двор' - }; - b.style.display='block';b.innerHTML=msgs[mode]; + line:'📏 Клик точки линии · Enter = расставить', + entrance:'🚗 Клик на въезде' + }[mode]; } // ====================== КЛИК ====================== function onMapClick(e){ - if(mode==='manual'){addPole(e.latlng);return;} + if(mode==='manual'){ + const snap=document.getElementById('snapRoad').checked; + if(snap&&loadedRoads.length){const pt=snapToRoad(e.latlng);if(pt)addPole(pt);else addPole(e.latlng);} + else addPole(e.latlng); + return; + } if(mode==='entrance'){addEntrance(e.latlng);return;} if(mode==='line'){addLinePoint(e.latlng);return;} } +// ====================== ПРИВЯЗКА К ДОРОГЕ ====================== +function snapToRoad(latlng){ + let best=null,bestDist=Infinity; + loadedRoads.forEach(road=>{ + for(let i=1;i0?((px-ax)*dx+(py-ay)*dy)/len2:0; + t=Math.max(0,Math.min(1,t)); + const lat=ax+t*dx,lng=ay+t*dy; + return{lat,lng,dist:haversine(px,py,lat,lng)}; +} + // ====================== ОПОРЫ ====================== function addPole(latlng){ poleCount++; @@ -239,7 +376,6 @@ function finishLine(){ linePoints=[]; if(!poles.length){showToast('❌ Всё перекрыто въездами');setMode('manual');return;} poles.forEach(p=>addPole(L.latLng(p.lat,p.lng))); - showToast('✅ Расставлено '+poles.length+' опор, шаг ~'+step+' м'); setMode('manual'); } function pathLength(pts){let t=0;for(let i=1;i=target||i===pts.length-1){ - const frac=(target-acc)/seg; - return{lat:pts[i-1].lat+(pts[i].lat-pts[i-1].lat)*frac,lng:pts[i-1].lng+(pts[i].lng-pts[i-1].lng)*frac}; - } + if(acc+seg>=target||i===pts.length-1){const frac=(target-acc)/seg;return{lat:pts[i-1].lat+(pts[i].lat-pts[i-1].lat)*frac,lng:pts[i-1].lng+(pts[i].lng-pts[i-1].lng)*frac};} acc+=seg; } return pts[pts.length-1]; } -function isNearEntrance(pt,margin){ - for(const e of entrances)if(haversine(pt.lat,pt.lng,e.lat,e.lng)🚗 В
',iconSize:[26,18],iconAnchor:[13,9]}); - const marker=L.marker(latlng,{icon}).addTo(map).bindPopup('🚗 Въезд во двор'); + const marker=L.marker(latlng,{icon}).addTo(map).bindPopup('🚗 Въезд'); entrances.push({lat:latlng.lat,lng:latlng.lng,marker}); const circle=L.circle(latlng,{radius:5,color:'#FF9800',fillColor:'#FF9800',fillOpacity:0.15,dashArray:'3,3'}).addTo(map); entranceCircles.push(circle); showToast('🚗 Въезд отмечен'); } +function isNearEntrance(pt,margin){ + for(const e of entrances)if(haversine(pt.lat,pt.lng,e.lat,e.lng)x*Math.PI/180; const dLat=toRad(lat2-lat1),dLon=toRad(lon2-lon1); - const a=Math.sin(dLat/2)**2+Math.cos(toRad(lat1))*Math.cos(toRad(lat2))*Math.sin(dLon/2)**2; - return R*2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); + return R*2*Math.atan2(Math.sqrt(Math.sin(dLat/2)**2+Math.cos(toRad(lat1))*Math.cos(toRad(lat2))*Math.sin(dLon/2)**2),Math.sqrt(1-(Math.sin(dLat/2)**2+Math.cos(toRad(lat1))*Math.cos(toRad(lat2))*Math.sin(dLon/2)**2))); } // ====================== ТАБЛИЦА ====================== @@ -322,136 +454,59 @@ function clearAll(){ } document.addEventListener('keydown',e=>{if(e.key==='Enter'&&mode==='line')finishLine();}); -// ====================== ЭКСПОРТ В SVG (Visio/draw.io) ====================== +// ====================== ЭКСПОРТ ====================== function exportSVG(){ if(!markers.length){showToast('Нет опор');return;} const first=markers[0]; const step=parseFloat(document.getElementById('poleStep').value)||50; let svg=` - - + `; - // заголовок const date=new Date().toLocaleDateString('ru-RU'); svg+=`Схема расстановки опор ВЛ-0.4 кВ -Дата: ${date} | Шаг: ${step} м | Всего опор: ${markers.length} +Дата: ${date} | Шаг: ${step} м | ${markers.length} опор Центр: ${first.lat.toFixed(4)}, ${first.lng.toFixed(4)}`; - // сетка - svg+=``; - // конвертация geo → svg (простая проекция) const lats=markers.map(m=>m.lat),lngs=markers.map(m=>m.lng); const minLat=Math.min(...lats),maxLat=Math.max(...lats); const minLng=Math.min(...lngs),maxLng=Math.max(...lngs); const pad=60; const sx=x=>pad+(x-minLng)/(maxLng-minLng||1)*(760-2*pad); const sy=y=>560-pad-(y-minLat)/(maxLat-minLat||1)*(560-2*pad-85); - // линии - markers.forEach((p,i)=>{ - if(i===0)return; - const p1=markers[i-1]; - svg+=``; - }); - // опоры - markers.forEach(p=>{ - const x=sx(p.lng),y=sy(p.lat); - svg+=``; - svg+=`${p.id}`; - // подпись - svg+=`${p.name}`; - }); - // въезды - entrances.forEach(e=>{ - const x=sx(e.lng),y=sy(e.lat); - svg+=``; - svg+=`В`; - }); - // таблица расстояний - svg+=``; - let total=0; - markers.forEach((p,i)=>{ - if(i>0){const d=haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng);total+=d; - svg+=`${p.id}: ${d.toFixed(1)}м `;} - }); - svg+=`| Всего: ${total.toFixed(1)} м`; - svg+=``; + markers.forEach((p,i)=>{if(i>0){const p1=markers[i-1];svg+=``;}}); + markers.forEach(p=>{const x=sx(p.lng),y=sy(p.lat);svg+=`${p.id}${p.name}`;}); + entrances.forEach(e=>{const x=sx(e.lng),y=sy(e.lat);svg+=`В`;}); + let total=0;markers.forEach((p,i)=>{if(i>0)total+=haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng);}); + svg+=`Всего: ${total.toFixed(1)} м | ${markers.length} опор | ср.пролёт: ${markers.length>1?(total/(markers.length-1)).toFixed(1):0} м`; download(svg,'opory_vl04.svg','image/svg+xml'); - showToast('📥 SVG экспортирован (открывается в Visio)'); + showToast('📥 SVG (Visio/draw.io)'); } - -// ====================== ЭКСПОРТ В DRAW.IO ====================== function exportDrawIO(){ if(!markers.length){showToast('Нет опор');return;} - const first=markers[0]; - const step=parseFloat(document.getElementById('poleStep').value)||50; const date=new Date().toLocaleDateString('ru-RU'); - let mx=''; - mx+=``; - mx+=``; - // заголовок - mx+=``; - // масштаб + let mx=''; + mx+=``; const lats=markers.map(m=>m.lat),lngs=markers.map(m=>m.lng); const minLat=Math.min(...lats),maxLat=Math.max(...lats); const minLng=Math.min(...lngs),maxLng=Math.max(...lngs); const sx=x=>40+(x-minLng)/(maxLng-minLng||1)*700; - const sy=y=>560-(y-minLat)/(maxLat-minLat||1)*500; - let lineId=100; - // линии - markers.forEach((p,i)=>{ - if(i===0)return; - const p1=markers[i-1]; - const d=haversine(p1.lat,p1.lng,p.lat,p.lng).toFixed(1); - lineId++; - mx+=``; - }); - // опоры - markers.forEach(p=>{ - const x=sx(p.lng).toFixed(0),y=sy(p.lat).toFixed(0); - mx+=``; - mx+=``; - }); - // въезды - entrances.forEach((e,i)=>{ - const x=sx(e.lng).toFixed(0),y=sy(e.lat).toFixed(0); - mx+=``; - }); - // итого - let total=0; - markers.forEach((p,i)=>{if(i>0)total+=haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng);}); - mx+=``; + const sy=y=>560-(y-minLat)/(maxLat-minLat||1)*520; + let id=100; + markers.forEach((p,i)=>{if(i>0){const d=haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng).toFixed(1);id++;mx+=``;}}); + markers.forEach(p=>{const x=sx(p.lng).toFixed(0),y=sy(p.lat).toFixed(0);mx+=``;}); + entrances.forEach((e,i)=>{const x=sx(e.lng).toFixed(0),y=sy(e.lat).toFixed(0);mx+=``;}); + let total=0;markers.forEach((p,i)=>{if(i>0)total+=haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng);}); + mx+=``; mx+=``; download(mx,'opory_vl04.drawio','application/xml'); - showToast('📥 draw.io экспортирован'); + showToast('📥 draw.io'); } - -// ====================== CSV / JSON ====================== function exportCSV(){ if(!markers.length){showToast('Нет опор');return;} let csv='№,Название,Широта,Долгота,Расстояние_до_предыдущей_м\n'; - markers.forEach((p,i)=>{ - const dist=i>0?haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng).toFixed(1):''; - csv+=p.id+','+p.name+','+p.lat.toFixed(6)+','+p.lng.toFixed(6)+','+dist+'\n'; - }); + markers.forEach((p,i)=>{const d=i>0?haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng).toFixed(1):'';csv+=p.id+','+p.name+','+p.lat.toFixed(6)+','+p.lng.toFixed(6)+','+d+'\n';}); download(csv,'opory_vl04.csv','text/csv;charset=utf-8'); } -function exportJSON(){ - if(!markers.length){showToast('Нет опор');return;} - const data=markers.map((p,i)=>{ - const dist=i>0?haversine(markers[i-1].lat,markers[i-1].lng,p.lat,p.lng):0; - return{id:p.id,name:p.name,lat:parseFloat(p.lat.toFixed(6)),lng:parseFloat(p.lng.toFixed(6)),distance_m:parseFloat(dist.toFixed(1))}; - }); - download(JSON.stringify({poles:data,total_m:data.reduce((s,d)=>s+d.distance_m,0),average_span_m:data.length>1?(data.reduce((s,d)=>s+d.distance_m,0)/(data.length-1)):0},null,2),'opory_vl04.json','application/json'); -} function download(content,filename,type){ const blob=new Blob([content],{type:'application/octet-stream'}); const a=document.createElement('a');a.href=URL.createObjectURL(blob);