MapLibre 引擎

@gmap/shim-maplibre 提供基于 MapLibre GL 的 2D 矢量瓦片引擎。

安装

npm install @gmap/shim-maplibre maplibre-gl

注册

import MaplibreAdapter from '@gmap/shim-maplibre';
import { EngineRegistry } from '@gmap/core';

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

能力

能力	支持	说明
dimensions	['2d']	仅 2D
raster	✅	栅格瓦片
vectorTile	✅	矢量瓦片（原生）
geojson	✅	GeoJSON
mapboxStyle	✅	Mapbox 样式（原生）
expressions	✅	样式表达式
sprite	✅	精灵图
glyphs	✅	字体
wms	❌	不支持
terrain	❌	不支持

特色

• 原生 Mapbox Style Spec 支持
• 高性能矢量瓦片渲染
• 数据驱动样式
• 3D 建筑 extrusion

示例

import { createMap } from '@gmap/standard';
import MaplibreAdapter from '@gmap/shim-maplibre';
import { EngineRegistry } from '@gmap/core';

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

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

// 应用 Mapbox 样式
map.setStyle({
  version: 8,
  sources: {
    osm: { type: 'raster', tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'] },
  },
  layers: [{ id: 'osm', type: 'raster', source: 'osm' }],
});

共存支持

• setInputEnabled — 通过 MapLibre GL 的 dragPan/scrollZoom/doubleClickZoom/touchZoomRotate/boxZoom/keyboard 的 enable()/disable() 方法
• view:change — 监听 moveend 事件
• overlay — 封装 Marker 和 Popup API