快速开始

本页是 OpenLayers 版核心包 @geoverse/core-ol 的上手指引。GeoVerse 提供 OpenLayers / MapLibre 两个并列的核心引擎，若还不确定用哪个，先看引擎选型；MapLibre 版见概览与快速开始；想用一套 API 在两引擎间运行时切换，见统一门面 geoverse。

ℹ️ 包名变更：OpenLayers 核心原名 geoverse，现为 @geoverse/core-ol（API 不变）；geoverse 包名现由统一引擎门面占用。

安装（npm / ESM）

pnpm add @geoverse/core-ol ol

ol 是 peerDependency，由宿主项目安装，与你项目中其他 OpenLayers 代码共享同一实例。

import { GMap, Marker, GVectorLayer } from '@geoverse/core-ol';
import '@geoverse/core-ol/style.css';

const map = new GMap({
  target: 'map', // 容器元素或其 id
  base: 'gd-vec', // 高德矢量底图（默认）
  center: [118.18, 24.49], // WGS-84 经纬度
  zoom: 12,
});

const layer = new GVectorLayer();
map.addLayer(layer);
layer.addFeature(new Marker({ position: [118.18, 24.49] }));

SSR 安全

import '@geoverse/core-ol' 模块顶层零副作用（不打印、不注册全局），可以在 Next/Nuxt 的服务端代码中安全引入；只需保证 new GMap() 等 DOM 操作发生在浏览器侧。

安装（UMD / <script> 直引）

UMD 单文件将全部依赖（含 ol）打入，无需另装任何包，全局名 GeoVerse：

<link rel="stylesheet" href="geoverse.css" />
<script src="geoverse.umd.js"></script>
<script>
  var map = new GeoVerse.GMap({ target: 'map', base: 'gd-vec' });
</script>

要素交互事件

GMap 在地图层面统一派发要素级事件：

const marker = new Marker({ position: [118.2, 24.5] });
marker.onPointer('click', (evt) => {
  console.log('clicked', evt.mapEvent?.coordinate);
});

销毁

所有类都提供完整的生命周期回收：

map.destroy(); // 解绑容器并释放资源

下一步

• 国内坐标系 · 底图与配置注入 · 交互与工具
• 想用 MapLibre / WebGL / 矢量切片？见引擎选型与 MapLibre 版
• 要编辑要素（撤销重做 / 打断合并 / 变换 / 拓扑 / 后端同步）？见编辑器指南
• 框架组件：Vue 3 · React
• API 参考 —— 全部导出类的构造参数、方法、继承关系速查（从总览目录进入）