openlayers-vue3-demo

项目地址： https://github.com/znlgis/openlayers-vue3-demo

教程： https://znlgis.github.io/demos/vue3-openlayers/

许可证： LGPL-2.1（以仓库为准）

概述

openlayers-vue3-demo 是 B 站直播配套的 OpenLayers + Vue 3 集成演示项目，围绕「一张图 DEMO」实现最小闭环：地图展示 + GeoServer 图层树。与直接调用 ol 内核 API 的写法不同，本项目全程使用 vue3-openlayers 声明式组件，在模板中完成地图装配。应用启动后通过 GeoServer REST API 拉取图层与图层组，动态生成可勾选的图层树并渲染 WMS 瓦片。配套教程覆盖 NVM / Node 环境、Vue 3 基础环境、OpenLayers 概念、Docker 化 GeoServer / PostGIS / Nginx。适合作为学习 vue3-openlayers 组件库与 GeoServer 对接的起点。

核心特性

特性	说明
声明式地图	Map.OlMap / Map.OlView 等组件装配地图，无需手写 Map 实例
动态图层树	从 /rest/layers、/rest/layergroups 拉取，模板 v-for 生成图层组件
WMS 渲染	Sources.OlSourceTileWms 加载 GeoServer WMS（url 统一为 /geoserver/wms）
地图控件	图层切换器、缩放、右键菜单、比例尺（MapControls 系列）
开发代理	Vite /geoserver 代理 + Basic 认证头，规避 CORS 与明文凭据
Docker 环境	postgis + kartoza/geoserver + nginx 三容器可复现环境
一张图定位	地图展示（EPSG:4326 视图）+ 服务管理（教程规划的增删改查）

环境准备 / 快速开始

环境要求

• Node.js 18+（教程以 20.15.0 为例，可用 nvm-windows 管理；npm config set registry http://registry.npmmirror.com 加速）
• Docker Desktop（运行 GeoServer / PostGIS / Nginx）
• 参考教程：https://znlgis.github.io/demos/vue3-openlayers/

创建与安装

# 1. 基于 Vite 模板创建 Vue 3 工程
npm create vite@latest openlayers-vue3-demo -- --template vue
cd openlayers-vue3-demo

# 2. 安装组件库与请求依赖
npm install vue3-openlayers axios base-64

# 3. 启动开发服务器
npm run dev

# 4. 生产构建 / 本地预览
npm run build
npm run preview

Docker 环境（GeoServer + PostGIS + Nginx）

# PostGIS 数据库
docker pull postgis/postgis
docker run -d -p 5432:5432 --name postgis \
  -e POSTGRES_PASSWORD=postgres -e PGDATA=/var/lib/postgresql/data/pgdata \
  -v //d/docker/data/postgis:/var/lib/postgresql/data postgis/postgis

# GeoServer（首次运行加 SAMPLE_DATA=true 导入示例数据；8765:8080 端口映射）
docker pull kartoza/geoserver
docker run -d -p 8765:8080 --name geoserver --link postgis:postgis \
  -e SAMPLE_DATA=true -e GEOSERVER_ADMIN_PASSWORD=geoserver \
  -e GEOSERVER_DATA_DIR=/data/geoserver/data_dir \
  -e GEOWEBCACHE_CACHE_DIR=/data/geoserver/data_dir/gwc \
  -v //d/docker/data/geoserver:/data/geoserver/data_dir \
  -v //d/docker/data/geoserver/gwc:/data/geoserver/data_dir/gwc \
  kartoza/geoserver

# Nginx（8080:80，挂载自定义 nginx.conf）
docker pull nginx
docker run --name nginx -d -p 8080:80 \
  -v //d/docker/data/nginx/nginx.conf:/etc/nginx/nginx.conf:ro nginx