228 lines
9.7 KiB
HTML
228 lines
9.7 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>九州 S-52 PBF 左右对比</title>
|
||
<link rel="stylesheet" href="/assets/maplibre-gl.css" />
|
||
<style>
|
||
*{box-sizing:border-box}
|
||
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#111;color:#eee}
|
||
body{overflow:hidden}
|
||
#toolbar{height:46px;display:flex;align-items:center;gap:14px;padding:0 12px;background:#17191d;border-bottom:1px solid #3a3d43;font-size:13px}
|
||
#toolbar strong{font-size:14px;white-space:nowrap}
|
||
#toolbar .meta{color:#abb2bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
#toolbar button{border:1px solid #555;background:#272b31;color:#fff;border-radius:5px;padding:5px 9px;cursor:pointer}
|
||
#toolbar label{display:flex;gap:5px;align-items:center;white-space:nowrap}
|
||
#maps{height:calc(100% - 46px);display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#555}
|
||
.pane{position:relative;min-width:0;overflow:hidden;background:#d8edf5}
|
||
.map{position:absolute;inset:0}
|
||
.pane-title{position:absolute;z-index:5;left:10px;top:10px;max-width:calc(100% - 62px);padding:7px 9px;border-radius:6px;background:rgba(18,20,24,.88);box-shadow:0 1px 6px rgba(0,0,0,.3);font-size:12px;line-height:1.4}
|
||
.pane-title b{display:block;font-size:13px}
|
||
.state{font-size:11px;color:#cbd2dc}
|
||
.state.ok{color:#91e39b}.state.err{color:#ff8c8c}
|
||
.inspector{position:absolute;z-index:5;left:10px;right:10px;bottom:10px;max-height:26%;overflow:auto;padding:7px 9px;border-radius:6px;background:rgba(18,20,24,.88);font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;pointer-events:auto}
|
||
.inspector.empty{color:#9ca5b1}
|
||
#center-readout{margin-left:auto;color:#cbd2dc;white-space:nowrap;font-variant-numeric:tabular-nums}
|
||
.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}
|
||
@media(max-width:760px){
|
||
#toolbar .meta{display:none}
|
||
#maps{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
|
||
.inspector{max-height:32%}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="toolbar">
|
||
<strong>九州 S-52 PBF 对比</strong>
|
||
<span class="meta">左：Production v2 本地 PBF 右：extentfix 原始数据源</span>
|
||
<label><input id="sync-toggle" type="checkbox" checked />同步视图</label>
|
||
<button id="reset-btn" type="button">重置九州</button>
|
||
<span id="center-readout">--</span>
|
||
</div>
|
||
<div id="maps">
|
||
<section class="pane" id="left-pane">
|
||
<div id="left-map" class="map"></div>
|
||
<div class="pane-title"><b>左：九州 Production v2</b><span id="left-state" class="state">等待参考 style…</span></div>
|
||
<div id="left-inspector" class="inspector empty">点击任一侧海图，对比同一位置的 Feature。</div>
|
||
<div class="divider-label">LOCAL</div>
|
||
</section>
|
||
<section class="pane" id="right-pane">
|
||
<div id="right-map" class="map"></div>
|
||
<div class="pane-title"><b>右：NavSea extentfix</b><span id="right-state" class="state">加载远端 style…</span></div>
|
||
<div id="right-inspector" class="inspector empty">点击任一侧海图，对比同一位置的 Feature。</div>
|
||
<div class="divider-label">REFERENCE</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="/assets/maplibre-gl.js"></script>
|
||
<script>
|
||
const REFERENCE_STYLE =
|
||
"https://pbf.jpcn.ccwu.cc/style/style.navsea-delivery-full-semantic-extentfix.json";
|
||
const LOCAL_TILES = location.origin + "/pbf/{z}/{x}/{y}.pbf";
|
||
const KYUSHU_BOUNDS = [[128.0,29.5],[132.5,34.8]];
|
||
const START = {center:[130.25,32.15],zoom:6.6,bearing:0,pitch:0};
|
||
|
||
const leftState = document.getElementById("left-state");
|
||
const rightState = document.getElementById("right-state");
|
||
const centerReadout = document.getElementById("center-readout");
|
||
const syncToggle = document.getElementById("sync-toggle");
|
||
|
||
function setState(el,text,kind){
|
||
el.textContent=text;
|
||
el.className="state" + (kind ? " " + kind : "");
|
||
}
|
||
function emptyStyle(){
|
||
return {version:8,sources:{},layers:[{id:"background",type:"background",paint:{"background-color":"#d8edf5"}}]};
|
||
}
|
||
|
||
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
|
||
});
|
||
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()));
|
||
const source=style.sources && style.sources.navsea_delivery;
|
||
if(!source)throw new Error("参考 style 中找不到 sources.navsea_delivery");
|
||
delete source.url;
|
||
source.type="vector";
|
||
source.tiles=[LOCAL_TILES];
|
||
source.minzoom=5;
|
||
source.maxzoom=12;
|
||
source.bounds=[128.0,29.5,132.5,34.8];
|
||
source.attribution="CM95 九州 S-52 Production Pipeline v2";
|
||
style.name=(style.name || "NavSea") + " / Kyushu Production v2";
|
||
return style;
|
||
}
|
||
|
||
rightMap.once("style.load",function(){
|
||
setState(rightState,"参考 style 已加载","ok");
|
||
try{
|
||
leftMap.setStyle(cloneReferenceForLocal());
|
||
}catch(err){
|
||
console.error(err);
|
||
setState(leftState,"左侧初始化失败：" + (err.message || err),"err");
|
||
}
|
||
});
|
||
leftMap.on("style.load",function(){
|
||
const sources=Object.keys((leftMap.getStyle() || {}).sources || {});
|
||
if(sources.includes("navsea_delivery"))setState(leftState,"Production v2 PBF 已接入","ok");
|
||
});
|
||
|
||
function cameraOf(map){
|
||
const c=map.getCenter();
|
||
return {center:[c.lng,c.lat],zoom:map.getZoom(),bearing:map.getBearing(),pitch:map.getPitch()};
|
||
}
|
||
function syncCamera(from,to){
|
||
if(syncing || !syncToggle.checked)return;
|
||
syncing=true;
|
||
try{to.jumpTo(cameraOf(from));}finally{syncing=false;}
|
||
}
|
||
leftMap.on("move",function(){syncCamera(leftMap,rightMap);});
|
||
rightMap.on("move",function(){syncCamera(rightMap,leftMap);});
|
||
function updateReadout(map){
|
||
const c=map.getCenter();
|
||
centerReadout.textContent="z=" + map.getZoom().toFixed(2) + " " +
|
||
c.lng.toFixed(5) + ", " + c.lat.toFixed(5) + " b=" + map.getBearing().toFixed(1) + "°";
|
||
}
|
||
leftMap.on("move",function(){updateReadout(leftMap);});
|
||
rightMap.on("move",function(){updateReadout(rightMap);});
|
||
updateReadout(leftMap);
|
||
|
||
document.getElementById("reset-btn").addEventListener("click",function(){
|
||
leftMap.fitBounds(KYUSHU_BOUNDS,{padding:36,duration:0});
|
||
syncCamera(leftMap,rightMap);
|
||
});
|
||
|
||
function featureKey(f){
|
||
const p=f.properties || {};
|
||
return [
|
||
f.layer && f.layer.id,
|
||
f.sourceLayer || "",
|
||
f.id == null ? "" : f.id,
|
||
p.canonical_object_type || "",
|
||
p.source_object_class || ""
|
||
].join("|");
|
||
}
|
||
function summarize(f){
|
||
const p=f.properties || {};
|
||
const bits=[
|
||
"layer=" + ((f.layer && f.layer.id) || "-"),
|
||
"source-layer=" + (f.sourceLayer || "-"),
|
||
"id=" + (f.id == null ? "-" : f.id),
|
||
p.canonical_object_type ? "type=" + p.canonical_object_type : "",
|
||
p.source_object_class ? "class=" + p.source_object_class : "",
|
||
p.chart_label_text ? "label=" + p.chart_label_text : "",
|
||
p.s52_runtime_csp ? "csp=" + p.s52_runtime_csp : "",
|
||
p.s52_csp ? "s52=" + p.s52_csp : "",
|
||
p.depth_min_m !== undefined ? "dmin=" + p.depth_min_m : "",
|
||
p.depth_max_m !== undefined ? "dmax=" + p.depth_max_m : "",
|
||
p.contour_depth_m !== undefined ? "contour=" + p.contour_depth_m : "",
|
||
p.s52_hazard_depth_m !== undefined ? "hazard=" + p.s52_hazard_depth_m : ""
|
||
].filter(Boolean);
|
||
return bits.join(" ");
|
||
}
|
||
function inspect(map,lngLat,element){
|
||
if(!map.loaded()){
|
||
element.textContent="地图仍在加载。";
|
||
return;
|
||
}
|
||
const point=map.project(lngLat);
|
||
const box=[[point.x-5,point.y-5],[point.x+5,point.y+5]];
|
||
let features=[];
|
||
try{features=map.queryRenderedFeatures(box);}catch(err){console.warn(err);}
|
||
const unique=new Map();
|
||
for(const f of features){
|
||
const key=featureKey(f);
|
||
if(!unique.has(key))unique.set(key,f);
|
||
}
|
||
const rows=Array.from(unique.values()).slice(0,24);
|
||
element.classList.toggle("empty",rows.length===0);
|
||
if(rows.length){
|
||
element.textContent=lngLat.lng.toFixed(6) + ", " + lngLat.lat.toFixed(6) +
|
||
"\n命中 " + unique.size + " 项（显示前 " + rows.length + " 项）\n" +
|
||
rows.map(function(f,i){return String(i+1).padStart(2,"0") + ". " + summarize(f);}).join("\n");
|
||
}else{
|
||
element.textContent=lngLat.lng.toFixed(6) + ", " + lngLat.lat.toFixed(6) +
|
||
"\n此位置没有命中已渲染 Feature。";
|
||
}
|
||
}
|
||
|
||
let leftMarker=null;
|
||
let rightMarker=null;
|
||
function compareAt(lngLat){
|
||
if(leftMarker)leftMarker.remove();
|
||
if(rightMarker)rightMarker.remove();
|
||
leftMarker=new maplibregl.Marker().setLngLat(lngLat).addTo(leftMap);
|
||
rightMarker=new maplibregl.Marker().setLngLat(lngLat).addTo(rightMap);
|
||
inspect(leftMap,lngLat,document.getElementById("left-inspector"));
|
||
inspect(rightMap,lngLat,document.getElementById("right-inspector"));
|
||
}
|
||
leftMap.on("click",function(e){compareAt(e.lngLat);});
|
||
rightMap.on("click",function(e){compareAt(e.lngLat);});
|
||
|
||
function mapError(side,el,event){
|
||
const err=event && event.error ? event.error : event;
|
||
const msg=err && err.message ? err.message : String(err || "unknown");
|
||
console.error(side,msg);
|
||
if(msg.indexOf("404")<0)setState(el,side + "错误：" + msg,"err");
|
||
}
|
||
leftMap.on("error",function(e){mapError("左侧",leftState,e);});
|
||
rightMap.on("error",function(e){mapError("右侧",rightState,e);});
|
||
|
||
window.addEventListener("resize",function(){
|
||
leftMap.resize();
|
||
rightMap.resize();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|