Как правильно включить внешнюю библиотеку caesiumjs через внешний cdn вместе с meteorjs?

Question

Я использую meteorjs, я хочу использовать caesiumjs. Мой код выглядит следующим образом:

В моем коде клиента в моем файле запуска 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);
});

В шаблон, который у меня есть, я включаю div для "caesiumContainer" и размещаю внутри 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 я просто включаю его в страницу index.html в каталоге "client" в теге "head" (это неправильно?):

  <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

Я не эксперт по метеорам, но укажу, что загрузка вашего скрипта асинхронная. Вам нужно подождать 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>