javascript - 通过外部 CDN 和 Meteorjs 包含外部 cesiumjs 库的正确方法是什么？

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>

如何正确地将这个外部库包含到我的meteorjs应用程序中？另外，如果我有一个显示在同一页面上的 mytemplate2(我正在使用 FlowLayout)，我如何正确访问“viewer”变量？习惯上只是将其设置为“全局”VIEWER 变量吗？

Answer 1

我不是 meteor 专家，但我会指出你的脚本加载是异步的。在尝试访问 Cesium 之前，您需要等待您添加的 script 标签触发 onload 事件。另外，使用 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>