1

在此处输入图像描述我得到了一个标记地球的代码，问题是当我尝试在本地服务器上运行它时，它给了我一个 404 错误和未捕获的参考错误。代码如下：

<html>
<head>
<style>
    @import url(bucket.css);
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"       type="text/javascript"></script> 
<script src="require.js" data-main="main"></script>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
require(['Cesium', 'Button'], function(Cesium, Button)
{
    "use strict";

    function addLabel(scene, ellipsoid) {
        Sandcastle.declare(addLabel);   // For highlighting in Sandcastle.
        var labels = new Cesium.LabelCollection();
        labels.add({
            position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.10, 39.57)),
            text     : 'Philadelphia'
        });
        scene.getPrimitives().add(labels);
    }

    function setLabelFont(scene, ellipsoid) {
        Sandcastle.declare(setLabelFont);   // For highlighting in Sandcastle.
        var labels = new Cesium.LabelCollection();
        labels.add({
            position  : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.10, 39.57)),
            text      : 'Philadelphia',
            // CSS font-family
            font      : '24px Helvetica',
            fillColor : { red : 0.0, blue : 1.0, green : 1.0, alpha : 1.0 },
            outlineColor : { red : 0.0, blue : 0.0, green : 0.0, alpha : 1.0 },
            outlineWidth : 2,
            style : Cesium.LabelStyle.FILL_AND_OUTLINE
        });
        scene.getPrimitives().add(labels);
    }

    function setLabelProperties(scene, ellipsoid) {
        Sandcastle.declare(setLabelProperties); // For highlighting in Sandcastle.
        var labels = new Cesium.LabelCollection();
        var l = labels.add({
            position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.10, 39.57)),
            text     : 'Philadelphia'
        });

        l.setPosition(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.10, 39.57, 300000.0)));
        l.setScale(2.0);
        scene.getPrimitives().add(labels);
    }

    function addLabelsInReferenceFrame(scene, ellipsoid) {
        Sandcastle.declare(addLabelsInReferenceFrame);  // For highlighting in Sandcastle.
        var center = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.59777, 40.03883));
        var labels = new Cesium.LabelCollection(undefined);
        labels.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
        labels.add({
            position : new Cesium.Cartesian3(0.0, 0.0, 0.0),
            text     : 'Center'
        });
        labels.add({
            position : new Cesium.Cartesian3(1000000.0, 0.0, 0.0),
            text     : 'East'
        });
        labels.add({
            position : new Cesium.Cartesian3(0.0, 1000000.0, 0.0),
            text     : 'North'
        });
        labels.add({
            position : new Cesium.Cartesian3(0.0, 0.0, 1000000.0),
            text     : 'Up'
        });
        scene.getPrimitives().add(labels);
    }

    function createButtons(widget) {
        var ellipsoid = widget.centralBody.getEllipsoid();
        var scene = widget.scene;
        var primitives = scene.getPrimitives();

        new Button({
            label: 'Add label',
            onClick: function() {
                primitives.removeAll();
                addLabel(scene, ellipsoid);
                Sandcastle.highlight(addLabel);
            }
        }).placeAt('toolbar');

        new Button({
            label: 'Set font',
            onClick: function() {
                primitives.removeAll();
                setLabelFont(scene, ellipsoid);
                Sandcastle.highlight(setLabelFont);
            }
        }).placeAt('toolbar');

        new Button({
            label: 'Set properties',
            onClick: function() {
                primitives.removeAll();
                setLabelProperties(scene, ellipsoid);
                Sandcastle.highlight(setLabelProperties);
            }
        }).placeAt('toolbar');

        new Button({
            label: 'Add labels in reference frame',
            onClick: function() {
                primitives.removeAll();
                addLabelsInReferenceFrame(scene, ellipsoid);
                Sandcastle.highlight(addLabelsInReferenceFrame);
            }
        }).placeAt('toolbar');
    }

    var widget = new Cesium.CesiumWidget('cesiumContainer');

    createButtons(widget);
    addLabel(widget.scene, widget.centralBody.getEllipsoid());

    Sandcastle.finishedLoading();
});

</script>
</body>
</html>

我得到的错误如下：

1)GET http://localhost/Source/Widgets/CesiumWidget/CesiumWidget.css 404 (Not Found) 

2) Uncaught ReferenceError: require is not defined

有人可以告诉我有什么问题吗？我不明白代码中调用 CesiumWidget.css 文件的位置。因此，如果有人可以指导我，那将很有帮助。

我尝试添加 require js 。但现在它又给了我一个错误。

3) Uncaught SyntaxError: Unexpected end of input

检查图像，为什么我在该行中收到该错误。它显示的错误与该行中写入的内容没有任何关系。

4

1 回答 1

1

2）我有同样的问题。事实上，您不必完全复制和粘贴 Sandcastle 实时编码界面中给出的示例。你应该 ：

  • 在 head 脚本中导入 Cesium.js 和 Sandcastle：

    <script type="text/javascript" src="Cesium_root/Build/Cesium/Cesium.js"></script>
<script type="text/javascript" src="Cesium_root/Apps/Sandcastle/Sandcastle-header.js"></script>

    Cesium_root可以是本地或远程位置，但如果您开始大量使用它，我建议您在服务器上安装 Cesium。

  • 只需将大括号之间的代码放入您的正文脚本中，从"use script;"到Sandcastle.finishedLoading();

1) 是 bucket.css 导入了缺少的 css，因为它使用它来显示 Cesium 小部件。沙堡只是一个覆盖。2) 也应该解决这个问题，因为 bucket.css 会从你给他的 Cesium_root 开始寻找它。当然，前提是 bucket.css 在他的正确位置，即：Cesium_root/Apps/Sandcastle/templates。您应该在 html 头中更正它。

3）我也有这个错误，如果我没记错的话，我想它是由 2）解决的。

希望我足够清楚，并且它会为你工作。

于 2014-05-14T15:38:17.667 回答