openlayers知识体系
2026-09-22 09:37:51
OpenLayers
│
├── 一、GIS 基础 ⭐⭐⭐⭐⭐
│ │
│ ├── 1. 地理坐标基础
│ │ ├── 经度 Longitude
│ │ ├── 纬度 Latitude
│ │ ├── 高程
│ │ ├── [经度, 纬度]
│ │ └── 经纬度范围
│ │
│ ├── 2. 坐标系 CRS
│ │ ├── 地理坐标系
│ │ │ └── EPSG:4326
│ │ │
│ │ ├── 投影坐标系
│ │ │ └── EPSG:3857
│ │ │
│ │ ├── Web Mercator
│ │ ├── WGS84
│ │ ├── GCJ-02
│ │ └── BD-09
│ │
│ ├── 3. 地图投影 Projection
│ │ ├── 经纬度 → 平面坐标
│ │ ├── EPSG:4326 → EPSG:3857
│ │ ├── fromLonLat()
│ │ ├── toLonLat()
│ │ └── transform()
│ │
│ ├── 4. 地理数据
│ │ ├── 点 Point
│ │ ├── 线 Line
│ │ ├── 面 Polygon
│ │ └── 属性数据
│ │
│ └── 5. GIS 数据格式
│ ├── GeoJSON ⭐
│ ├── KML
│ ├── GPX
│ ├── TopoJSON
│ └── MVT
│
│
├── 二、OpenLayers 核心架构 ⭐⭐⭐⭐⭐
│ │
│ ├── Map
│ │ ├── target
│ │ ├── layers
│ │ ├── view
│ │ ├── controls
│ │ └── interactions
│ │
│ ├── View
│ │ ├── center
│ │ ├── zoom
│ │ ├── resolution
│ │ ├── rotation
│ │ ├── projection
│ │ ├── minZoom
│ │ ├── maxZoom
│ │ └── extent
│ │
│ ├── Layer
│ │ ├── TileLayer
│ │ ├── VectorLayer
│ │ ├── VectorTileLayer
│ │ ├── ImageLayer
│ │ └── Group
│ │
│ ├── Source
│ │ ├── TileSource
│ │ ├── XYZ
│ │ ├── OSM
│ │ ├── TileWMS
│ │ ├── WMTS
│ │ ├── VectorSource
│ │ ├── VectorTileSource
│ │ └── ImageWMS
│ │
│ ├── Feature
│ │ ├── id
│ │ ├── geometry
│ │ └── properties
│ │
│ └── Geometry
│ ├── Point
│ ├── LineString
│ ├── Polygon
│ ├── Circle
│ ├── MultiPoint
│ ├── MultiLineString
│ └── MultiPolygon
│
│
├── 三、地图底图 ⭐⭐⭐⭐⭐
│ │
│ ├── XYZ
│ │ ├── 瓦片
│ │ ├── z
│ │ ├── x
│ │ └── y
│ │
│ ├── OSM
│ │
│ ├── 天地图 ⭐⭐⭐⭐⭐
│ │ ├── 矢量底图
│ │ ├── 影像底图
│ │ ├── 地形底图
│ │ ├── 中文注记
│ │ └── WMTS
│ │
│ ├── 高德
│ │
│ ├── 百度
│ │
│ └── 自定义地图服务
│
│
├── 四、瓦片地图 Tile ⭐⭐⭐⭐⭐
│ │
│ ├── Tile
│ │ ├── TileGrid
│ │ ├── TileSize
│ │ ├── Zoom
│ │ └── Resolution
│ │
│ ├── XYZ
│ │ ├── {z}
│ │ ├── {x}
│ │ └── {y}
│ │
│ ├── TMS
│ │
│ ├── WMTS ⭐⭐⭐⭐
│ │ ├── Layer
│ │ ├── MatrixSet
│ │ ├── TileMatrix
│ │ ├── TileRow
│ │ └── TileCol
│ │
│ └── Tile Cache
│
│
├── 五、矢量数据 Vector ⭐⭐⭐⭐⭐
│ │
│ ├── VectorLayer
│ │
│ ├── VectorSource
│ │
│ ├── Feature
│ │
│ ├── Geometry
│ │ ├── Point
│ │ ├── LineString
│ │ ├── Polygon
│ │ ├── MultiPoint
│ │ ├── MultiLineString
│ │ └── MultiPolygon
│ │
│ ├── Feature 属性
│ │ ├── get()
│ │ ├── set()
│ │ ├── getProperties()
│ │ └── setProperties()
│ │
│ └── Feature 集合
│ ├── addFeature()
│ ├── removeFeature()
│ └── getFeatures()
│
│
├── 六、GeoJSON ⭐⭐⭐⭐⭐
│ │
│ ├── GeoJSON 基础
│ │ ├── Feature
│ │ ├── FeatureCollection
│ │ ├── Point
│ │ ├── LineString
│ │ └── Polygon
│ │
│ ├── OpenLayers Format
│ │ └── ol/format/GeoJSON
│ │
│ ├── readFeature()
│ ├── readFeatures()
│ ├── writeFeature()
│ ├── writeFeatures()
│ │
│ ├── dataProjection
│ └── featureProjection
│
│
├── 七、样式 Style ⭐⭐⭐⭐⭐
│ │
│ ├── Style
│ │
│ ├── Fill
│ │ ├── Color
│ │ └── Opacity
│ │
│ ├── Stroke
│ │ ├── Color
│ │ ├── Width
│ │ ├── LineDash
│ │ └── LineCap
│ │
│ ├── Icon
│ │ ├── src
│ │ ├── scale
│ │ ├── anchor
│ │ └── rotation
│ │
│ ├── Text
│ │ ├── text
│ │ ├── font
│ │ ├── fill
│ │ └── stroke
│ │
│ ├── Circle
│ │
│ ├── 根据 Feature 设置样式
│ │ └── style(feature)
│ │
│ └── 根据属性动态样式
│
│
├── 八、地图交互 Interaction ⭐⭐⭐⭐⭐
│ │
│ ├── 点击
│ │ ├── click
│ │ ├── singleclick
│ │ └── dblclick
│ │
│ ├── Select
│ │ ├── 点击选择
│ │ ├── hover
│ │ └── 条件过滤
│ │
│ ├── Draw ⭐⭐⭐⭐⭐
│ │ ├── Point
│ │ ├── LineString
│ │ ├── Polygon
│ │ ├── Circle
│ │ └── GeometryCollection
│ │
│ ├── Modify
│ │ ├── 修改点
│ │ ├── 修改线
│ │ └── 修改面
│ │
│ ├── Snap
│ │
│ ├── Translate
│ │
│ └── DragPan
│
│
├── 九、地图事件 ⭐⭐⭐⭐
│ │
│ ├── Map Events
│ │ ├── click
│ │ ├── singleclick
│ │ ├── dblclick
│ │ ├── pointermove
│ │ ├── pointerdrag
│ │ └── moveend
│ │
│ ├── View Events
│ │ ├── change:center
│ │ ├── change:resolution
│ │ └── change:rotation
│ │
│ └── Layer Events
│
│
├── 十、地图控件 Controls ⭐⭐⭐
│ │
│ ├── Zoom
│ ├── ZoomSlider
│ ├── ZoomToExtent
│ ├── FullScreen
│ ├── MousePosition
│ ├── ScaleLine
│ ├── Rotate
│ └── OverviewMap
│
│
├── 十一、Overlay ⭐⭐⭐⭐
│ │
│ ├── Overlay
│ │
│ ├── Popup
│ │
│ ├── Tooltip
│ │
│ ├── 信息窗口
│ │
│ └── DOM 与地图坐标绑定
│
│
├── 十二、GIS 服务 ⭐⭐⭐⭐⭐
│ │
│ ├── OGC
│ │ ├── WMS
│ │ ├── WMTS
│ │ ├── WFS
│ │ └── WCS
│ │
│ ├── WMS
│ │ ├── TileWMS
│ │ └── ImageWMS
│ │
│ ├── WMTS
│ │
│ ├── WFS
│ │ └── 矢量数据
│ │
│ └── REST GIS API
│
│
├── 十三、GeoServer ⭐⭐⭐⭐⭐
│ │
│ ├── Workspace
│ ├── Store
│ ├── Layer
│ ├── Layer Group
│ │
│ ├── WMS
│ ├── WMTS
│ ├── WFS
│ │
│ └── OpenLayers
│ └── GeoServer
│
│
├── 十四、矢量瓦片 Vector Tile ⭐⭐⭐⭐
│ │
│ ├── VectorTileLayer
│ ├── VectorTileSource
│ ├── MVT
│ ├── Mapbox Vector Tile
│ ├── PBF
│ │
│ └── 大规模矢量数据
│
│
├── 十五、数据加载 ⭐⭐⭐⭐
│ │
│ ├── Ajax / Fetch
│ ├── REST API
│ ├── GeoJSON
│ ├── WFS
│ ├── WMS
│ ├── WMTS
│ ├── MVT
│ └── 自定义数据
│
│
├── 十六、空间分析 ⭐⭐⭐
│ │
│ ├── Distance
│ ├── Area
│ ├── Length
│ ├── Buffer
│ ├── Intersection
│ ├── Contains
│ ├── Within
│ ├── Extent
│ └── Turf.js
│
│
├── 十七、地图导航 ⭐⭐⭐⭐
│ │
│ ├── setCenter()
│ ├── setZoom()
│ ├── animate()
│ ├── fit()
│ ├── pan
│ ├── zoom
│ ├── rotation
│ └── extent
│
│
├── 十八、地图测量 ⭐⭐⭐⭐
│ │
│ ├── 测距
│ │ └── LineString
│ │
│ ├── 测面积
│ │ └── Polygon
│ │
│ ├── 测角度
│ │
│ └── 坐标显示
│
│
├── 十九、地图状态管理 ⭐⭐⭐
│ │
│ ├── Layer 状态
│ ├── Feature 状态
│ ├── View 状态
│ ├── 当前选中 Feature
│ ├── 当前地图中心
│ └── 当前缩放级别
│
│
├── 二十、性能优化 ⭐⭐⭐⭐
│ │
│ ├── Tile Cache
│ ├── Vector Tile
│ ├── Feature 数量
│ ├── Cluster
│ ├── WebGL Layer
│ ├── 减少 DOM
│ ├── 按需加载
│ ├── 空间范围加载
│ └── 大数据量渲染
│
│
├── 二十一、Cluster 聚合 ⭐⭐⭐
│ │
│ ├── Cluster Source
│ ├── 点聚合
│ ├── 聚合数量
│ ├── 聚合样式
│ └── 聚合展开
│
│
├── 二十二、WebGL ⭐⭐⭐⭐
│ │
│ ├── WebGLPoints
│ ├── WebGLTile
│ ├── GPU 渲染
│ ├── 大量 Feature
│ └── OpenLayers + WebGL
│
│
├── 二十三、三维 GIS ⭐⭐⭐
│ │
│ ├── OpenLayers 主要是 2D
│ │
│ ├── Cesium
│ │ ├── 3D Globe
│ │ ├── 3D Tiles
│ │ ├── Terrain
│ │ └── Entity
│ │
│ └── OpenLayers + Cesium
│
│
└── 二十四、工程化 ⭐⭐⭐⭐
│
├── Vue + OpenLayers
├── React + OpenLayers
├── TypeScript
├── Vite
├── 图层管理
├── 地图组件封装
├── GIS 工具函数
├── 坐标转换工具
├── Feature 管理
├── 服务请求封装
└── 大型 GIS 项目架构
核心部分：
OpenLayers
│
┌────────────────┼────────────────┐
↓ ↓ ↓
Map 数据 交互
│ │ │
↓ ↓ ↓
View Layer Event
│
┌──────┴──────┐
↓ ↓
TileLayer VectorLayer
│ │
↓ ↓
Source Source
│ │
┌────┴────┐ ↓
↓ ↓ Feature
XYZ WMTS │
Geometry
│
┌────────────┼───────────┐
↓ ↓ ↓
Point LineString Polygon