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"
],scripts和
styles会被打包成
scripts.bundle.js和
styles.bundle.js文件加载到前台页面，而后就阔以正常使用这些第三方库了
理论上也可以在index.html中引入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;在styles.css中加入cesium viewer的样式
// styles.css
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
在xxx.component.html中加入cesium容器
在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容器
在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-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