feat: add collapsible comparison debug controls

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 @@
   <span class="meta">左：Production v2 本地 PBF　右：extentfix 原始数据源</span>
   <label><input id="sync-toggle" type="checkbox" checked />同步视图</label>
   <button id="reset-btn" type="button">重置九州</button>
+  <button id="debug-toggle-btn" type="button">调试</button>
   <span id="center-readout">--</span>
 </div>
+<div id="debug-panel" class="collapsed">
+  <div class="debug-title"><span>图层调试</span><button id="debug-collapse-btn" type="button">收起</button></div>
+  <label><input id="debug-ref-bathy" type="checkbox" checked />右侧显示 bathymetry_line</label>
+  <label><input id="debug-highlight-depcnt" type="checkbox" />左右突出 DEPCNT</label>
+  <label><input id="debug-inspector" type="checkbox" checked />点击 Feature 检查</label>
+  <div class="debug-note">DEPCNT = depth_contour；bathymetry_line 是参考 PBF 的额外高密度海底地形线。</div>
+</div>
 <div id="maps">
   <section class="pane" id="left-pane">
     <div id="left-map" class="map"></div>
@@ -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);