简介
ngx-cesium 是一个基于 CesiumJS 的 Angular 组件库，可以用于在 Angular 应用中实现 3D 地图可视化。它提供了一些常见的 3D 地图功能，如图层控制、相机控制、实体绘制等，并支持自定义扩展，可以满足不同需求的使用场景。
安装
安装 CesiumJS
ngx-cesium 是基于 CesiumJS 开发的，因此首先需要安装 CesiumJS。可以通过 npm 来安装 CesiumJS：
npm install cesium --save
安装 ngx-cesium
ngx-cesium 可以通过 npm 来安装：
npm install ngx-cesium --save
使用
引入 CesiumJS 和 ngx-cesium
在 app.module.ts 中引入 CesiumJS 和 ngx-cesium：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ -- -- -------- ------ - -- ------ ---- --------- -- -- ---------- ------ - --------------- - ---- ------------- ----------- ------------- --------------- -------- --------------- ------------------------- ----------- --------------- ---- ---------- --- ---------- --------------- -- ------ ----- --------- --
使用 ngx-cesium
在组件中使用 ngx-cesium，可以通过 ngxCesiumViewer 指令获取 CesiumViewer 实例，并在 onViewerReady 事件中进行初始化：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- --------------- - ---- -------------
------------
--------- -----------
--------- ----- --------------- -----------------------------------------------
--
------ ----- ------------ ---------- ------ -
------- ------- --------------
------------- --
---------- --
--------------------- ---------------- -
----------- - -------------------
-- ---
--------------
-
-------- -
-- ----
----- --------------- - --- -----------------------------------
---- ----------------------------------------------------------------------------------------------------
---
--------------------------------------------------------------
-- ------
----------------------------
------------ ------------------------------------- ------ ---------
------------ -
-------- ---------------------------
------ ---------------------------
----- --
--
---
-- ----
----- ------ - --- -----------------
--------- ------------------------------------- ------ -----
---------- -
------ ---------------------------
------ -----------------
------ ----
--
---
---------------------------------------------
-
-扩展
自定义图层
可以通过创建类似 CesiumJS 中的 ImageryProvider 或者 TerrainProvider 来自定义图层：
-- -------------------- ---- -------
------ - -- ------ ---- ---------
------ ----- ----------------- ---------- ---------------------- -
------- ----- -------
-------------------- ------------------------- -
--------- - ------------
-
--- ----- -
------ ----------
-
--- ------------ ------ -
------ ----
-
--- ------------- ------ -
------ ----
-
--- --------------- ------ -
------ ---
-
--- --------------- ------ -
------ --
-
--- --------------- ------------------------------ -
------ --- ---------------------------------
-
--- ------------ ---------------- -
------ ----------------------------
-
----------------- ------- -- ------- ------ -------- ------------- -
------ ----------
-
--------------- ------- -- ------- ------ -------- ------------------------- -
----- --- - ------------------ -- -------
------ --- ----------------- ------- -- -
----- --- - --- --------
---------- - -- -- -
-------------
--
----------- - -- -- -
------------- --- ---- ----- -- ---------
--
--------------- - ------------
------- - ----
---
-
------------- ------- -- ------- ------ -------- ------ -
----- --- - ------------------------------------------------- - - - --
------ ---------------------------------------
-
--------------- ----------------------------------------- -
------ --------------------
-
-
--------- ------------------------ -
---- -------
-可以通过 NgxCesiumImageryLayerDirective 来在 ngx-cesium 中使用自定义图层：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- --------------------- - ---- -------------
------ - ----------------- - ---- ------------------------
------------
--------- -----------
--------- ----- --------------- -----------------------------------------------
--
------ ----- ------------ ---------- ------ -
------- ------- --------------
------------- --
---------- --
--------------------- ---------------- -
----------- - -------------------
-- -------
----- ----------------- - --- ------------------- ---- ----------------------------- ---
----- ----- - --- -----------------------------------------
------------------------------------------------
-
-自定义指令
可以通过创建自定义指令来扩展 ngx-cesium 中的功能。例如创建一个自定义指令来绑定鼠标点击事件：
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ - ---- ----------------
------ - -- ------ ---- ---------
------ - --------------- - ---- ---------------------------------
------------
--------- -------------------
--
------ ----- ----------------------- -
-------- --------------- ------- ---- -- -----
--------- ---------------------- ----------------- - --- --------------------
------- ------- --------------
------------------- ---------------- ---------------- -
----------- - ----------------------------
--------------------------------------------------------------------------- ----------------------------------------
-
------- -------------- ---- -
------------------- -- ---------------------------
---------------------------------------
-
-可以在模板中使用自定义指令：
<div ngxCesiumViewer> <div ngxCesiumClick (ngxCesiumClickEmitter)="onMapClick($event)"></div> </div>
总结
ngx-cesium 是一个非常实用的 Angular 组件库，它使得在 Angular 应用中实现 3D 地图可视化变得容易而且优雅。通过本文介绍的安装和使用方法以及扩展方法，相信大家可以更快地上手并使用 ngx-cesium 来开发自己的 3D 地图应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671981e8991b448e36df