que01/osmWorkflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(preview): add transparent building mode

Browse Source
This commit is contained in:
que01
2026-08-07 13:51:47 +08:00
parent 808266127d
commit 8237c7ed27
3 changed files with 62 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/lib/area-preview.js
View File

@@ -50,6 +50,7 @@ function cesiumPreviewHtml(glbName, metadataName, routeName, vehicleModelName, a
<button type="button" data-view-mode="inspect" aria-pressed="false">Inspect</button>
</span>
<label><input id="toggleScene" type="checkbox" checked> Scene</label>
<label><input id="toggleBuildingGhost" type="checkbox"> Building ghost</label>
<span id="assetToggles" class="control-subgroup"></span>
<span id="semanticToggles" class="control-subgroup hidden"></span>
<label><input id="toggleRoutes" type="checkbox" checked> Routes</label>

58
scripts/lib/cesium-preview.js
View File

@@ -8,6 +8,7 @@
const toggleCruise = document.getElementById("toggleCruise");
const toggleFollow = document.getElementById("toggleFollow");
const toggleScene = document.getElementById("toggleScene");
const toggleBuildingGhost = document.getElementById("toggleBuildingGhost");
const toggleRoutes = document.getElementById("toggleRoutes");
const toggleVehicles = document.getElementById("toggleVehicles");
const toggleSignals = document.getElementById("toggleSignals");
@@ -287,8 +288,54 @@
const hasSemanticAssets = semanticAssets(assets).length > 0;
const sceneLabel = toggleScene.closest("label");
let viewMode = "scene";
let buildingGhostActive = false;
async function setBuildingGhost(enabled) {
const roads = assets.find((asset) => asset.id === "roads");
const buildings = assets.find((asset) => asset.id === "buildings");
const main = assets.find((asset) => asset.id === "main");
if (!roads || !buildings || !main) {
toggleBuildingGhost.checked = false;
toggleBuildingGhost.disabled = true;
return;
}
if (enabled) {
const loaded = await Promise.all([
loadAsset(viewer, roads, placement),
loadAsset(viewer, buildings, placement),
]);
if (!loaded[0] || !loaded[1]) {
toggleBuildingGhost.checked = false;
setStatus("Building transparency unavailable");
return;
}
main.model.show = false;
roads.model.show = true;
buildings.model.show = true;
buildings.model.color = Cesium.Color.WHITE.withAlpha(0.22);
buildings.model.colorBlendMode = Cesium.ColorBlendMode.REPLACE;
buildings.model.colorBlendAmount = 1.0;
for (const asset of liveAssets(assets)) {
if (asset.id !== "main") asset.model.show = asset.category === "dynamic" || asset.category === "countdown"
? toggleSignals.checked : asset.model.show;
}
buildingGhostActive = true;
setStatus("Buildings transparent");
} else {
for (const asset of semanticAssets(assets)) {
if (asset.model) asset.model.show = false;
}
main.model.show = toggleScene.checked;
for (const asset of liveAssets(assets)) {
if (asset.id !== "main") asset.model.show = toggleSignals.checked;
}
buildingGhostActive = false;
setStatus("Buildings opaque");
}
}
toggleScene.addEventListener("change", () => {
if (buildingGhostActive) return;
for (const asset of liveAssets(assets)) {
asset.model.show = toggleScene.checked;
if (asset.toggle) asset.toggle.checked = toggleScene.checked;
@@ -316,6 +363,13 @@
toggleDiagnostics.addEventListener("change", () => {
diagnosticsEl.classList.toggle("hidden", !toggleDiagnostics.checked);
});
toggleBuildingGhost.addEventListener("change", () => {
void setBuildingGhost(toggleBuildingGhost.checked);
});
if (!semanticAssets(assets).some((asset) => asset.id === "roads") ||
!semanticAssets(assets).some((asset) => asset.id === "buildings")) {
toggleBuildingGhost.disabled = true;
}
async function setViewMode(nextMode) {
if (nextMode === viewMode) return;
@@ -329,6 +383,10 @@
if (sceneLabel) sceneLabel.classList.toggle("hidden", inspecting);
if (!inspecting) {
if (buildingGhostActive) {
toggleBuildingGhost.checked = false;
await setBuildingGhost(false);
}
for (const asset of semanticAssets(assets)) {
if (asset.model) asset.model.show = false;
}