Question

我正在使用meteorjs，我想使用cesiumjs。我的代码如下：

在我的启动js文件中的客户端代码中：

Meteor.startup(function() {
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');  // optional
  script.setAttribute('src', 'http://cesiumjs.org/releases/1.18/Build/Cesium/Cesium.js');
  document.getElementsByTagName('head')[0].appendChild(script);
});

在我的模板中，我包含了“cesiumContainer”的div，并且包含在mytemplate.js中：

Template.mytemplate.rendered = function() {
    var viewer = new Cesium.Viewer('cesiumContainer');
};

我得到的错误是：

Exception from Tracker afterFlush function:
debug.js:41 ReferenceError: Cesium is not defined
    at Template.mytemplate.rendered (mytemplate.js:4)

对于我的CSS，我只是将它包含在“head”标签中“client”目录下的index.html页面中（这样做不对吗？）：

  <style>
    @import url(http://cesiumjs.org/releases/1.18/Build/Cesium/Widgets/widgets.css);
    #cesiumContainer {
      width: 100%; height: 300px; margin: 0; padding: 0; overflow: hidden;
    }
  </style>

如何在myteorjs应用程序中正确包含此外部库？另外，如果我有一个显示在同一页面上的mytemplate2（我正在使用FlowLayout），我该如何正确访问“viewer”变量？是否习惯将其设置为“全局”VIEWER变量？

Answer 1

我不是流星专家，但我会指出你的脚本加载是异步的。在尝试访问Cesium之前，您需要等待您添加的onload标记触发script事件。另外，请使用document.head代替查找代码。

我希望您发布的样式内容能正常使用。如果更熟悉，也可以使用经典的link rel="stylesheet"。

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://cesiumjs.org/releases/1.18/Build/Cesium/Cesium.js');
document.head.appendChild(script);

script.onload = function() {
  document.getElementById('msg').innerHTML = 'Cesium version: ' + Cesium.VERSION;
}

// Cesium is undefined here.  Call your code from the onload handler above.

<p id="msg">Loading...</p>

通过外部cdn和meteorjs包含外部cesiumjs库的正确方法是什么？

1 个答案: