Glittering's blog

Appearance

一、前言与定位 ​

在 WebGIS 开发领域，如果你需要构建 专业级 2D 地图应用，有一个非常成熟且强大的工具——OpenLayers。

OpenLayers 是一个开源的 JavaScript 地图库，主要用于构建 浏览器中的 2D GIS 应用。它支持丰富的 地图投影、矢量数据、OGC 服务（WMS/WFS/WMTS），是企业级 WebGIS 平台中非常常见的技术选型。

与其他地图库对比 ​

技术特点适用场景
OpenLayers功能最强，支持复杂 GISWebGIS 平台
Leaflet轻量、简单简单地图
Mapbox GL JS高性能矢量瓦片地图产品
CesiumJS3D 地球引擎数字孪生

简单总结：

OpenLayers = WebGIS 工程
Leaflet = 轻量地图
MapboxGL = 高性能地图
Cesium = 3D 地球

2025-2026 最新版本特点 ​

OpenLayers v10.x 带来了几个重要升级：

  • 完整 ESM 模块化
  • 更好的 Tree Shaking
  • WebGL 渲染增强
  • 更强的 矢量渲染性能
  • 更好的 移动端支持

学完后能做什么？ ​

掌握 OpenLayers 后，你可以开发：

  • 🌍 智慧城市 GIS 平台
  • 🚦 交通监控地图
  • 🏙 城市规划系统
  • 🛰 卫星影像浏览系统

目标读者：

零基础 GIS → 能独立开发 WebGIS 项目

二、开发环境搭建 ​

方法一：CDN（最简单） ​

适合快速体验。

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css" />

<script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"></script>

方法二：推荐方式（Vite + npm） ​

现代项目推荐使用：

bash
npm create vite@latest openlayers-demo
cd openlayers-demo

npm install
npm install ol

启动项目：

bash
npm run dev

方法三：ESM + importmap ​

现代浏览器方式：

html
<script type="importmap">
  {
    "imports": {
      "ol": "https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"
    }
  }
</script>

最小 HTML 模板 ​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>OpenLayers Demo</title>

    <link rel="stylesheet" href="node_modules/ol/ol.css" />

    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>

三、核心概念速览 ​

Map ​

Map 是地图对象。

javascript
import Map from "ol/Map";

const map = new Map();

View ​

View 控制地图视角。

javascript
import View from "ol/View";

const view = new View({
  center: [0, 0],
  zoom: 2,
});

Layer ​

地图图层。

常见类型：

  • TileLayer
  • VectorLayer
  • ImageLayer

示例：

javascript
import TileLayer from "ol/layer/Tile";

Source ​

数据来源。

例如：

OSM
XYZ
Vector
WMS

示例：

javascript
import OSM from "ol/source/OSM";

Feature ​

Feature 是 地图要素。

例如：

点
线
面
javascript
new Feature();

Geometry ​

几何对象：

Point
LineString
Polygon

Style ​

控制样式。

javascript
new Style({
  stroke: new Stroke({
    color: "red",
  }),
});

Interaction ​

交互系统：

Draw
Modify
Select

Overlay ​

用于 弹出框。

四、入门实战：5 分钟做第一个地图 ​

main.js ​

javascript
import Map from "ol/Map";
import View from "ol/View";

import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

import { fromLonLat } from "ol/proj";

const map = new Map({
  target: "map",

  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],

  view: new View({
    center: fromLonLat([121.47, 31.23]),
    zoom: 10,
  }),
});

运行后就能看到：

OpenStreetMap 地图

添加控件 ​

javascript
import { ScaleLine, MousePosition } from "ol/control";

添加：

javascript
map.addControl(new ScaleLine());
map.addControl(new MousePosition());

五、中级进阶 ​

5.1 多底图 ​

XYZ 示例：

javascript
import XYZ from "ol/source/XYZ";

new TileLayer({
  source: new XYZ({
    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
  }),
});

⚠ 注意 ​

国内地图需要 坐标系转换（GCJ02）。

5.2 WMS 服务 ​

javascript
import TileWMS from "ol/source/TileWMS";

new TileLayer({
  source: new TileWMS({
    url: "http://localhost:8080/geoserver/wms",

    params: {
      LAYERS: "topp:states",
    },
  }),
});

5.3 加载 GeoJSON ​

javascript
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
javascript
const source = new VectorSource({
  url: "data.geojson",

  format: new GeoJSON(),
});

5.4 样式系统 ​

javascript
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
javascript
const style = new Style({
  stroke: new Stroke({
    color: "blue",
    width: 2,
  }),
});

5.5 交互 ​

javascript
import Draw from "ol/interaction/Draw";
javascript
map.addInteraction(
  new Draw({
    type: "Polygon",
  }),
);

5.6 弹出框 Overlay ​

javascript
import Overlay from "ol/Overlay";
javascript
const popup = new Overlay({
  element: document.getElementById("popup"),
});

map.addOverlay(popup);

5.7 坐标系转换 ​

javascript
import { fromLonLat, toLonLat } from "ol/proj";
javascript
fromLonLat([116.39, 39.9]);

六、高级实战：城市 POI 管理系统 ​

项目目标：

城市 POI 管理平台

支持：

  • POI 展示
  • 聚类
  • 热力图
  • 查询
  • 编辑

项目结构 ​

project
 ├ index.html
 ├ main.js
 ├ style.css
 └ data
     └ poi.geojson

加载 POI 数据 ​

javascript
const source = new VectorSource({
  url: "data/poi.geojson",

  format: new GeoJSON(),
});

聚类 ​

javascript
import Cluster from "ol/source/Cluster";

const clusterSource = new Cluster({
  distance: 40,
  source: source,
});

热力图 ​

javascript
import HeatmapLayer from "ol/layer/Heatmap";
javascript
const heatLayer = new HeatmapLayer({
  source: source,
});

动画效果 ​

javascript
map.on("postrender", function () {
  // 动画逻辑
});

自定义控件 ​

javascript
class MyControl extends Control {
  constructor() {
    super({
      element: document.createElement("div"),
    });
  }
}

扩展能力 ​

可以接入：

REST API
WebSocket
实时数据

例如：

javascript
fetch("/api/poi");

七、性能优化与生产最佳实践 ​

1 瓦片缓存 ​

浏览器缓存：

TileCache

2 大量点位 ​

推荐：

Cluster
WebGLPoints

3 内存管理 ​

销毁地图：

javascript
map.setTarget(null);

4 移动端适配 ​

注意：

touch 事件
设备像素比

5 常见 Bug ​

白屏 ​

可能：

容器高度为0

坐标偏移 ​

原因：

GCJ02 / WGS84

跨域 ​

需要：

CORS

打包部署 ​

推荐：

  • Vite
  • Webpack
  • Rollup

八、学习资源 ​

官方文档：

  • OpenLayers 官方文档

示例库：

OpenLayers examples

GitHub：

github.com/openlayers/openlayers

进阶方向 ​

推荐学习：

OpenLayers + Vue
OpenLayers + React
OpenLayers + Three.js
OpenLayers + Deck.gl
OpenLayers + Cesium

九、结语 ​

通过本文，你已经掌握：

OpenLayers 基础
地图图层
矢量数据
交互系统
GIS 服务
项目架构
性能优化

学习路径建议：

OpenLayers 基础
↓
GIS 数据处理
↓
OGC 服务
↓
大型 GIS 平台

建议你：

  • Fork 官方 examples
  • 自己实现新功能
  • 将项目发布到 GitHub

最终，你将可以开发：

企业级 WebGIS 平台

Copyright © 2026