看過的知識不等于學會。唯有用心總結、系統記錄，并通過溫故知新反復實踐，才能真正掌握一二
作為一名摸爬滾打三年的前端開發，開源社區給了我飯碗，我也將所學的知識體系回饋給大家，助你少走彎路！
OpenLayers、Leaflet 快速入門 ，每周保持更新 2 個案例
Cesium 快速入門，每周保持更新 4 個案例

OpenLayers 快速入門（一）Map對象
OpenLayers 快速入門（二）Layer 對象
OpenLayers 快速入門（三）Source 對象補充
OpenLayers 快速入門（四）View 對象
OpenLayers 快速入門（五）Controls 對象
OpenLayers 快速入門（六）Interaction 對象
OpenLayers 快速入門（七）矢量數據
OpenLayers 快速入門（八）事件系統
OpenLayers 快速入門（九）Extent 介紹
OpenLayers 快速入門（十）常用 API 補充

矢量圖形

OpenLayers 中的矢量圖形，Feature（要素）和 Geometry（幾何）類構成了矢量圖形系統的基礎

Geometry 類詳解

Geometry 類表示地理空間中的形狀，是所有幾何圖形的基類。

類型一覽

幾何類型	描述	創建示例
Point	單點位置	new Point([x, y])
LineString	線（有序點序列）	new LineString([[x1,y1], [x2,y2]])
Polygon	多邊形（外環+內環）	new Polygon([[[x1,y1], [x2,y2], …]])
Circle	圓形	new Circle(center, radius)
MultiPoint	多點集合	new MultiPoint([[x1,y1], [x2,y2]])
MultiLineString	多線集合	new MultiLineString([[…], […]])
MultiPolygon	多面集合	new MultiPolygon([[…], […]])
GeometryCollection	混合幾何集合	new GeometryCollection([point, line])

公共方法

所有幾何類型都繼承自 ol/geom/Geometry 基類，具有以下公共方法

方法	描述	參數
clone()	創建幾何的深拷貝	-
getExtent()	獲取空間范圍	extent(可選)
getType()	獲取幾何類型	-
transform(source, destination)	轉換坐標系	sourceProj, destProj
applyTransform(transformFn)	應用自定義坐標變換	transformFn
simplify(tolerance)	簡化幾何	tolerance
rotate(angle, anchor)	旋轉幾何	angle(弧度), anchor(中心點)
scale(factorX, factorY, anchor)	縮放幾何	factorX, factorY, anchor
translate(deltaX, deltaY)	平移幾何	deltaX, deltaY
intersectsCoordinate(coordinate)	判斷坐標是否在幾何內	[x, y]
intersectsExtent(extent)	判斷是否與范圍相交	[minX, minY, maxX, maxY]
getCoordinates()	獲取坐標	-
setCoordinates(coordinates)	設置坐標	坐標數組

點（Point）

點幾何表示地球上的一個單一位置。

import Point from "ol/geom/Point";const point = new Point([116.4074, 39.9042]);
point.getCoordinates(); // [116.4074, 39.9042]point.transform("EPSG:4326", "EPSG:3857"); // [12245410.74511129, 3844357.763493687]

線（LineString）

線幾何表示由有序點序列組成的路徑。

特有方法：

• getLength()：返回線要素在投影平面上的長度
• getCoordinateAt(fraction)：根據參數 fraction（取值范圍 0 到 1）返回線要素上的坐標

import LineString from "ol/geom/LineString";const line = new LineString([[0, 0],[10, 10],
]);
line.getLength(); // 14.142135623730951
line.getCoordinateAt(0.5); // [5, 5]

面（Polygon）

面幾何表示由有序點序列組成的閉合區域。

特有方法：

• getArea()：返回面要素在投影平面上的面積
• getInteriorPoint()：返回面要素內部的一個點

import Polygon from "ol/geom/Polygon";const polygon = new Polygon([[[0, 0],[10, 0],[10, 10],[0, 10],[0, 0],],
]);
polygon.getArea(); // 100
polygon.getInteriorPoint().getCoordinates(); // [5, 5, 10]

圓（Circle）

圓形幾何，Circle 類表示一個圓形區域。

new Circle(center, radius)

• center：圓的中心點坐標，格式為 [x, y]
• radius：圓的半徑，單位與地圖投影單位相同

特有方法：

• getRadius()：返回圓要素的半徑
• getCenter()：返回圓要素的中心點
• setRadius(radius)：設置圓要素的半徑
• setCenter(center)：設置圓要素的中心點
• setCenterAndRadius(center, radius)：同時設置中心點和半徑

import Circle from "ol/geom/Circle";const circle = new Circle([0, 0], 5);circle.getRadius();circle.getCenter();circle.setRadius(10);circle.setCenter([1, 1]);circle.setCenterAndRadius([2, 2], 15);

多點（MultiPoint）

MultiPoint 類表示多個點的集合。

特有方法：

• getPoints()：返回多點要素的點數組
• getPoint(index)：返回指定索引的點
• appendPoint(point)：添加一個點到多點要素中

import MultiPoint from "ol/geom/MultiPoint";const multiPoint = new MultiPoint([[0, 0],[10, 10],
]);multiPoint.getPoints(); // [Point, Point]multiPoint.getPoint(0); // PointmultiPoint.appendPoint(new Point([20, 20]));

多線（MultiLineString）

MultiLineString 類表示多個線的集合。

特有方法：

• getLineStrings()：返回多線要素的線數組
• getLineString(index)：返回指定索引的線
• appendLineString(lineString)：添加一條線到多線要素中
• getLength()：返回多線要素的總長度

import MultiLineString from "ol/geom/MultiLineString";const multiLine = new MultiLineString([[[0, 0],[10, 10],],[[20, 20],[30, 30],],
]);multiLine.getLineStrings(); // [LineString, LineString]multiLine.getLineString(0); // LineStringmultiLine.appendLineString(new LineString([[40, 40],[50, 50],])
);

多面（MultiPolygon）

MultiPolygon 類表示多個面的集合。

特有方法：

• getPolygons()：返回多面要素的面數組
• getPolygon(index)：返回指定索引的面
• appendPolygon(polygon)：添加一個面到多面要素中
• getArea()：返回多面要素的總面積

import MultiPolygon from "ol/geom/MultiPolygon";const multiPoly = new MultiPolygon([[[[0, 0],[10, 0],[10, 10],[0, 10],[0, 0],],],[[[20, 20],[30, 20],[30, 30],[20, 30],[20, 20],],],
]);
multiPoly.getArea(); // 200
multiPoly.appendPolygon(new Polygon([[[5, 5],[15, 5],[15, 15],[5, 15],[5, 5],],])
);

集合（GeometryCollection）

GeometryCollection 類表示多個幾何要素的集合。

特有方法：

• getGeometries()：返回集合中的幾何要素數組
• setGeometries(geometries)：設置集合中的幾何要素數組
• getExtent()：返回集合中所有幾何要素的范圍

import GeometryCollection from "ol/geom/GeometryCollection";const collection = new GeometryCollection([new Point([0, 0]),new LineString([[0, 0],[10, 10],]),
]);
collection.getGeometries().length; // 2

Feature 類詳解

在 OpenLayers 中，一個 Feature 對象就表示一個地理要素。

核心概念

• Feature = Geometry + Attributes + Style
• 每個 Feature 代表地圖上的獨立實體（如建筑物、道路）
• 通過 Vector Layer 渲染到地圖

屬性

• 直接傳遞一個 Geometry 對象，或者傳入一個對象，存在geometry鍵，Geometry 會和這個鍵相關聯

// 示例1：直接傳入一個 Geometry 對象
const feature = new Feature(new Point([116.4074, 39.9042]));// 示例2：傳入一個對象，存在 geometry 鍵，Geometry 會和這個鍵相關聯
const feature = new Feature({geometry: new Point([0, 0]),name: "YGYong",
});

方法

• getGeometry()：獲取要素的幾何對象
• setGeometry(geometry)：設置要素的幾何對象
• get(key)：獲取要素的屬性值
• set(key, value)：設置要素的屬性值
• getProperties()：獲取要素的所有屬性
• setProperties(properties)：設置要素的所有屬性
• getGeometryName()：獲取要素的幾何類型名稱
• setGeometryName(name)：設置要素的幾何類型名稱
• getKeys()：獲取要素的所有屬性鍵
• getStyle()：獲取要素的樣式
• setStyle(style)：設置要素的樣式
• getId()：獲取要素的唯一標識符
• setId(id)：設置要素的唯一標識符，要素 ID 可以與 getFeatureById 方法一起使用

// 創建要素
const feature = new Feature({geometry: new Point([0, 0]),name: "YGYong",
});// 獲取name屬性
const name = feature.get("name");

// 設置ID
feature.setId("feature_001");// 獲取ID
const featureId = feature.getId();// 通過source獲取ID
const featureById = source.getFeatureById("feature_001");

// 設置幾何
feature.setGeometry(new Point([10, 20]));// 獲取幾何
const geom = feature.getGeometry();

// 設置屬性集合
feature.setProperties({name: "重要設施",type: "醫院",capacity: 500,contact: {phone: "123-456-7890",email: "contact@example.com",},
});// 獲取屬性集合
const properties = feature.getProperties();

// 設置固定樣式
feature.setStyle(new Style({image: new CircleStyle({radius: 10,fill: new Fill({ color: "red" }),}),})
);// 設置動態樣式函數
feature.setStyle((feature, resolution) => {const size = resolution < 100 ? 10 : 5;return new Style({image: new CircleStyle({radius: size,fill: new Fill({ color: "blue" }),}),});
});