CesiumJS 中未出现的实体
Entities not Appearing in CesiumJS
我想在 Cesium 中可视化一些 3d 数据点,但不想设置服务器。我下载了 Cesium-1.34.zip 并将其解压缩到我的桌面上。然后我制作了一个 .html 文件,它也位于我的桌面上,并从 Cesium-1.34 解压缩文件夹中提取资源。我包含了一些来自 http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=PolylineVolume.html&label=Geometries 的示例代码来测试它。我的全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="Cesium-1.34/Build/Cesium/Cesium.js"></script>
<style>
@import url(Cesium-1.34/Apps/Sandcastle/templates/bucket.css);
@import url(Cesium-1.34/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div class="fullSize" id="cesiumContainer"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net',
key : 'al3lvBftgu3T17GnraSB~sDScxf9wA4dopWEvK2swfA~AlwqHWs4LzhiC2oOHAFYe9dZMVQtYCQHRGyC8Y6Hyq9-109ibBI9suhwFj0RoRAp'
})
});
var greenBox1 = viewer.entities.add({
name : 'Green box with beveled corners and outline',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
-90.0, 36.0, 100000.0,
-94.0, 36.0, 0.0]),
shape :[new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000)],
cornerType : Cesium.CornerType.BEVELED,
material : Cesium.Color.GREEN.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
问题是应该出现在地球仪上的绿框没有出现。我没有从 Developer Tools window 收到任何错误。不过,我确实收到了一些警告和消息:
- 警告:DOM7011:此页面上的代码禁用了前后缓存。
- 消息:HTML1300:导航发生。
- 消息:WEBGL11258:暂时切换到软件呈现以显示 WebGL 内容。此应用程序使用 Cesium 的默认 Bing 地图键。请尽快为应用程序创建一个新密钥...
关于密钥的消息很奇怪,因为我肯定在代码中使用了我自己的密钥,但我认为这不会干扰实体不会完全没有错误地出现。在这一点上我很困惑,我想如果一个实体不能显示就会有一个错误,但我什么也没得到。可能是因为它确实需要在服务器上 运行。关于我遗漏了什么或如何仅使用本地配置在 CesiumJS 上绘制实体的任何提示?
Bing 键错误消息仍在显示,因为您的查看器上显示了 Geocoder 小部件(默认情况下),并且 Geocoder 使用 Bing API 来执行其地理编码。您可以在构造 Cesium.Viewer 之前通过预先指定密钥来修复它,如下所示:
Cesium.BingMapsApi.defaultKey = 'your_key_here';
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
此外,不支持直接从 file://
协议 运行ning Cesium,因为 Cesium 严重依赖于纹理、网络工作者脚本、JSON 文件等资产.典型的浏览器会阻止 JavaScript 从一个文件访问其他文件。因此,Cesium 附带了一个小 server.js
文件,您可以 运行 使用 NodeJS 获得一个小型开发服务器,在本地托管 Cesium 的副本。有关详细信息,请参阅 Cesium Up and Running。
遵循此建议后,您原始问题中的 "green box" 代码应该 运行 就好了。
我想在 Cesium 中可视化一些 3d 数据点,但不想设置服务器。我下载了 Cesium-1.34.zip 并将其解压缩到我的桌面上。然后我制作了一个 .html 文件,它也位于我的桌面上,并从 Cesium-1.34 解压缩文件夹中提取资源。我包含了一些来自 http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=PolylineVolume.html&label=Geometries 的示例代码来测试它。我的全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="Cesium-1.34/Build/Cesium/Cesium.js"></script>
<style>
@import url(Cesium-1.34/Apps/Sandcastle/templates/bucket.css);
@import url(Cesium-1.34/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div class="fullSize" id="cesiumContainer"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net',
key : 'al3lvBftgu3T17GnraSB~sDScxf9wA4dopWEvK2swfA~AlwqHWs4LzhiC2oOHAFYe9dZMVQtYCQHRGyC8Y6Hyq9-109ibBI9suhwFj0RoRAp'
})
});
var greenBox1 = viewer.entities.add({
name : 'Green box with beveled corners and outline',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
-90.0, 36.0, 100000.0,
-94.0, 36.0, 0.0]),
shape :[new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000)],
cornerType : Cesium.CornerType.BEVELED,
material : Cesium.Color.GREEN.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
问题是应该出现在地球仪上的绿框没有出现。我没有从 Developer Tools window 收到任何错误。不过,我确实收到了一些警告和消息:
- 警告:DOM7011:此页面上的代码禁用了前后缓存。
- 消息:HTML1300:导航发生。
- 消息:WEBGL11258:暂时切换到软件呈现以显示 WebGL 内容。此应用程序使用 Cesium 的默认 Bing 地图键。请尽快为应用程序创建一个新密钥...
关于密钥的消息很奇怪,因为我肯定在代码中使用了我自己的密钥,但我认为这不会干扰实体不会完全没有错误地出现。在这一点上我很困惑,我想如果一个实体不能显示就会有一个错误,但我什么也没得到。可能是因为它确实需要在服务器上 运行。关于我遗漏了什么或如何仅使用本地配置在 CesiumJS 上绘制实体的任何提示?
Bing 键错误消息仍在显示,因为您的查看器上显示了 Geocoder 小部件(默认情况下),并且 Geocoder 使用 Bing API 来执行其地理编码。您可以在构造 Cesium.Viewer 之前通过预先指定密钥来修复它,如下所示:
Cesium.BingMapsApi.defaultKey = 'your_key_here';
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
此外,不支持直接从 file://
协议 运行ning Cesium,因为 Cesium 严重依赖于纹理、网络工作者脚本、JSON 文件等资产.典型的浏览器会阻止 JavaScript 从一个文件访问其他文件。因此,Cesium 附带了一个小 server.js
文件,您可以 运行 使用 NodeJS 获得一个小型开发服务器,在本地托管 Cesium 的副本。有关详细信息,请参阅 Cesium Up and Running。
遵循此建议后,您原始问题中的 "green box" 代码应该 运行 就好了。