1.9 Angular + Cesium

1 安装cesium

cmd 进入项目

cnpm install --save cesium

cnpm install @types/cesium --save

2 配置angular.json

修改部分

 "assets": [

              "src/favicon.ico",

              "src/assets",

              {

                "glob": "**/*",

                "input": "node_modules/cesium/Build/Cesium",

                "output": "src/assets/cesium"

              }

            ],

            "styles": [

              "src/theme.less",

              "node_modules/cesium/Build/Cesium/Widgets/widgets.css",

              "src/styles.scss"

            ],

            "scripts": [

              "node_modules/cesium/Build/Cesium/Cesium.js"

            ]

3 main.ts配置

window['CESIUM_BASE_URL'] = 'src/assets/cesium/'; //新增

platformBrowserDynamic().bootstrapModule(AppModule)

  .catch(err => console.error(err));

4 html页面

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

5 ts文件

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

declare var Cesium:any;

@Component({

  selector: 'app-three-dmap',

  templateUrl: './three-dmap.component.html',

  styleUrls: ['./three-dmap.component.scss']

})

export class ThreeDMapComponent implements OnInit {

  constructor() { }

  ngOnInit(){

    // const viewer = new Cesium.Viewer('cesiumContainer');

    var viewer = new Cesium.Viewer('cesiumContainer',{

      geocoder: false,

      homeButton: false,

      sceneModePicker: false,

      baseLayerPicker: false,

      navigationHelpButton: false,

      animation: false,

      timeline: false,

      fullscreenButton: false,

      vrButton: false,

      shouldAnimate :false,   //控制模型动画

      // selector:false,

      // selection:false,

      selectionIndicator:false,

      infoBox:false

    });

    viewer.clock.multiplier = 200;//速度

    viewer.clock.shouldAnimate = true;

    var previousTime = viewer.clock.currentTime.secondsOfDay;

    function onTickCallback() {

    var spinRate = 1;

    var currentTime = viewer.clock.currentTime.secondsOfDay;

    var delta = (currentTime - previousTime) / 1000;

    previousTime = currentTime;

    viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);

    }

    viewer.clock.onTick.addEventListener(onTickCallback);

    //监听点击事件

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    handler.setInputAction(function(click) {

    viewer.clock.onTick.removeEventListener(onTickCallback);

    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

  }

}

6 效果

image