OpenLayers 引擎

@gmap/shim-openlayers 提供基于 OpenLayers 的 2D 地图引擎。

安装

npm install @gmap/shim-openlayers ol

注册

import OlAdapter from '@gmap/shim-openlayers';
import { EngineRegistry } from '@gmap/core';

EngineRegistry.register('ol', () => new OlAdapter(), { default: '2d' });

能力

能力	支持	说明
dimensions	['2d']	仅 2D
raster	✅	栅格瓦片
vectorTile	✅	矢量瓦片
geojson	✅	GeoJSON
wms	✅	WMS 服务
wmts	✅	WMTS 服务
mapboxStyle	✅	Mapbox 样式
terrain	❌	不支持
tiles3d	❌	不支持
draw	✅	绘制交互
edit	✅	编辑交互
picking	✅	要素拾取
boxZoom	✅	框选缩放
keyboard	✅	键盘控制

特色

• 完整的投影支持（通过 proj4）
• 丰富的交互控件
• 高性能矢量渲染
• 兼容 OpenLayers 生态插件

示例

import { createMap, RasterTileLayer, ZoomControl } from '@gmap/standard';
import OlAdapter from '@gmap/shim-openlayers';
import { EngineRegistry } from '@gmap/core';

EngineRegistry.register('ol', () => new OlAdapter(), { default: '2d' });

const map = await createMap({
  target: 'map',
  engine: 'ol',
  center: [116.397, 39.908],
  zoom: 10,
});

map.addLayer(new RasterTileLayer({
  url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
}));

map.addControl(new ZoomControl({ position: 'top-left' }));

共存支持

• setInputEnabled — 通过 olMap.getInteractions() 控制各交互的 setActive()
• view:change — 监听 OL View 的 change:center/resolution/rotation 事件
• overlay — 封装 ol/Overlay API