diff --git a/web/kyushu_compare.html b/web/kyushu_compare.html index d5ab23b..9c4b740 100644 --- a/web/kyushu_compare.html +++ b/web/kyushu_compare.html @@ -27,6 +27,12 @@ .divider-label{position:absolute;z-index:6;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);padding:4px 5px;font-size:10px;color:#ddd;pointer-events:none} #left-pane .divider-label{right:3px;border-radius:4px 0 0 4px} #right-pane .divider-label{left:3px;border-radius:0 4px 4px 0} + #debug-panel{position:absolute;z-index:20;top:56px;right:10px;width:270px;padding:10px 11px;border:1px solid #555;border-radius:7px;background:rgba(20,22,26,.94);box-shadow:0 3px 12px rgba(0,0,0,.35);font-size:12px} + #debug-panel.collapsed{display:none} + #debug-panel .debug-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-weight:600} + #debug-panel label{display:flex;align-items:center;gap:7px;margin:7px 0;line-height:1.3} + #debug-panel .debug-note{margin-top:8px;color:#aeb7c3;font-size:11px;line-height:1.4} + #debug-panel button{border:1px solid #555;background:#272b31;color:#fff;border-radius:4px;padding:3px 7px;cursor:pointer} @media(max-width:760px){ #toolbar .meta{display:none} #maps{grid-template-columns:1fr;grid-template-rows:1fr 1fr} @@ -40,8 +46,16 @@ 左:Production v2 本地 PBF 右:extentfix 原始数据源 + -- +
@@ -69,6 +83,10 @@ const leftState = document.getElementById("left-state"); const rightState = document.getElementById("right-state"); const centerReadout = document.getElementById("center-readout"); const syncToggle = document.getElementById("sync-toggle"); +const debugPanel = document.getElementById("debug-panel"); +const debugRefBathy = document.getElementById("debug-ref-bathy"); +const debugHighlightDepcnt = document.getElementById("debug-highlight-depcnt"); +const debugInspector = document.getElementById("debug-inspector"); function setState(el,text,kind){ el.textContent=text; @@ -77,6 +95,24 @@ function setState(el,text,kind){ function emptyStyle(){ return {version:8,sources:{},layers:[{id:"background",type:"background",paint:{"background-color":"#d8edf5"}}]}; } +function setLayerVisibility(map,id,visible){ + if(map.getLayer(id))map.setLayoutProperty(id,"visibility",visible ? "visible" : "none"); +} +function applyDebugStyles(){ + setLayerVisibility(rightMap,"bathymetry-support",debugRefBathy.checked); + setLayerVisibility(rightMap,"bathymetry-depth-labels",debugRefBathy.checked); + for(const map of [leftMap,rightMap]){ + if(map.getLayer("depth-contours")){ + map.setPaintProperty("depth-contours","line-color", + debugHighlightDepcnt.checked ? "#ff00ff" : "rgba(136,152,139,1)"); + map.setPaintProperty("depth-contours","line-width", + debugHighlightDepcnt.checked ? 3 : 1); + } + } + const display=debugInspector.checked ? "" : "none"; + document.getElementById("left-inspector").style.display=display; + document.getElementById("right-inspector").style.display=display; +} const leftMap = new maplibregl.Map({ container:"left-map",style:emptyStyle(),center:START.center,zoom:START.zoom,bearing:0,pitch:0,attributionControl:false @@ -138,7 +174,9 @@ async function loadComparisonStyles(){ leftMap.on("style.load",function(){ const sources=Object.keys((leftMap.getStyle() || {}).sources || {}); if(sources.includes("navsea_delivery"))setState(leftState,"Production v2 PBF 已接入","ok"); + applyDebugStyles(); }); +rightMap.on("style.load",applyDebugStyles); loadComparisonStyles(); function cameraOf(map){ @@ -165,6 +203,21 @@ document.getElementById("reset-btn").addEventListener("click",function(){ leftMap.fitBounds(KYUSHU_BOUNDS,{padding:36,duration:0}); syncCamera(leftMap,rightMap); }); +document.getElementById("debug-toggle-btn").addEventListener("click",function(){ + debugPanel.classList.toggle("collapsed"); +}); +document.getElementById("debug-collapse-btn").addEventListener("click",function(){ + debugPanel.classList.add("collapsed"); +}); +debugRefBathy.addEventListener("change",applyDebugStyles); +debugHighlightDepcnt.addEventListener("change",applyDebugStyles); +debugInspector.addEventListener("change",function(){ + applyDebugStyles(); + if(!debugInspector.checked){ + if(leftMarker){leftMarker.remove();leftMarker=null;} + if(rightMarker){rightMarker.remove();rightMarker=null;} + } +}); function featureKey(f){ const p=f.properties || {}; @@ -223,6 +276,7 @@ function inspect(map,lngLat,element){ let leftMarker=null; let rightMarker=null; function compareAt(lngLat){ + if(!debugInspector.checked)return; if(leftMarker)leftMarker.remove(); if(rightMarker)rightMarker.remove(); leftMarker=new maplibregl.Marker().setLngLat(lngLat).addTo(leftMap);