File size: 4,870 Bytes
e1cc3bc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CesiumJS Standalone Test</title>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#status {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.8);
color: #0f0;
padding: 10px;
font-family: monospace;
font-size: 12px;
z-index: 1000;
max-width: 400px;
max-height: 300px;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="status">Loading CesiumJS...</div>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
<script>
const status = document.getElementById('status');
function log(msg) {
console.log(msg);
status.innerHTML += '<br>' + msg;
status.scrollTop = status.scrollHeight;
}
try {
log('CesiumJS version: ' + Cesium.VERSION);
// Disable Cesium Ion
Cesium.Ion.defaultAccessToken = undefined;
log('Ion disabled');
// Set default camera view rectangle (required when Ion is disabled)
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
-130, 20, -60, 55 // USA bounding box
);
log('Default view rectangle set');
// Create viewer with no base layer - expose globally for debugging
const viewer = new Cesium.Viewer('cesiumContainer', {
baseLayer: false,
geocoder: false,
baseLayerPicker: false,
animation: false,
timeline: false,
homeButton: true,
sceneModePicker: true,
navigationHelpButton: false,
fullscreenButton: false,
terrainProvider: undefined,
});
window.viewer = viewer; // Expose for debugging
log('Viewer created');
// Set globe properties
viewer.scene.globe.show = true;
viewer.scene.globe.enableLighting = false;
viewer.scene.globe.baseColor = Cesium.Color.DARKSLATEGRAY;
// Disable request render mode - force continuous rendering
viewer.scene.requestRenderMode = false;
log('Globe configured, continuous rendering enabled');
// Create OSM imagery provider
log('Creating OSM provider...');
const osmProvider = new Cesium.UrlTemplateImageryProvider({
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
minimumLevel: 0,
maximumLevel: 19,
credit: new Cesium.Credit('OpenStreetMap'),
});
// Add error handler
osmProvider.errorEvent.addEventListener((error) => {
log('OSM ERROR: ' + JSON.stringify(error));
});
// Add the imagery layer
const layer = viewer.imageryLayers.addImageryProvider(osmProvider);
log('OSM layer added: ' + (layer ? 'success' : 'failed'));
// Track tile loading
viewer.scene.globe.tileLoadProgressEvent.addEventListener((queueLength) => {
if (queueLength > 0) {
log('Tiles loading: ' + queueLength);
}
});
// Use flyTo with Rectangle - most reliable for initial view
log('Flying to USA rectangle...');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(-130, 20, -60, 55),
duration: 0
});
// Force renders using setInterval (bypasses rAF throttling)
let renderCount = 0;
const intervalId = setInterval(() => {
viewer.render();
renderCount++;
if (renderCount <= 3) {
log('Interval render #' + renderCount);
}
if (renderCount > 20) {
clearInterval(intervalId);
log('Stopped interval rendering');
}
}, 50);
log('FlyTo called, interval rendering started');
log('Initialization complete!');
} catch (e) {
log('ERROR: ' + e.message);
console.error(e);
}
</script>
</body>
</html>
|