4.1 二维 Web GIS 框架

4.1 二维 Web GIS 框架

本节摘要：Web 地图开发靠框架。本节讲 OpenLayers、Leaflet、Mapbox GL JS 等主流二维框架——选对框架做 Web 地图。

本节目标

阅读完本节，你应当能够：

1. 区分主流二维 Web GIS 框架
2. 用框架加载瓦片和矢量数据
3. 选对场景的框架

概念脉络

一、主流二维框架

图 4-1 二维 Web GIS 框架

二、OpenLayers 基础

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [new TileLayer({ source: new OSM() })],
  view: new View({ center: [116.4, 39.9], zoom: 10, projection: 'EPSG:4326' })
});
​

OpenLayers 功能全，支持各种 OGC 服务和投影，适合复杂 GIS 应用。

三、Leaflet 基础

const map = L.map('map').setView([39.9, 116.4], 10);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
​

Leaflet 简单轻量，几行代码出地图，插件多，适合轻量应用。

四、Mapbox GL JS 基础

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [116.4, 39.9],
  zoom: 10
});
​

Mapbox GL 用矢量瓦片，WebGL 渲染，样式动态可控，体验流畅。

五、加载矢量数据

// OpenLayers 加载 GeoJSON
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';

const vectorLayer = new VectorLayer({
  source: new VectorSource({ url: 'data.geojson', format: new GeoJSON() })
});
​

六、选型建议

• 复杂 GIS、OGC 全套：OpenLayers
• 轻量、快速开发：Leaflet
• 矢量瓦片、现代体验、动态样式：Mapbox GL JS
• 国产化：MapTalks、高德/百度 JS API

⚠️ 常见坑：用 Leaflet 做复杂 GIS 分析——Leaflet 轻量但功能少，复杂分析要 OpenLayers。按需求选框架。

💡 关键直觉：OpenLayers 功能全适合复杂 GIS，Leaflet 轻量易上手，Mapbox GL 矢量瓦片现代体验。按复杂度、体验、成本选。

七、框架的通用心智模型

三个框架虽然 API 不同，底层心智模型一致，学透一个再学另一个很快：

1. Map（地图容器）：负责坐标系、视图状态、交互分发。
2. View（视图）：中心点、缩放级别、投影。视图一变，地图重绘。
3. Layer（图层）：底图、矢量层、覆盖物都是图层，可叠加、调透明度、排序。
4. Source（数据源）：图层的"粮仓"，决定数据从哪来——瓦片服务、GeoJSON 文件、WFS 接口、本地内存。
5. Control/Interaction（控件与交互）：缩放、缩放条、绘制、点选等能力。

写代码时的排查思路也因此固定：图层不显示，先看 Source 有没有数据，再看 Layer 是否加进 Map，最后看 View 的视野是否覆盖数据范围。

八、图层切换与标注示例

一个常见需求：切换底图（影像/街道）并叠加业务标记。OpenLayers 写法：

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

// 两个底图图层，默认只显示第一个
const streetLayer = new TileLayer({ source: new XYZ({ url: '/tiles/street/{z}/{x}/{y}.png' }) });
const imageLayer = new TileLayer({ source: new XYZ({ url: '/tiles/image/{z}/{x}/{y}.png' }), visible: false });
map.addLayer(streetLayer);
map.addLayer(imageLayer);

// 切换底图
function switchBasemap(name) {
  streetLayer.setVisible(name === 'street');
  imageLayer.setVisible(name === 'image');
}

// 加一个业务标记
const marker = new Feature({ geometry: new Point([116.4, 39.9]) });
const vectorLayer = new VectorLayer({ source: new VectorSource({ features: [marker] }) });
map.addLayer(vectorLayer);
​

九、三维能力的前置判断

二维框架和三微框架的边界经常被问。判断标准很简单：你的数据是否有"垂直信息"要表达。只要平面展示、叠加、属性查询，二维框架足够，不要为了炫技上三维。数据里有高程、建筑高度、倾斜摄影模型，或者用户要看立体空间关系，再引入三维。第 4.2 节会专门展开三维方案。

十、性能与体积的取舍

• 包体积：OpenLayers 支持按需引入（tree-shaking），打包后体积可控制在合理范围；Leaflet 本身很小，是轻量项目的最优解。
• 渲染性能：几千个点直接画没问题，几万到几十万个点必须做聚合、简化或用 Canvas 图层，详见 4.3 节。
• 兼容性：老浏览器（低版本 IE）场景慎用 Mapbox GL（依赖 WebGL）；Leaflet 和 OpenLayers 的降级支持更稳。

十一、一个完整的框架选型练习

假设你要给水务公司做一个巡检地图，需求是：加载巡检点位、按状态着色、点选查看详情、手机端也要用。按需求拆解：点位量级几百个，交互是点选和状态过滤，需要手机适配。结论是 Leaflet 或 OpenLayers 都行，优先选 Leaflet 加快开发；如果后续要叠加管网拓扑分析、离线编辑，再评估 OpenLayers 或 ArcGIS Runtime。选型不是一步定终身，先满足当前需求、留好扩展余地即可。

十二、从一个需求看完整开发流程

一个"按区县统计地块数量"的小功能，能串起本章所有概念：

1. 接服务：用框架的 WFS 或接口能力请求数据，确认坐标系和字段。
2. 画图层：把返回的要素加到矢量图层，按属性值做分级着色。
3. 做交互：点击地块弹窗显示属性；区县级别用聚合或统计接口。
4. 调性能：数据量大时改用矢量瓦片或服务端聚合，前端只画结果。

做完这个小功能，你会自然理解"框架只是外壳，数据服务和质量才是关键"。这也是本章反复强调的：选型看需求，实现靠数据，体验靠细节。把每个环节的代码都亲手敲一遍，比停留在阅读层面更能建立完整的开发手感。

重点提炼

• 主流框架：OpenLayers（全/OGC）、Leaflet（轻量）、Mapbox GL（矢量瓦片/WebGL）。
• OpenLayers：功能全，企业级复杂 GIS，支持各种 OGC 和投影。
• Leaflet：轻量简单，插件多，快速开发。
• Mapbox GL：矢量瓦片，WebGL 渲染，样式动态，现代体验。
• 选型：复杂用 OpenLayers，轻量用 Leaflet，矢量瓦片用 Mapbox GL。

下一节讲三维 Web GIS。