openlayers

项目地址： https://github.com/openlayers/openlayers

官方文档： https://openlayers.org/doc/

API 参考： https://openlayers.org/en/latest/apidoc/

示例： https://openlayers.org/en/latest/examples/

许可证： BSD-2-Clause

概述

OpenLayers（OL）特性：

• 多源底图：OSM、Bing、XYZ、WMS、WMTS、ArcGIS REST
• 矢量数据：GeoJSON、KML、GPX、TopoJSON、GML、MVT
• 投影：内置 EPSG:3857/4326，与 proj4 集成支持任意投影
• 矢量瓦片（MVT）原生支持
• 强大的样式与交互（Draw/Modify/Select/Snap）
• WebGL 渲染（点云、海量点）

---

安装

npm install ol

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

const map = new Map({
  target: 'map',
  layers: [new TileLayer({ source: new OSM() })],
  view: new View({ center: [12968000, 4863000], zoom: 10 })  // EPSG:3857
});

---

核心概念

类	作用
Map	顶层容器
View	视图（投影、中心、缩放、旋转）
Layer	图层
Source	数据源
Feature / Geometry	矢量要素与几何
Style	样式
Interaction	交互

---

图层与数据源

栅格底图

import XYZ from 'ol/source/XYZ.js';
import TileWMS from 'ol/source/TileWMS.js';

new TileLayer({ source: new XYZ({
  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
}) });

new TileLayer({ source: new TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: { LAYERS: 'topp:states', TILED: true }
}) });

矢量图层（GeoJSON）

import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';

map.addLayer(new VectorLayer({
  source: new VectorSource({
    url: '/data/poi.geojson',
    format: new GeoJSON()
  })
}));

矢量瓦片（MVT）

import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import MVT from 'ol/format/MVT.js';

new VectorTileLayer({
  declutter: true,
  source: new VectorTileSource({
    format: new MVT(),
    url: 'https://server/tiles/{z}/{x}/{y}.pbf'
  })
});