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);