Question

enter image description here 我得到了一个代码标注地球的代码，问题是当我尝试在本地服务器上运行它时，它会给我一个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）未捕获的SyntaxError：意外的输入结束

检查图像，为什么我在该行中收到该错误。它显示的错误与写在行中的错误无关。

Answer 1

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

在头部脚本中导入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小部件。 Sandcastle只是一个叠加层。 2）也应该解决这个问题，因为bucket.css会从你头脑中给出的Cesium_root开始寻找它。当然，前提是bucket.css位于正确的位置，即：Cesium_root/Apps/Sandcastle/templates。你应该在html头中纠正它。

3）我也有这个错误，我想它已经解决了2）如果我没有误会。

希望我足够清楚，它会对你有用。

javascript返回404错误和未捕获的引用

1 个答案: