@caoguo/maplibre 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +116 -0
  2. package/package.json +40 -9
package/README.md ADDED
@@ -0,0 +1,116 @@
1
+ # @caoguo/maplibre
2
+
3
+ > 草果地图引擎核心 — 基于 MapLibre GL 的国内坐标系/离线瓦片/辉光/LOD 一体化封装
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@caoguo/maplibre.svg)](https://www.npmjs.com/package/@caoguo/maplibre)
6
+ [![license](https://img.shields.io/npm/l/@caoguo/maplibre.svg)](LICENSE)
7
+
8
+ ## 安装
9
+
10
+ ```bash
11
+ npm install @caoguo/maplibre @caoguo/theme
12
+ # 或
13
+ pnpm add @caoguo/maplibre @caoguo/theme
14
+ ```
15
+
16
+ Peer / 运行时依赖:`maplibre-gl@^4.7.1`、`@caoguo/theme`。
17
+
18
+ ## 功能
19
+
20
+ - **国内坐标系**:GCJ-02 / CGCS2000 / WGS84 自动纠偏(误差 < 50m / 0.5m)。
21
+ - **天地图底图**:内置 tianditu WMTS 一键接入(需 token)。
22
+ - **离线瓦片**:基于 IndexedDB 的瓦片存储 + `caoguo-offline://` 协议层短路,无需联网即可渲染。
23
+ - **辉光管线**:Custom WebGL Shader,渲染管线/路网/水系辉光效果。
24
+ - **自适应 LOD**:按缩放级别切换数据精度等级,节省渲染开销。
25
+ - **控件**:比例尺 + 实时坐标(`ScaleControl`)、暗/亮主题切换(`ThemeSwitcher`)。
26
+ - **样式**:内置 OSM 矢量底图样式 + 主题切换无闪烁(保留视图 diff)。
27
+
28
+ ## 快速开始
29
+
30
+ ```ts
31
+ import { Map } from '@caoguo/maplibre';
32
+ import { darkStyle } from '@caoguo/theme';
33
+
34
+ // 5 行代码渲染地图
35
+ const map = new Map({
36
+ container: 'map',
37
+ center: [114.3055, 30.5928], // 武汉
38
+ zoom: 12,
39
+ style: darkStyle,
40
+ dataCRS: 'GCJ02', // 业务数据为高德坐标系
41
+ });
42
+
43
+ // 叠加 GCJ-02 数据(入图前自动纠偏)
44
+ const [lng, lat] = map.transformToMap(114.3055, 30.5928);
45
+ ```
46
+
47
+ ### 切换为天地图底图
48
+
49
+ ```ts
50
+ map.useTianditu('vec', {
51
+ token: 'YOUR_TIANDITU_TOKEN', // 必填,缺失会抛 MissingTokenError
52
+ subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
53
+ });
54
+ ```
55
+
56
+ ### 离线瓦片(IndexedDB)
57
+
58
+ ```ts
59
+ map.enableOffline(); // 注册 caoguo-offline:// 协议
60
+ await map.packGeoJSON('my-source', { // 把 GeoJSON 打包到瓦片网格
61
+ type: 'FeatureCollection',
62
+ features: [/* ... */],
63
+ }, { maxZoom: 14 });
64
+
65
+ const tiles = map.offlineTiles('my-source');
66
+ map.addSource('my-source', { type: 'geojson', data: 'caoguo-offline://my-source/0/0/0.pbf' });
67
+ ```
68
+
69
+ ### 辉光管线
70
+
71
+ ```ts
72
+ map.addGlowLayer({
73
+ id: 'pipeline-glow',
74
+ lines: [{ id: 'l1', coords: [[lng, lat], [lng2, lat2]], type: 'gas' }],
75
+ colors: { gas: [1, 0.4, 0.2], water: [0.3, 0.6, 1] },
76
+ baseWidth: 6,
77
+ passes: 3,
78
+ });
79
+ ```
80
+
81
+ ### LOD 控制器
82
+
83
+ ```ts
84
+ map.addLodController(
85
+ [
86
+ { from: 0, to: 8, data: () => fetchLowDetail() },
87
+ { from: 8, to: 12, data: () => fetchMidDetail() },
88
+ { from: 12, to: 22, data: () => fetchHighDetail() },
89
+ ],
90
+ (e) => map.getSource('layer')?.setData(e.current.data)
91
+ );
92
+ ```
93
+
94
+ ## API 概览
95
+
96
+ | 导出 | 说明 |
97
+ |------|------|
98
+ | `Map` (default + named) | 主类,统一入口 |
99
+ | `maplibregl` | 透传 MapLibre 原生命名空间 |
100
+ | `MapOptions` / `MapInstance` | 类型 |
101
+ | `CRS` / `LngLat` / `createTransformer` / `toWgs84` | 坐标系 |
102
+ | `addTiandituBaseMap` / `tiandituStyle` / `MissingTokenError` / `TiandituOptions` | 天地图 |
103
+ | `createDefaultStore` / `registerOfflineProtocol` / `offlineTileUrl` / `packGeoJSONToStore` / `TileStoreBackend` | 离线 |
104
+ | `ScaleControl` / `ThemeSwitcher` | 控件 |
105
+ | `CustomLineLayer` / `GlowLine` | 辉光 |
106
+ | `LodController` / `LodLevel` / `LodChangeEvent` | LOD |
107
+
108
+ ## 浏览器 / 环境要求
109
+
110
+ - 现代浏览器(Chrome 90+ / Firefox 88+ / Edge 90+)
111
+ - 引擎内部 `import 'maplibre-gl/dist/maplibre-gl.css'`,需配合 Vite/Webpack 等打包器
112
+ - 纯算法模块(坐标系/图算法)可在 Node 环境测试
113
+
114
+ ## 许可
115
+
116
+ Apache-2.0
package/package.json CHANGED
@@ -1,12 +1,38 @@
1
1
  {
2
2
  "name": "@caoguo/maplibre",
3
- "version": "0.0.1",
4
- "type": "module",
5
- "scripts": {
6
- "build": "tsup",
7
- "test": "vitest run",
8
- "test:watch": "vitest"
3
+ "version": "0.0.3",
4
+ "description": "草果地图引擎核心 — 基于 MapLibre GL 的国内坐标系/离线瓦片/辉光/LOD 一体化封装",
5
+ "license": "Apache-2.0",
6
+ "author": "caoguo <caoguo@hb.cn>",
7
+ "homepage": "https://github.com/caoguo/map/blob/main/packages/maplibre/README.md",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/caoguo/map.git",
11
+ "directory": "packages/maplibre"
12
+ },
13
+ "bugs": {
14
+ "url": "https://github.com/caoguo/map/issues"
9
15
  },
16
+ "keywords": [
17
+ "maplibre",
18
+ "maplibre-gl",
19
+ "map",
20
+ "gis",
21
+ "caoguo",
22
+ "webgl",
23
+ "tile-server",
24
+ "tianditu",
25
+ "wgs84",
26
+ "gcj02",
27
+ "cgcs2000",
28
+ "offline",
29
+ "service-worker",
30
+ "indexeddb",
31
+ "lod",
32
+ "shader",
33
+ "china"
34
+ ],
35
+ "type": "module",
10
36
  "main": "./dist/index.cjs",
11
37
  "module": "./dist/index.js",
12
38
  "types": "./dist/index.d.ts",
@@ -36,9 +62,9 @@
36
62
  "dist"
37
63
  ],
38
64
  "dependencies": {
39
- "@caoguo/theme": "workspace:*",
40
65
  "idb": "^8.0.0",
41
- "maplibre-gl": "^4.7.1"
66
+ "maplibre-gl": "^4.7.1",
67
+ "@caoguo/theme": "0.0.2"
42
68
  },
43
69
  "publishConfig": {
44
70
  "access": "public",
@@ -48,5 +74,10 @@
48
74
  "jsdom": "^25.0.1",
49
75
  "tsup": "^8.3.5",
50
76
  "vitest": "^2.1.8"
77
+ },
78
+ "scripts": {
79
+ "build": "tsup",
80
+ "test": "vitest run",
81
+ "test:watch": "vitest"
51
82
  }
52
- }
83
+ }