ext-appss / examples /map-server /test-standalone.html

Upload folder using huggingface_hub

e1cc3bc verified 4 months ago

4.87 kB

	<!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>