注意Cesium的程序必须在node启动的情况下,在Cesium安装目录下的App目录下添加项目,我本地的目录对应的是:E:\app\Cesium-1.73\Apps,在普通目录下创建的html无效
如果css文件引用路径错误,会报以下错误:
CesiumHello.html:1 Refused to apply style from 'http://localhost:8080/Apps/Build/Cesium/Widgets/widgets.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
代码解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<!-- 这里在pc端如果不加入scale的限制,地球的大小也是不合适的 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Document</title>
<style>
<!-- 注意引用位置须正确,否则报mime类型错误 -->
@import url(../../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<!-- 引用Cesium主文件 -->
<script src="../../Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer("cesiumContainer");
</script>
</body>
</html>