City-Lifeline-Cockpit/tools/city-massing/preview.html

<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8" /><title>沅陵建模审查样片</title
    ><style>
        html,
        body,
        #map {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #071019;
        }
        #caption {
            position: absolute;
            left: 18px;
            bottom: 28px;
            max-width: calc(100% - 48px);
            color: #eee;
            background: #102131d9;
            padding: 10px;
            font: 14px sans-serif;
            pointer-events: none;
        }
    </style>
    <body>
        <div id="map"></div>
        <div id="caption">建模审查样片，非测绘数据</div>
        <script type="module">
            window.CESIUM_BASE_URL = '/cesium/'
            const raw = await (await fetch('/src/modules/cockpit/services/cesiumEngine.js')).text()
            const url = raw.match(/from\s*["']([^"']*\/cesium\.js[^"']*)["']/)?.[1]
            const C = await import(url),
                E = await import('/src/modules/cockpit/services/cesiumEngine.js')
            window.startPreview = async ({ model, models, terrain = true, imagery = true }) => {
                const v = E.createViewer(document.querySelector('#map'), {
                    ready: true,
                    kind: 'tms',
                    url: 'Assets/Textures/NaturalEarthII',
                })
                if (terrain) await E.applyTerrain(v, { url: '/gis/dem', requestVertexNormals: true })
                else v.terrainProvider = new C.EllipsoidTerrainProvider()
                if (imagery)
                    E.applyOverlays(v, [
                        {
                            url: '/gis/pic3/{z}/{x}/{reverseY}.png',
                            minimumLevel: 0,
                            maximumLevel: 19,
                            bounds: [109.962, 27.962, 111.046, 29.061],
                        },
                    ])
                const tileUrls = models || (model ? [model] : [])
                const t = await E.applyTilesets(v.scene, tileUrls.map(url => ({ url, lighting: true })))
                if (t.failed.length) throw Error(JSON.stringify(t.failed))
                v.scene.globe.maximumScreenSpaceError = 1
                v.scene.globe.enableLighting = false
                // A fixed local daylight is used for asset inspection; terrain imagery stays unlit.
                const frame = C.Transforms.eastNorthUpToFixedFrame(C.Cartesian3.fromDegrees(110.395, 28.454))
                const sunDir = C.Matrix4.multiplyByPointAsVector(
                    frame,
                    new C.Cartesian3(-0.4, -0.6, -1),
                    new C.Cartesian3()
                )
                C.Cartesian3.normalize(sunDir, sunDir)
                v.scene.light = new C.DirectionalLight({ direction: sunDir, intensity: 3.0 })
                v.shadowMap.enabled = false // 避免当前审查场景阴影精度导致立面噪点；不影响地形深度遮挡。
                v.shadowMap.softShadows = true
                for (const tile of t.instances) {
                    tile.imageBasedLighting = new C.ImageBasedLighting({
                        imageBasedLightingFactor: new C.Cartesian2(1, 1),
                        sphericalHarmonicCoefficients: [
                            new C.Cartesian3(0.75, 0.75, 0.75),
                            ...Array.from({ length: 8 }, () => new C.Cartesian3(0, 0, 0)),
                        ],
                    })
                }
                window.scene35 = { C, E, v, tiles: t.instances }
                window.frameCount = 0
                v.scene.postRender.addEventListener(() => window.frameCount++)
                return true
            }
            if (location.hash !== '#automation') {
                await startPreview({
                    models: [
                        '/review-assets/district/lod-preview/tileset.json',
                        '/review-assets/city/regular-estate/lod-preview/tileset.json',
                        '/review-assets/city/oldtown/lod-preview/tileset.json',
                    ],
                })
                const { v, C } = window.scene35
                v.scene.screenSpaceCameraController.enableRotate = true
                v.scene.screenSpaceCameraController.enableZoom = true
                v.scene.screenSpaceCameraController.enableTilt = true
                v.scene.screenSpaceCameraController.enableTranslate = true
                v.camera.lookAtTransform(
                    C.Transforms.eastNorthUpToFixedFrame(C.Cartesian3.fromDegrees(110.395, 28.454, 135)),
                    new C.HeadingPitchRange(0, -0.85, 1250)
                )
                document.querySelector('#caption').textContent =
                    '沅陵体育场附近示范街区 · 屋顶/立面样片 · 非全城覆盖，楼层与立面非测绘数据'
            }
        </script>
    </body>
</html>