diff --git a/web/kyushu_compare.html b/web/kyushu_compare.html index 3f9738e..d5ab23b 100644 --- a/web/kyushu_compare.html +++ b/web/kyushu_compare.html @@ -82,14 +82,26 @@ const leftMap = new maplibregl.Map({ container:"left-map",style:emptyStyle(),center:START.center,zoom:START.zoom,bearing:0,pitch:0,attributionControl:false }); const rightMap = new maplibregl.Map({ - container:"right-map",style:REFERENCE_STYLE,center:START.center,zoom:START.zoom,bearing:0,pitch:0,attributionControl:false + container:"right-map",style:emptyStyle(),center:START.center,zoom:START.zoom,bearing:0,pitch:0,attributionControl:false }); leftMap.addControl(new maplibregl.NavigationControl(),"top-right"); rightMap.addControl(new maplibregl.NavigationControl(),"top-right"); let syncing=false; -function cloneReferenceForLocal(){ - const style=JSON.parse(JSON.stringify(rightMap.getStyle())); +function sanitizeReferenceStyle(raw){ + const style=JSON.parse(JSON.stringify(raw)); + const sources=style.sources || {}; + const removed=[]; + style.layers=(style.layers || []).filter(function(layer){ + if(!layer.source || sources[layer.source])return true; + removed.push(layer.id + " -> " + layer.source); + return false; + }); + return {style:style,removed:removed}; +} + +function cloneReferenceForLocal(referenceStyle){ + const style=JSON.parse(JSON.stringify(referenceStyle)); const source=style.sources && style.sources.navsea_delivery; if(!source)throw new Error("参考 style 中找不到 sources.navsea_delivery"); delete source.url; @@ -103,19 +115,31 @@ function cloneReferenceForLocal(){ return style; } -rightMap.once("style.load",function(){ - setState(rightState,"参考 style 已加载","ok"); +async function loadComparisonStyles(){ try{ - leftMap.setStyle(cloneReferenceForLocal()); + setState(rightState,"下载并检查参考 style…",""); + const response=await fetch(REFERENCE_STYLE,{cache:"no-store"}); + if(!response.ok)throw new Error("HTTP " + response.status); + const raw=await response.json(); + const checked=sanitizeReferenceStyle(raw); + const removedText=checked.removed.length + ? ";忽略无效 layer: " + checked.removed.join(", ") + : ""; + rightMap.setStyle(checked.style); + leftMap.setStyle(cloneReferenceForLocal(checked.style)); + setState(rightState,"参考 style 已加载" + removedText,"ok"); }catch(err){ console.error(err); - setState(leftState,"左侧初始化失败:" + (err.message || err),"err"); + setState(rightState,"参考 style 加载失败:" + (err.message || err),"err"); + setState(leftState,"等待有效参考 style","err"); } -}); +} + leftMap.on("style.load",function(){ const sources=Object.keys((leftMap.getStyle() || {}).sources || {}); if(sources.includes("navsea_delivery"))setState(leftState,"Production v2 PBF 已接入","ok"); }); +loadComparisonStyles(); function cameraOf(map){ const c=map.getCenter();