让Cesium,SystemJS和Angular2工作？

Question

有人有一个工作示例,其中SystemJS(不是Webpack)与Angular2(在TypeScript中,而不是Dart)与Cesium(npm)一起使用？

我知道cesiumjs网站上的这篇博文:https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

我喜欢作者的说法,"你不能简单地做一个require('cesium')." 该文章的问题在于它使用Webpack方式,而我没有.

无论哪种方式,我希望解决这个特定的错误(来自浏览器): Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define

这就是我所拥有的:

在我的systemjs.config.js档案中:

paths: {'npm:' :  'node_modules/'},
map: {
    // our app is within the dist folder
    app: 'dist',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    ...

    'require': 'npm:requirejs/require.js',
    'cesium': 'npm:cesium/Build/CesiumUnminified/Cesium.js',

    // Other packages
    ...
}

@Injectable() 例:

let Cesium = require('cesium');
import { Injectable } from '@angular/core';

@Injectable()

export class CesiumClock {
    private _start:any = Cesium.JulianDate.now();
    private _stop:any = Cesium.JulianDate.addHours(this._start,12,new Cesium.JulianDate());
    private _clock:any = new Cesium.Clock({
        startTime: this._start,
        stopTime: this._stop,
        currentTime: this._start,
        clockRange: Cesium.ClockRange.LOOP_STOP,
        mutliplier: 1,
        shouldAnimate: true
    });
}

最后,尝试使用我的'CesiumClock'的客户端代码,并在浏览器中给出错误(在转换后):

import { Component } from '@angular/core';
import { CesiumClock } from '../services/index';

@Component({
    moduleId: module.id.replace("/dist", "/app"),
    templateUrl: 'stuff.component.html',
    styleUrls: [
        'stuff.css',
        'node_modules/cesium/Build/Cesium/Widgets/widgets.css'
    ]
 })

export class StuffComponent {
    constructor(private _cesiumClock:CesiumClock) {}
}

更新:

基于@artem答案,我能够从浏览器中删除特定的'Error:(SystemJS)AMD'.但是现在,如果我想引用任何Cesium,这样new Cesium.Viewer(...)的Cesium对象只是一个空白的板岩.我看到的错误是

Cesium.Viewer is not a constructor

Answer 1

感谢@artem 让我看到了这一点。这是对我有用的最终答案：

systemjs.config.js（参见'cesium'下面packages并记下全局变量，CESIUM_BASE_URL）

(function(global){
    global.CESIUM_BASE_URL = './node_modules/cesium/Build/CesiumUnminified';
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        map: {
            ...
            // paths serve as alias
            'cesium': 'npm:cesium/Build/CesiumUnminified'
            ...
        },
        packages: {
            ...
            'cesium': {
                main: './Cesium.js',
                meta: {
                    '*.js': {
                        format: 'cjs'
                    }
                }
            },
            ...
        }
    });
})(this);

cesium.viewer.ts（注意组合的declare和import语句。声明允许打字稿编译器了解Cesium。导入语句是它在浏览器中工作。）：

declare var Cesium:any;
import 'cesium';

@Injectable()
export class CesiumViewer {
    ...
    this._viewer = new Cesium.Viewer(elem, {...});
    ...
}

我相信，这meta部分很有帮助，因为 Cesium 实际上需要大量 .js 文件。没有这个meta *.js属性，它只抓取Cesium.js，这是不够的，无论缩小与否，Source与否。

现在，我遇到了严重的 CSS 危机。Cesium 地图在浏览器中是一大堆垃圾。