主题
快速开始
安装
bash
npm install @gmap/core @gmap/standard @gmap/shim-openlayers5 分钟上手
标准版 API
ts
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' }));简易版 API
ts
import G from '@gmap/simple';
G.use('ol', () => new OlAdapter(), { default: '2d' });
const map = G.map({ target: 'map', engine: 'ol', center: [116, 39], zoom: 10 });
G.tileLayer({ url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' }).addTo(map);
G.marker({ coord: [116, 39], attributes: { name: '北京' } }).addTo(map);专业版 API
ts
import { createMapFacade } from '@gmap/advanced';
const app = await createMapFacade({
target: 'map',
engines: 'ol',
center: [116, 39],
zoom: 10,
});
app.camera.flyTo({ center: [121, 31], zoom: 12 });
app.layers.addTile({ url: 'https://...' });
app.interactions.draw('polygon');HTML 示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>#map { width: 100vw; height: 100vh; }</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import { createMap, RasterTileLayer, ZoomControl } from '@gmap/standard';
import { EngineRegistry, MockAdapter } from '@gmap/core';
EngineRegistry.register('mock', () => new MockAdapter(), { default: '2d' });
const map = await createMap({ target: 'map', engine: 'mock' });
map.addLayer(new RasterTileLayer({ url: 'https://...' }));
map.addControl(new ZoomControl());
</script>
</body>
</html>二三维共存
typescript
import { createMap, RasterTileLayer } from '@gmap/standard';
const map = await createMap({ engine: 'openlayers', target: '#map' });
await map.addLayer(new RasterTileLayer({ id: 'base', source: '...' }));
// 进入共存模式
const coex = await map.enterCoexistence('cesium', { mode: 'over-map' });
// 切换 3D
map.toggle3D();
// 切换模式
coex.setMode('side-by-side');
// 退出
map.exitCoexistence();