Cesium的HelloWorld程序

131 阅读1分钟

注意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>