cgeo 是一个基于 JavaScript 的库，用于在地图上绘制各种几何形状，比如点、线、多边形等等。该库可以与许多流行的地图 API 配合使用，如 Google Maps API、OpenLayers 等等。cgeo 不仅易于使用，而且功能丰富，能够满足许多开发者的需求。
安装与使用
cgeo 是一个 npm 包，可以通过以下命令安装：
npm install cgeo
在使用 cgeo 之前，需要先引入该库，如下所示：
import cgeo from 'cgeo';
接着，我们需要定义地图和绘制控件：
const map = new google.maps.Map(document.getElementById('map'));
const drawingManager = new cgeo.DrawingManager(map);在定义地图和绘制控件后，我们需要注册绘制完成事件，并在该事件中获取绘制的图形对象：
drawingManager.addListener('overlaycomplete', (event) => {
const overlay = event.overlay;
console.log(overlay); // 即为绘制的图形对象
});cgeo 中的图形对象
cgeo 中的图形对象有多种类型，包括点、线、面等。下文将逐一说明。
点
绘制点时，需要构建一个 MarkerOptions 对象：
const markerOptions = {
position: event.latLng, // 点的位置
icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png', // 点的图标
map // 点位于哪个地图上
};
const marker = new cgeo.Marker(markerOptions);线
绘制线时，需要构建一个 PolylineOptions 对象：
-- -------------------- ---- -------
----- --------------- - -
----- ----------- -- ------------------- ------ --
--------- ----- -- -----------
------------ ---------- -- ----
-------------- ---- -- -----
------------- -- -- ----
--- -- --------
--
----- -------- - --- -------------------------------多边形
绘制多边形时，需要构建一个 PolygonOptions 对象：
-- -------------------- ---- -------
----- -------------- - -
------ ------------ -- -------------------------
------------ ---------- -- -----
-------------- ---- -- ------
------------- -- -- -----
---------- ---------- -- --------
------------ ----- -- ---------
--- -- ----------
--
----- ------- - --- -----------------------------完整代码示例
下面是一个完整的示例，其中使用了 Google Maps API：
-- -------------------- ---- -------
--------- -----
------
------
----------- ------------
----- ----------------
------ ----------------
---- -
------ -----
------- ------
-
--------
-------
------
---- ---------------
------- ------------------------------------------------------------------------
------- -------------------------------------------------------
------- -----------------------
----- --- - --- ----------------------------------------------- -
------- ----- ----------- ---- -------------
----- --
---
----- -------------- - --- -------------------------
--------------------------------------------- ------- -- -
----- ------- - --------------
--------------------- -- ---------
---
---------
-------
-------结语
cgeo 是一个非常好用的 JavaScript 库，可以大大简化地图上各种几何图形的绘制。本文介绍了 cgeo 的安装与使用方法，以及 cgeo 中的图形对象类型和构建方式。希望读者可以根据本文的教程自己动手尝试一下，在实践中更好地理解 cgeo 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2fdf