angular集成Cesium

第一种方案

安装cesium

$ npm install --save cesium

将cesium的assets、script和css配置到.angular-cli.json文件

    "assets": [ // ...
      { "glob": "**/*", "input": "../node_modules/cesium/Build/Cesium", "output": "./assets/cesium" }
     ],
    "styles": [ // ...
      "../node_modules/cesium/Build/Cesium/Widgets/widgets.css"
    ],
    "scripts": [ // ...
      "../node_modules/cesium/Build/Cesium/Cesium.js"
    ],

在.angular-cli.json文件中加入cesium.js是引入全局js代码的方法。angular-cli的项目使用webpack来将模块打包，我们这里配置的 scripts和 styles会被打包成 scripts.bundle.js和 styles.bundle.js文件加载到前台页面，而后就阔以正常使用这些第三方库了

理论上也可以在index.html中引入cesium.js，比如：

<script type="text/javascript" src="../node_modules/cesium/build/cesium.js"/>

但是cesium.js文件的位置需要注意，网站运行时的根目录是 src目录，所以获取不到与其处在同一目录的 node_modules目录下的cesium.js文件

angular-form/
    |- src/
    |   |- app/
    |   |- index.html
    |   ...
    |- node_modules
    |   |- cesium/
    |   |- bootstrap/
    |   ...

此外要注意， angular-cli.json文件中配置的路径时 相对于网站根目录的路径，因此不能这样：

"scripts": [
            "node_modules/cesium/build/cesium.js"          
        ],

而应当这样：

"scripts": [
            "../node_modules/cesium/build/cesium.js          
        ],

在main.ts中的启动代码前加入CESIUM_BASE_URL

  // ...
  window['CESIUM_BASE_URL'] = '/assets/cesium';
  platformBrowserDynamic().bootstrapModule(AppModule);

在typing.d.ts文件中加入Cesium对象声明

declare var Cesium;

也可以下载cesium.d.ts文件,http://definitelytyped.org/网站和https://github.com/Microsoft/types-publisher网站上暂时没有，github上搜索angular cesium，在开源项目中有这个文件。

在styles.css中加入cesium viewer的样式

// styles.css
html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

在xxx.component.html中加入cesium容器

<div id="cesiumContainer"></div>

在xxx.component.ts中加入cesium的js代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  ngOnInit() {
    console.log("-----------------ngOnInit-------------------");
    var viewer = new Cesium.Viewer('cesiumContainer');    
  }
}

另一种方案

在assets目录中放置cesium的js代码

在xxx.component.html中加入cesium容器

<div id="cesiumContainer"></div>

在xxx.component.ts中载入cesium的js代码

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-cesium-map',
  templateUrl: './cesium-map.component.html',
  styleUrls: ['./cesium-map.component.css']
})
export class CesiumMapComponent implements OnInit {

  ngOnInit() {
    var script = document.createElement('script');
    script.src = './assets/js/flight.js';
    document.body.appendChild(script);    
   }
}

这种方案不是angular的原生风格！

angular-cli修改IP和端口号

默认情况下angular-cli生成的项目绑定localhost，只能在本机浏览器中访问，需要修改IP和端口号。

方法一：修改配置文件node_modules/angular-cli/lib/config/schema.json

default值就是默认的端口:4200

"serve": {
    "description": "Properties to be passed to the serve command",
    "type": "object",
    "properties": {
      "port": {
        "description": "The port the application will be served on",
        "type": "number",
        "default": 4200
      },
      "host": {
        "description": "The host the application will be served on",
        "type": "string",
        "default": "localhost"
      }
    }
  }
}

方法二：命令行修改端口号

ng server --port 4201

(ng serve --host localhost --port 4201)

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153