Angular 中正确使用 cesium 开发地球插件的步骤

2020-5-27 Jon angular

  1. 安装 cesium 依赖
yarn add angular-cesium cesium
  1. 导入并添加 AngularCesiumModule 到你的应用模块
// Angular Cesium
import { AngularCesiumModule } from 'angular-cesium';
  // ....
@NgModule({
  // ...
  imports: [
	  // ...
	  AngularCesiumModule.forRoot()
  ]
  // ...
})
  1. 在 angular.json (角> = 6)文件添加 cesium 资源
// 注意:有多个环境变量时,都要配置上
"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"
]
  1. 在 main.ts 中添加配置 cesium url
Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/');
  1. 在 src 目录下面创建 typing.d.ts 文件添加
declare var Cesium;
  1. 在组件中使用 cesium
// 模板中
<ac-map></ac-map>
// ts 关键代码...
import { ViewerConfiguration } from 'angular-cesium';

@Component({
  // ...
  providers: [ViewerConfiguration],
})

// 地球相关
export class EarthComponent implements OnInit {
	constructor(private viewerConf: ViewerConfiguration) {
    // 将 your access token 填为打开 https://cesium.com/ion/ 然后注册一个新的账户生成的 access token 即可
    Cesium.Ion.defaultAccessToken = "your access token";
    this.viewerConf.viewerOptions = {
      animation: false, // 左下角指针动画
      timeline: false, // 时间轴
      baseLayerPicker: false, // 地图皮肤切换
      imageryProvider : Cesium.createWorldImagery({
        style : Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
      }),
      // selectedImageryProviderViewModel: 2,
      terrainProviderViewModels: [], // 皮肤中的 terrain 不显示
      fullscreenButton: false, // 全屏
      geocoder: true, // 搜索功能
      homeButton: true, // 重置地球
      infoBox: false,
      sceneModePicker: false, // 地球展开
      navigationHelpButton: false, // 帮助按钮
      navigationInstructionsInitiallyVisible: false,
      selectionIndicator: false,
      vrButton: false,
      automaticallyTrackDataSourceClocks: false,
      showRenderLoopErrors: false,
      // useDefaultRenderLoop: false,
      orderIndependentTranslucency: false,
      mapMode2D: Cesium.MapMode2D.ROTATE,
    };
    // Will be called on viewer initialistion
    viewerConf.viewerModifier = (viewer: any) => {
      // Remove default double click zoom behaviour
      viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    };
	}
}

至此就完成在 angular 中引入 cesium 插件了
推荐几个 cesium 链接
Cesium 官网
Cesium 中文社区
Cesium angular 英文文档

标签: angular cesium cesium插件 cesium使用 angular-cesium 地球

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap