我想在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窗口中收到任何错误。我确实收到了一些警告和消息:
关于密钥的消息很奇怪,因为我肯定在代码中使用我自己的密钥,但我认为这不会干扰实体根本没有出现任何错误。在这一点上我很难过,我想如果一个实体无法显示会出现错误,但我什么都没得到。这可能是因为它确实需要在服务器上运行。关于我缺少什么或如何使用本地配置在CesiumJS上绘制实体的任何提示?
答案 0 :(得分:0)
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://
协议运行Cesium,因为Cesium在很大程度上依赖于纹理,Web工作者脚本,JSON文件等资源。典型的浏览器可防止文件中的JavaScript访问其他文件。因此,Cesium附带了一个小server.js
文件,您可以使用NodeJS运行该文件,以便在本地运行一个小型开发服务器来托管Cesium的副本。有关详细信息,请参阅Cesium Up and Running。
遵循此建议后,&#34;绿色框&#34;原始问题的代码运行得很好。