Drupal中的Cesium:在Drupal中的页面上加载查看器

Question

重要说明 在正常项目中实例化Cesium对象时,它没有任何以下划线为前缀的属性(_dataSourceCollection,_dataSourceDisplay等).但是,在Drupal中实例化时,除了常用属性外,还在对象上设置了大约40-45个属性(所有属性都带有下划线).这发生在Drupal 7或8中,虽然我不确定这是否与我遇到的问题有关,但这是一个明显的差异因此我认为它应该被分享.

我已将Cesium库添加到Drupal项目中,方法是将文件放在sites/all/libraries/cesium/Cesium.js以及Assets和Widgets文件夹中,然后在自定义模块中调用hook_library_info

function cesium_library_info() {
  $libraries['cesium'] = array(
    'files' => array(
      'js' => 'Cesium.js',
    ),
    'path' => 'js',
    'library path' => libraries_get_path('cesium'),
    'version' => '1'
  );
  return $libraries;
}

然后我使用hook_menu返回以下页面回调:

function cesium_page()  {
  drupal_add_js(libraries_get_path('cesium') . '/Cesium.js');
  drupal_add_js(drupal_get_path('module', 'cesium') . '/js/mCesium.js');
  drupal_add_css(libraries_get_path('cesium') . '/Widgets/widgets.css');

  $page = array();

  $page['ces-container'] = array(
    '#prefix' => '<div id="myApp-cesium">',
    '#suffix' => '</div>',
    '#markup' => '<h1>Welcome to Cesium!',
  );
  return $page;
}

mCesium.js包含从Drupal.behaviors中调用Cesium的代码,用于将Viewer附加到我的#myApp-cesium元素.

Drupal.behaviors.cesium = {
  attach: function (context, settings) {

    var viewer = new Cesium.Viewer('myApp-cesium', {
        imageryProvider : new Cesium.createOpenStreetMapImageryProvider({
            url : 'http://thebestmaptiles.map.tile.com/',
        }),
        baseLayerPicker : false
    });
  }
}

这成功地在Drupal页面的主容器内的相应元素上创建了查看器.但是,查看器完全没有内容,并且在控制台中发现以下错误:

Cesium.js:169769 Uncaught TypeError: this._dataSourceAdded is not a function

"this"的值不为null或未定义,但似乎是建议未完全形成的Viewer对象的结构.此对象缺少所有以下划线为前缀的属性,例如_dataSourceAdded.

有没有人知道为什么会这样？

最后,就在发布之前,我看到有一个针对Cesium的Drupal模块,它在hook_libraries_info_alter中发生了一些有趣的事情,其中​​Cesium代码库被保存为public://cesium_base_url.js.

请参阅https://www.drupal.org/project/cesium上的 cesium.module中的第50-59行

 47 function cesium_libraries_info_alter(&$libraries) {                                                                             
 48   $library = libraries_detect('cesium');                                                                                        
 49                                                                                                                                 
 50   if ($library['installed'] == TRUE) {                                                                                          
 51     $data = "var CESIUM_BASE_URL = '" . url($library['library path'] . '/Build/Cesium/') . "';";                                
 52     $jsfile = file_unmanaged_save_data($data, 'public://cesium_base_url.js', FILE_EXISTS_REPLACE);                              
 53                                                                                                                                 
 54     $libraries['cesium']['files']['js'][$jsfile] = array(                                                                       
 55       'data' => $jsfile,                                                                                                        
 56       'weight' => 0,                                                                                                            
 57       'group' => JS_LIBRARY,                                                                                                    
 58     );                                                                                                                          
 59   }                                                                                                                             
 60 }            

我不确定这种方法是否有任何关系,但我认为值得一提的是它的可能性.在任何情况下,我还应该提到我尝试了一个新项目来测试该模块是否可行,但我相信下载库的代码必须更新.

编辑

我还想提一下,我在Drupal 7和Drupal 8上都以相同的错误复制了相同的情况.

下面是代码,作为加载而不Drupal.behaviors,其中,再一次,与incompetely加载Cesium.Viewer对象创建了同样的情况:

setTimeout(function() {

    var viewer = new Cesium.Viewer('myApp-cesium', {
        imageryProvider : new Cesium.createOpenStreetMapImageryProvider({
            url : 'http://thebestmaptiles.map.tile.com/',
        }),
        baseLayerPicker : false
    });
}, 5000);

另一个更新:

将javascript放在jQuery包装器中似乎没有任何好处.

我还试图看看在hook_init()函数中添加库是否有帮助,但事实并非如此.

另一个更新:

值得注意的差异 - HelloWorld App与Drupal中的查看器对象

观测环境变量:

我在Cesium.js的Viewer函数中发送"this"到console.log,在设置了所有私有属性之后(属性前缀为_underscore),并且在调用Viewer对象上的_dataSourceAdded函数之前(行169769)在我修改过的,未经过玷污的Cesium.js)

console.log(this);
var dataSourceLength = dataSourceCollection.length;
for (var i = 0; i < dataSourceLength; i++) {
    this._dataSourceAdded(dataSourceCollection, dataSourceCollection.get
   (i));          

以下是主要区别:

HelloWorld App - 41个属性(根据console.log(Object.keys(this).length);)

• 被认为是"观察者"对象

• 循环"关键在obj"找到61个属性

• 其中53个是私人的

Drupal App - 41个属性(Object.keys(this).length))

• 被认为是"对象"对象

• 循环"关键在obj"找到61个属性

• 其中0个是私人的

Answer 1

上面的代码最初有这一行来创建一个查看器：

var viewer = Cesium.Viewer('myApp-cesium',

它缺少new关键字：

var viewer = new Cesium.Viewer('myApp-cesium',

需要使用该new关键字来正确构建 Cesium 查看器的新实例。有关new具体作用的详细信息，请参阅Stack Overflow 上的这个答案。