diff --git a/static/js/weather-app.js b/static/js/weather-app.js index 3933262..d9f6ec7 100644 --- a/static/js/weather-app.js +++ b/static/js/weather-app.js @@ -15,6 +15,7 @@ const WeatherMap = { kmlLastExtent: null, kmlFitButton: null, _kmlControlsBound: false, + kmlPopupEl: null, // 初始化地图 init(tiandituKey) { @@ -96,6 +97,9 @@ const WeatherMap = { const initialZoom = this.map.getView().getZoom(); this.updateClusterDistance(initialZoom); this.updateLayerVisibility(initialZoom); + + // 取KML信息弹层元素 + this.kmlPopupEl = document.getElementById('kmlInfoPopup'); }, createTileOverlayLayer(){ @@ -691,16 +695,27 @@ const WeatherMap = { // 处理地图点击 handleMapClick(event) { - const feature = this.map.forEachFeatureAtPixel(event.pixel, feature => feature); - - if (!feature) return; + const hit = this.map.forEachFeatureAtPixel(event.pixel, (f, layer) => ({ f, layer })); + if (!hit) { this.hideKmlPopup(); return; } + const feature = hit.f; + const layer = hit.layer; const features = feature.get('features'); if (features && features.length > 1) { + this.hideKmlPopup(); this.handleClusterClick(features); - } else { - this.handleStationClick(features ? features[0] : feature); + return; } + + // 如果命中KML图层要素，则展示其信息 + if (layer && this.activeKmlLayer && layer === this.activeKmlLayer) { + this.handleKmlFeatureClick(feature, event.coordinate, event.pixel); + return; + } + + // 否则按站点要素处理 + this.hideKmlPopup(); + this.handleStationClick(features ? features[0] : feature); }, // 处理集群点击 @@ -968,6 +983,90 @@ const WeatherMap = { } this.updateClusterDistance(this.map.getView().getZoom()); + }, + + // —— KML 要素点击展示 —— + handleKmlFeatureClick(feature, coordinate, pixel) { + if (!this.kmlPopupEl) return; + const html = this.buildKmlInfoHtml(feature); + this.showKmlPopup(html, pixel); + }, + + buildKmlInfoHtml(feature) { + const props = feature.getProperties ? feature.getProperties() : {}; + const name = feature.get && (feature.get('name') || feature.get('Name')) || ''; + const description = feature.get && (feature.get('description') || feature.get('Description')) || ''; + + // 复制并剔除不需要的字段 + const displayProps = {}; + Object.keys(props || {}).forEach(k => { + if (k === 'geometry' || k === 'name' || k === 'Name' || k === 'description' || k === 'Description' || k === 'styleUrl' || k === 'Style') return; + displayProps[k] = props[k]; + }); + + let html = ''; + if (name) { + html += `
${this._escapeHtml(String(name))}
`; + } + if (description) { + // KML description 通常为HTML，直接插入 + html += `
${description}
`; + } + const keys = Object.keys(displayProps); + if (keys.length > 0) { + html += `
`; + keys.forEach(k => { + const v = displayProps[k]; + const val = (v != null && typeof v === 'object') ? this._escapeHtml(JSON.stringify(v)) : this._escapeHtml(String(v)); + html += ``; + }); + html += `
${this._escapeHtml(k)}${val}
`; + } + if (!name && !description && keys.length === 0) { + html = `
该要素无可显示属性
`; + } + return html; + }, + + showKmlPopup(html, pixel) { + const el = this.kmlPopupEl; + if (!el) return; + el.innerHTML = html; + el.style.display = 'block'; + + const container = document.getElementById('mapContainer') || this.map.getTargetElement(); + const cw = container.clientWidth; + const ch = container.clientHeight; + + // 初步位置 + const offsetX = 12, offsetY = 12; + let left = pixel[0] + offsetX; + let top = pixel[1] + offsetY; + + // 尺寸与边界校正 + const rect = el.getBoundingClientRect(); + const pw = rect.width || 240; + const ph = rect.height || 120; + if (left + pw > cw - 8) left = Math.max(8, cw - pw - 8); + if (top + ph > ch - 8) top = Math.max(8, ch - ph - 8); + + el.style.left = `${left}px`; + el.style.top = `${top}px`; + }, + + hideKmlPopup() { + const el = this.kmlPopupEl; + if (!el) return; + el.style.display = 'none'; + }, + + _escapeHtml(str) { + return str + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); } }; diff --git a/static/kml/selected_polygons.kml b/static/kml/selected_polygons.kml index 2983831..1f042e4 100644 --- a/static/kml/selected_polygons.kml +++ b/static/kml/selected_polygons.kml @@ -1,7 +1,956 @@ - 示范社区典型防控区及社区边界 + 示范社区典型防控区及社区边界与滑坡线 + + 地质灾害线 + + 蒋家淌滑坡 + <![CDATA[<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> + +<head> + +<META http-equiv="Content-Type" content="text/html"> + +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +</head> + +<body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"> + +<tr style="text-align:center;font-weight:bold;background:#9CBCE2"> + +<td>滑坡</td> + +</tr> + +<tr> + +<td> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"> + +<tr> + +<td>FID</td> + +<td>0</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>分类</td> + +<td>滑坡</td> + +</tr> + +<tr> + +<td>台账名</td> + +<td>蒋家淌滑坡</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>乡镇</td> + +<td>昭君镇</td> + +</tr> + +<tr> + +<td>村名</td> + +<td>大礼村</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>颜色</td> + +<td>红色</td> + +</tr> + +<tr> + +<td>备注</td> + +<td></td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>风险等</td> + +<td>高风险</td> + +</tr> + +<tr> + +<td>防治措</td> + +<td>专业监测</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>防治建</td> + +<td>专业监测 + +（已</td> + +</tr> + +<tr> + +<td>稳定性</td> + +<td>基本稳定</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>稳定_1</td> + +<td>不稳定</td> + +</tr> + +<tr> + +<td>编号</td> + +<td>ZJ-DL-HP03</td> + +</tr> + +</table> + +</td> + +</tr> + +</table> + +</body> + +</html> + +]]> + + CGCS2000 + + 110.7269908783,31.2108979984,0 110.7272269118,31.2112198630,0 110.7273342005,31.2116275586,0 110.7274307604,31.2121210858,0 110.7274200306,31.2124751371,0 110.7273341995,31.2128077311,0 110.7270445215,31.2129257482,0 110.7265724529,31.2129042908,0 110.7260681976,31.2126682562,0 110.7257248746,31.2125180528,0 110.7250275008,31.2121640007,0 110.7247807371,31.2120352551,0 + + + + 蒋家院子滑坡 + <![CDATA[<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> + +<head> + +<META http-equiv="Content-Type" content="text/html"> + +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +</head> + +<body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"> + +<tr style="text-align:center;font-weight:bold;background:#9CBCE2"> + +<td>滑坡</td> + +</tr> + +<tr> + +<td> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"> + +<tr> + +<td>FID</td> + +<td>1</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>分类</td> + +<td>滑坡</td> + +</tr> + +<tr> + +<td>台账名</td> + +<td>蒋家院子滑坡</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>乡镇</td> + +<td>昭君镇</td> + +</tr> + +<tr> + +<td>村名</td> + +<td>大礼村</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>颜色</td> + +<td>黄色</td> + +</tr> + +<tr> + +<td>备注</td> + +<td></td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>风险等</td> + +<td>中风险</td> + +</tr> + +<tr> + +<td>防治措</td> + +<td>群测群防</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>防治建</td> + +<td>搬迁避让</td> + +</tr> + +<tr> + +<td>稳定性</td> + +<td>不稳定</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>稳定_1</td> + +<td>不稳定</td> + +</tr> + +<tr> + +<td>编号</td> + +<td>ZJ-DL-HP04</td> + +</tr> + +</table> + +</td> + +</tr> + +</table> + +</body> + +</html> + +]]> + + CGCS2000 + + 110.7288416016,31.2093047651,0 110.7291849253,31.2100128691,0 110.7293351280,31.2104312927,0 110.7296355357,31.2112144979,0 110.7298179255,31.2120191612,0 110.7297280218,31.2124489282,0 110.7296723891,31.2124846070,0 110.7294915403,31.2126154762,0 110.7291580506,31.2127221607,0 110.7289635564,31.2127694783,0 110.7288386458,31.2127572826,0 110.7285411945,31.2126843486,0 110.7281227705,31.2123088388,0 110.7276077860,31.2115256342,0 110.7272215476,31.2110106496,0 110.7270069709,31.2108175310,0 + + + + 老屋场滑坡 + <![CDATA[<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> + +<head> + +<META http-equiv="Content-Type" content="text/html"> + +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +</head> + +<body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"> + +<tr style="text-align:center;font-weight:bold;background:#9CBCE2"> + +<td>滑坡</td> + +</tr> + +<tr> + +<td> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"> + +<tr> + +<td>FID</td> + +<td>2</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>分类</td> + +<td>滑坡</td> + +</tr> + +<tr> + +<td>台账名</td> + +<td>老屋场滑坡</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>乡镇</td> + +<td>昭君镇</td> + +</tr> + +<tr> + +<td>村名</td> + +<td>大礼村</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>颜色</td> + +<td>黄色</td> + +</tr> + +<tr> + +<td>备注</td> + +<td></td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>风险等</td> + +<td>中风险</td> + +</tr> + +<tr> + +<td>防治措</td> + +<td>群测群防</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>防治建</td> + +<td>专业监测 + +（拟</td> + +</tr> + +<tr> + +<td>稳定性</td> + +<td>基本稳定</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>稳定_1</td> + +<td>基本稳定</td> + +</tr> + +<tr> + +<td>编号</td> + +<td>ZJ-DL-HP05</td> + +</tr> + +</table> + +</td> + +</tr> + +</table> + +</body> + +</html> + +]]> + + CGCS2000 + + 110.7260521042,31.2159673726,0 110.7264867915,31.2166539909,0 110.7267630021,31.2171604837,0 110.7270051823,31.2179150850,0 110.7269148739,31.2184208000,0 110.7266143036,31.2186587968,0 110.7261919401,31.2187628979,0 110.7258144997,31.2186952756,0 110.7256038552,31.2185611907,0 110.7255478492,31.2184028193,0 110.7254620178,31.2183169883,0 110.7253010857,31.2181560559,0 110.7250221360,31.2177161731,0 110.7247753730,31.2172333763,0 110.7246573561,31.2167291210,0 110.7245393375,31.2163214248,0 + + + + 团堡（烂泥湖）滑坡 + <![CDATA[<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> + +<head> + +<META http-equiv="Content-Type" content="text/html"> + +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +</head> + +<body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"> + +<tr style="text-align:center;font-weight:bold;background:#9CBCE2"> + +<td>滑坡</td> + +</tr> + +<tr> + +<td> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"> + +<tr> + +<td>FID</td> + +<td>3</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>分类</td> + +<td>滑坡</td> + +</tr> + +<tr> + +<td>台账名</td> + +<td>团堡（烂泥湖）滑坡</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>乡镇</td> + +<td>昭君镇</td> + +</tr> + +<tr> + +<td>村名</td> + +<td>大礼村</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>颜色</td> + +<td>黄色</td> + +</tr> + +<tr> + +<td>备注</td> + +<td></td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>风险等</td> + +<td>中风险</td> + +</tr> + +<tr> + +<td>防治措</td> + +<td>专业监测</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>防治建</td> + +<td>专业监测 + +（已</td> + +</tr> + +<tr> + +<td>稳定性</td> + +<td>基本稳定</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>稳定_1</td> + +<td>不稳定</td> + +</tr> + +<tr> + +<td>编号</td> + +<td>ZJ-DL-HP06</td> + +</tr> + +</table> + +</td> + +</tr> + +</table> + +</body> + +</html> + +]]> + + CGCS2000 + + 110.7295759610,31.2073418103,0 110.7297421714,31.2074734090,0 110.7299630279,31.2079153484,0 110.7305158712,31.2087755956,0 110.7309306460,31.2093730529,0 110.7308189130,31.2096114538,0 110.7304571625,31.2098970593,0 110.7299158885,31.2098481968,0 110.7293892117,31.2095487955,0 110.7291397050,31.2094170210,0 110.7289040820,31.2092852753,0 110.7286806685,31.2090794598,0 110.7285197366,31.2089399853,0 + + + + 长模屋不稳定斜坡 + <![CDATA[<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> + +<head> + +<META http-equiv="Content-Type" content="text/html"> + +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +</head> + +<body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"> + +<tr style="text-align:center;font-weight:bold;background:#9CBCE2"> + +<td>不稳定斜坡</td> + +</tr> + +<tr> + +<td> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"> + +<tr> + +<td>FID</td> + +<td>4</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>分类</td> + +<td>不稳定斜坡</td> + +</tr> + +<tr> + +<td>台账名</td> + +<td>长模屋不稳定斜坡</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>乡镇</td> + +<td>昭君镇</td> + +</tr> + +<tr> + +<td>村名</td> + +<td>大礼村</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>颜色</td> + +<td>黄色</td> + +</tr> + +<tr> + +<td>备注</td> + +<td></td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>风险等</td> + +<td>中风险</td> + +</tr> + +<tr> + +<td>防治措</td> + +<td>专业监测</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>防治建</td> + +<td>专业监测 + +（已</td> + +</tr> + +<tr> + +<td>稳定性</td> + +<td>基本稳定</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>稳定_1</td> + +<td>基本稳定</td> + +</tr> + +<tr> + +<td>编号</td> + +<td>ZJ-DL-HP07</td> + +</tr> + +</table> + +</td> + +</tr> + +</table> + +</body> + +</html> + +]]> + + CGCS2000 + + 110.7272122065,31.2142171536,0 110.7277379200,31.2147428668,0 110.7283489563,31.2153177056,0 110.7286171780,31.2158434176,0 110.7288696039,31.2165039221,0 110.7287295789,31.2169212387,0 110.7284996678,31.2171997700,0 110.7282850910,31.2172963299,0 110.7279928073,31.2172537717,0 110.7276738657,31.2171218476,0 110.7273135838,31.2168824491,0 110.7268424440,31.2165712237,0 110.7264547771,31.2162005153,0 110.7261227503,31.2157941295,0 110.7259032889,31.2155367996,0 + + + + 土地湾滑坡 + <![CDATA[<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> + +<head> + +<META http-equiv="Content-Type" content="text/html"> + +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +</head> + +<body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"> + +<tr style="text-align:center;font-weight:bold;background:#9CBCE2"> + +<td>滑坡</td> + +</tr> + +<tr> + +<td> + +<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"> + +<tr> + +<td>FID</td> + +<td>5</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>分类</td> + +<td>滑坡</td> + +</tr> + +<tr> + +<td>台账名</td> + +<td>土地湾滑坡</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>乡镇</td> + +<td>昭君镇</td> + +</tr> + +<tr> + +<td>村名</td> + +<td>大礼村</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>颜色</td> + +<td>红色</td> + +</tr> + +<tr> + +<td>备注</td> + +<td></td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>风险等</td> + +<td>高风险</td> + +</tr> + +<tr> + +<td>防治措</td> + +<td>群测群防</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>防治建</td> + +<td>专业监测 + +（拟</td> + +</tr> + +<tr> + +<td>稳定性</td> + +<td>基本稳定</td> + +</tr> + +<tr bgcolor="#D4E4F3"> + +<td>稳定_1</td> + +<td>不稳定</td> + +</tr> + +<tr> + +<td>编号</td> + +<td>ZJ-DL-HP09</td> + +</tr> + +</table> + +</td> + +</tr> + +</table> + +</body> + +</html> + +]]> + + CGCS2000 + + 110.7301345150,31.2110776283,0 110.7309646930,31.2120577724,0 110.7318647723,31.2128710119,0 110.7320402347,31.2146492110,0 110.7316627998,31.2155671702,0 110.7313278164,31.2161988542,0 110.7304378020,31.2167219892,0 110.7294663794,31.2165767690,0 110.7282997959,31.2152324481,0 110.7277097100,31.2145243451,0 110.7274093019,31.2141917511,0 110.7272054536,31.2139879029,0 + + + 典型防控区 diff --git a/templates/index.html b/templates/index.html index b15bc45..acfe436 100644 --- a/templates/index.html +++ b/templates/index.html @@ -566,6 +566,7 @@
+
diff --git a/web/index_local.html b/web/index_local.html index bfd3003..59f0d34 100644 --- a/web/index_local.html +++ b/web/index_local.html @@ -566,6 +566,7 @@
+