map-ol-utils 0.1.31 → 1.0.0
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.
- package/LICENSE +21 -0
- package/README.md +203 -56
- package/dist/index.cjs +1 -1170
- package/dist/index.d.cts +296 -134
- package/dist/index.d.mts +482 -0
- package/dist/index.mjs +1 -0
- package/package.json +27 -13
- package/dist/index.d.ts +0 -320
- package/dist/index.js +0 -1100
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Tomxuetao
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> 目录:`packages/map-utils` | npm 包名:`map-ol-utils`
|
|
4
4
|
|
|
5
|
-
基于 [OpenLayers](https://openlayers.org/) 的地图工具库,封装了地图实例管理、底图创建、矢量/面/线/聚合/海量点图层、要素交互选择、视野自适应、WMTS
|
|
5
|
+
基于 [OpenLayers](https://openlayers.org/) 的地图工具库,封装了地图实例管理、底图创建、矢量/面/线/聚合/海量点图层、要素交互选择、视野自适应、WMTS 接入,以及天地图私有 VTS 的浏览器加载与标准 MVT 转换能力。
|
|
6
6
|
|
|
7
7
|
## 特性
|
|
8
8
|
|
|
@@ -13,6 +13,29 @@
|
|
|
13
13
|
- **聚合图层**:基于 `ol/source/Cluster`,半径/颜色随聚合数量动态计算。
|
|
14
14
|
- **坐标系转换**:内部统一通过 [`gcoord`](https://github.com/hujiulong/gcoord) 转换到 `WGS84`(`EPSG:4326`)。
|
|
15
15
|
- **事件总线**:内置 `mitt` 实例 `emitter`,用于派发要素选中等事件。
|
|
16
|
+
- **扩展能力**:提供天地图组合、栅格着色、标记、绘制量算、GeoJSON 图层和多图层选择能力。
|
|
17
|
+
- **私有 VTS 转换**:通过 `tdt-vts-core` 复用 PK 编解码、私有 Protobuf/MVT 转换和 Web Worker 解码,本包只保留 OpenLayers 适配。
|
|
18
|
+
|
|
19
|
+
## 项目结构
|
|
20
|
+
|
|
21
|
+
```text
|
|
22
|
+
packages/map-utils/
|
|
23
|
+
├── src/
|
|
24
|
+
│ ├── core/ # 类型、常量、事件总线与地图上下文
|
|
25
|
+
│ ├── interaction/ # 绘制和要素选择交互
|
|
26
|
+
│ ├── layer/ # 底图、矢量、聚合、海量点、WMTS 与图层生命周期
|
|
27
|
+
│ ├── map/ # 地图实例管理与视野适配
|
|
28
|
+
│ ├── overlay/ # Overlay 与动画标注
|
|
29
|
+
│ ├── tdt-vts/ # 天地图私有 VTS 的公共重导出与 OL 适配
|
|
30
|
+
│ └── index.ts # 唯一公共 API 入口
|
|
31
|
+
├── test/
|
|
32
|
+
│ ├── architecture.test.ts # 模块边界与架构约束
|
|
33
|
+
│ └── compatibility.test.ts # 公共 API 兼容性测试
|
|
34
|
+
├── package.json # 包入口、依赖和构建脚本
|
|
35
|
+
├── tsconfig.json # TypeScript 配置
|
|
36
|
+
├── tsdown.config.ts # ESM/CJS 与类型声明构建配置
|
|
37
|
+
└── README.md # 安装、API 与使用约定
|
|
38
|
+
```
|
|
16
39
|
|
|
17
40
|
## 安装
|
|
18
41
|
|
|
@@ -20,7 +43,7 @@
|
|
|
20
43
|
pnpm add map-ol-utils ol gcoord
|
|
21
44
|
```
|
|
22
45
|
|
|
23
|
-
`ol`
|
|
46
|
+
`ol` 是**对等依赖**(要求 `^10.10.0`),需由宿主项目安装。`tdt-vts-core` 是普通依赖,由包管理器自动安装。
|
|
24
47
|
|
|
25
48
|
## 快速开始
|
|
26
49
|
|
|
@@ -43,13 +66,34 @@ map.addLayer(layer)
|
|
|
43
66
|
emitter.on('selected-feature', (data) => console.log('选中要素:', data))
|
|
44
67
|
```
|
|
45
68
|
|
|
69
|
+
## 天地图私有 VTS
|
|
70
|
+
|
|
71
|
+
传入 Mapbox/MapLibre Style v8 JSON 地址或已加载的样式对象,创建 OpenLayers 图层:
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
import { createTdtVtsLayer } from 'map-ol-utils'
|
|
75
|
+
|
|
76
|
+
const layer = await createTdtVtsLayer({
|
|
77
|
+
token: 'YOUR_TDT_TOKEN',
|
|
78
|
+
hosts: ['https://tile0.tianditu.gov.cn'],
|
|
79
|
+
style: '/styles/tdt-style.json'
|
|
80
|
+
})
|
|
81
|
+
|
|
82
|
+
map.addLayer(layer)
|
|
83
|
+
layer.dispose() // 同时释放解码 Worker
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
`hosts` 与 `style` 均为必填项。传入地址时,本包会请求并校验 Style v8 JSON,服务端需允许当前页面跨域访问;也可以直接传入包含 `sources` 和 `layers` 的样式对象。
|
|
87
|
+
|
|
88
|
+
业务调用只需要 `createTdtVtsLayer()`;底层转换 API 保留用于兼容已有调用。
|
|
89
|
+
|
|
46
90
|
---
|
|
47
91
|
|
|
48
|
-
# API
|
|
92
|
+
# 接口(API)详解
|
|
49
93
|
|
|
50
|
-
>
|
|
94
|
+
> 约定:独立工具函数默认操作 `createMapInstance()` 创建的模块单例;`createMap()` 返回独立地图,其挂载的图层方法只操作自身。
|
|
51
95
|
|
|
52
|
-
## 一、地图实例(`create-map.ts`)
|
|
96
|
+
## 一、地图实例(`map/create-map.ts`)
|
|
53
97
|
|
|
54
98
|
### `createMapInstance(config?)`
|
|
55
99
|
|
|
@@ -59,8 +103,8 @@ emitter.on('selected-feature', (data) => console.log('选中要素:', data))
|
|
|
59
103
|
function createMapInstance(config?: Record<string, any>): CustomMap
|
|
60
104
|
```
|
|
61
105
|
|
|
62
|
-
| 参数
|
|
63
|
-
|
|
106
|
+
| 参数 | 类型 | 默认 | 说明 |
|
|
107
|
+
| -------- | -------- | ---- | ----------------------------------------- |
|
|
64
108
|
| `config` | `object` | `{}` | 透传给 `createMap` → `ol/View` 的视图配置 |
|
|
65
109
|
|
|
66
110
|
返回:`CustomMap`(OpenLayers `Map` 的扩展,附带 `getLayerByName` / `removeLayerByName` / `changeLayersByNames` 方法与 `activeBaseLayer` 字段)。
|
|
@@ -72,7 +116,7 @@ map.setTarget('map')
|
|
|
72
116
|
|
|
73
117
|
### `createMap(config?)`
|
|
74
118
|
|
|
75
|
-
始终新建一个 `CustomMap`。默认挂载杭州规自暗色底图,禁用旋转/双击缩放,并在 `pointermove`
|
|
119
|
+
始终新建一个 `CustomMap`。默认挂载杭州规自暗色底图,禁用旋转/双击缩放,并在 `pointermove` 时根据是否命中要素切换鼠标指针;挂载的图层查询、切换和删除方法绑定到当前地图。`config` 与以下默认值合并后作为 `ol/View` 选项:
|
|
76
120
|
|
|
77
121
|
```ts
|
|
78
122
|
function createMap(config?: Record<string, any>): CustomMap
|
|
@@ -83,7 +127,7 @@ function createMap(config?: Record<string, any>): CustomMap
|
|
|
83
127
|
```
|
|
84
128
|
|
|
85
129
|
| 参数 | 类型 | 默认 | 说明 |
|
|
86
|
-
|
|
130
|
+
| --- | --- | --- | --- |
|
|
87
131
|
| `config` | `object` | `{}` | `ol/View` 配置;可额外传 `layers` 覆盖默认底图、`baseLayer` 标记当前底图名 |
|
|
88
132
|
|
|
89
133
|
```ts
|
|
@@ -104,7 +148,7 @@ function getMapInstance(): CustomMap
|
|
|
104
148
|
function disposeMap(): void
|
|
105
149
|
```
|
|
106
150
|
|
|
107
|
-
|
|
151
|
+
销毁单例:移除全部覆盖物、清空交互、移除并释放(`source.dispose()` + `layer.dispose()`)所有图层,`setTarget('')` 后将 `instance` 置为 `undefined`。未初始化或重复调用时会安全跳过。
|
|
108
152
|
|
|
109
153
|
### `resetMap(config?)`
|
|
110
154
|
|
|
@@ -131,7 +175,7 @@ let instance: CustomMap // 导出变量;未创建时为 undefined
|
|
|
131
175
|
|
|
132
176
|
---
|
|
133
177
|
|
|
134
|
-
## 二、底图与图层名管理(`base-layer.ts`)
|
|
178
|
+
## 二、底图与图层名管理(`layer/base-layer.ts`)
|
|
135
179
|
|
|
136
180
|
### `createBaseLayer(layerName?)`
|
|
137
181
|
|
|
@@ -159,7 +203,7 @@ function createMapWorldLayer(layerName: WorldLayerType, tk?: string): Tile
|
|
|
159
203
|
```
|
|
160
204
|
|
|
161
205
|
| 参数 | 类型 | 默认 | 说明 |
|
|
162
|
-
|
|
206
|
+
| --- | --- | --- | --- |
|
|
163
207
|
| `layerName` | `WorldLayerType` | — | 形如 `img_c`,内部按 `_` 拆分为图层名与 matrixSet |
|
|
164
208
|
| `tk` | `string` | 内置默认令牌 | 天地图访问令牌,**建议自行传入** |
|
|
165
209
|
|
|
@@ -190,12 +234,15 @@ function getLayerByName(name: string): Layer<Source> | undefined
|
|
|
190
234
|
function removeLayerByName(name: string): void
|
|
191
235
|
```
|
|
192
236
|
|
|
193
|
-
|
|
237
|
+
查找匹配图层并释放其数据源、从地图移除并执行 `dispose`。
|
|
194
238
|
|
|
195
239
|
### `changeLayersByNames(activeNames, allLayerNames)`
|
|
196
240
|
|
|
197
241
|
```ts
|
|
198
|
-
function changeLayersByNames(
|
|
242
|
+
function changeLayersByNames(
|
|
243
|
+
activeNames: string[],
|
|
244
|
+
allLayerNames: string[]
|
|
245
|
+
): void
|
|
199
246
|
```
|
|
200
247
|
|
|
201
248
|
在 `allLayerNames` 范围内,按 `activeNames` 是否包含来逐一 `setVisible`,实现批量显隐切换。
|
|
@@ -206,18 +253,21 @@ changeLayersByNames(['poi-layer'], ['poi-layer', 'line-layer', 'face-layer'])
|
|
|
206
253
|
|
|
207
254
|
---
|
|
208
255
|
|
|
209
|
-
## 三、矢量图层(`layer-
|
|
256
|
+
## 三、矢量图层(`layer/vector-layer.ts`)
|
|
210
257
|
|
|
211
258
|
### `createBusinessLayer(dataList, config)`
|
|
212
259
|
|
|
213
260
|
核心矢量图层构造函数:将业务数据组装为 GeoJSON(自动推断线/面几何类型),生成默认/激活样式并写入要素属性,可选开启点击交互。
|
|
214
261
|
|
|
215
262
|
```ts
|
|
216
|
-
function createBusinessLayer(
|
|
263
|
+
function createBusinessLayer(
|
|
264
|
+
dataList: MassData[],
|
|
265
|
+
config: VectorConfig
|
|
266
|
+
): VectorLayer
|
|
217
267
|
```
|
|
218
268
|
|
|
219
269
|
| `config` 关键字段 | 类型 | 说明 |
|
|
220
|
-
|
|
270
|
+
| --- | --- | --- |
|
|
221
271
|
| `key` | `string` | 数据中存放坐标数组的字段名 |
|
|
222
272
|
| `isLine` | `boolean` | 是否线图层(影响是否生成填充样式) |
|
|
223
273
|
| `layerName` | `string?` | 图层名(className) |
|
|
@@ -233,10 +283,17 @@ function createBusinessLayer(dataList: MassData[], config: VectorConfig): Vector
|
|
|
233
283
|
|
|
234
284
|
```ts
|
|
235
285
|
const layer = createBusinessLayer(dataList, {
|
|
236
|
-
key: 'coordinates',
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
286
|
+
key: 'coordinates',
|
|
287
|
+
isLine: false,
|
|
288
|
+
openClick: true,
|
|
289
|
+
layerName: 'area',
|
|
290
|
+
colorKey: 'level',
|
|
291
|
+
colorMap: new Map([
|
|
292
|
+
['1', '#f00'],
|
|
293
|
+
['2', '#0f0']
|
|
294
|
+
]),
|
|
295
|
+
fillOpacity: 0.3,
|
|
296
|
+
strokeWeight: 2
|
|
240
297
|
})
|
|
241
298
|
map.addLayer(layer)
|
|
242
299
|
```
|
|
@@ -246,13 +303,19 @@ map.addLayer(layer)
|
|
|
246
303
|
`createBusinessLayer` 的便捷包装,分别固定 `isLine: true` / `isLine: false`。
|
|
247
304
|
|
|
248
305
|
```ts
|
|
249
|
-
function createVectorLineLayer(
|
|
250
|
-
|
|
306
|
+
function createVectorLineLayer(
|
|
307
|
+
dataList?: MassData[],
|
|
308
|
+
config: VectorConfig
|
|
309
|
+
): VectorLayer
|
|
310
|
+
function createVectorFaceLayer(
|
|
311
|
+
dataList?: MassData[],
|
|
312
|
+
config: VectorConfig
|
|
313
|
+
): VectorLayer
|
|
251
314
|
```
|
|
252
315
|
|
|
253
316
|
### `appendFeaturesByLayer(targetLayer, dataList, crsForm?)`
|
|
254
317
|
|
|
255
|
-
向已有矢量图层追加要素(同步更新其 `_uuidSet`),复用图层 `_vectorConfig`
|
|
318
|
+
向已有矢量图层追加要素(同步更新其 `_uuidSet`),复用图层 `_vectorConfig` 生成样式;未传 `crsForm` 时继承图层配置的源坐标系。
|
|
256
319
|
|
|
257
320
|
```ts
|
|
258
321
|
function appendFeaturesByLayer(
|
|
@@ -264,7 +327,7 @@ function appendFeaturesByLayer(
|
|
|
264
327
|
|
|
265
328
|
---
|
|
266
329
|
|
|
267
|
-
## 四、海量点 MassMarks(`layer-
|
|
330
|
+
## 四、海量点 MassMarks(`layer/mass-marks.ts`)
|
|
268
331
|
|
|
269
332
|
### `buildMassMarksStyles(getImgUrlFn)`
|
|
270
333
|
|
|
@@ -282,14 +345,24 @@ type GetImgUrlFn = (baseUrl: string) => GetImgUrl
|
|
|
282
345
|
图标地址按 `${markerIcon}-${i}` / `${markerIcon}-${i}-active`(后缀 `.webp`)拼接。
|
|
283
346
|
|
|
284
347
|
```ts
|
|
285
|
-
const buildStyles = buildMassMarksStyles(
|
|
286
|
-
|
|
348
|
+
const buildStyles = buildMassMarksStyles(
|
|
349
|
+
(baseUrl) => (name, ext) => `${baseUrl}/${name}${ext}`
|
|
350
|
+
)
|
|
351
|
+
const styles = buildStyles({
|
|
352
|
+
baseUrl: '/icons',
|
|
353
|
+
markerIcon: 'alarm',
|
|
354
|
+
markerSize: [32, 32],
|
|
355
|
+
statusNum: 5
|
|
356
|
+
})
|
|
287
357
|
```
|
|
288
358
|
|
|
289
359
|
### `createMassMarksLayer(dataList, styleList?)`
|
|
290
360
|
|
|
291
361
|
```ts
|
|
292
|
-
function createMassMarksLayer(
|
|
362
|
+
function createMassMarksLayer(
|
|
363
|
+
dataList: MassData[],
|
|
364
|
+
styleList?: StyleLike[]
|
|
365
|
+
): VectorLayer
|
|
293
366
|
```
|
|
294
367
|
|
|
295
368
|
按 `item.style` 索引在 `styleList` 中取样式创建要素图层(`zIndex: 2000`)。图层附带 `_isMassMarksLayer`、`_statusNum`、`_dataList`、`_uuidSet` 等属性。
|
|
@@ -301,11 +374,15 @@ function createMassMarksLayer(dataList: MassData[], styleList?: StyleLike[]): Ve
|
|
|
301
374
|
```ts
|
|
302
375
|
function addMassMarksLayer(
|
|
303
376
|
getImgUrlFn: GetImgUrlFn
|
|
304
|
-
): (
|
|
377
|
+
): (
|
|
378
|
+
dataList?: MassData[],
|
|
379
|
+
iconConfig: IconConfig,
|
|
380
|
+
openClick?: boolean
|
|
381
|
+
) => VectorLayer
|
|
305
382
|
```
|
|
306
383
|
|
|
307
384
|
| `iconConfig` 字段 | 类型 | 说明 |
|
|
308
|
-
|
|
385
|
+
| --- | --- | --- |
|
|
309
386
|
| `baseUrl` | `string` | 图标根地址 |
|
|
310
387
|
| `markerIcon` | `string` | 图标名前缀 |
|
|
311
388
|
| `markerSize` | `[number, number]` | 图标尺寸 |
|
|
@@ -321,7 +398,13 @@ function addMassMarksLayer(
|
|
|
321
398
|
|
|
322
399
|
```ts
|
|
323
400
|
const add = addMassMarksLayer((baseUrl) => (n, e) => `${baseUrl}/${n}${e}`)
|
|
324
|
-
const layer = add(dataList, {
|
|
401
|
+
const layer = add(dataList, {
|
|
402
|
+
baseUrl: '/icons',
|
|
403
|
+
markerIcon: 'alarm',
|
|
404
|
+
markerSize: [32, 32],
|
|
405
|
+
statusNum: 5,
|
|
406
|
+
hasLine: true
|
|
407
|
+
})
|
|
325
408
|
```
|
|
326
409
|
|
|
327
410
|
### `addFeaturesByLayer(targetLayer, dataList, config)`
|
|
@@ -336,7 +419,7 @@ function addFeaturesByLayer(
|
|
|
336
419
|
): void
|
|
337
420
|
```
|
|
338
421
|
|
|
339
|
-
`config.clear` 为 `true`
|
|
422
|
+
`config.clear` 为 `true` 时先清空数据源再添加。
|
|
340
423
|
|
|
341
424
|
### `updateMarksLayersByStatus(checkedStatusList?)`
|
|
342
425
|
|
|
@@ -348,12 +431,15 @@ function updateMarksLayersByStatus(checkedStatusList?: string[]): MassData[]
|
|
|
348
431
|
|
|
349
432
|
---
|
|
350
433
|
|
|
351
|
-
## 五、聚合图层(`layer-
|
|
434
|
+
## 五、聚合图层(`layer/cluster-layer.ts`)
|
|
352
435
|
|
|
353
436
|
### `createClusterLayer(dataList, config)`
|
|
354
437
|
|
|
355
438
|
```ts
|
|
356
|
-
function createClusterLayer(
|
|
439
|
+
function createClusterLayer(
|
|
440
|
+
dataList: ClusterData[],
|
|
441
|
+
config: ClusterConfig
|
|
442
|
+
): VectorLayer
|
|
357
443
|
|
|
358
444
|
type ClusterData = {
|
|
359
445
|
_uuid: string
|
|
@@ -377,15 +463,17 @@ type ClusterConfig = {
|
|
|
377
463
|
|
|
378
464
|
```ts
|
|
379
465
|
const cluster = createClusterLayer(dataList, {
|
|
380
|
-
distance: 80,
|
|
381
|
-
|
|
466
|
+
distance: 80,
|
|
467
|
+
minDistance: 20,
|
|
468
|
+
singleStyles: [singlePointStyle],
|
|
469
|
+
openClick: true
|
|
382
470
|
})
|
|
383
471
|
map.addLayer(cluster)
|
|
384
472
|
```
|
|
385
473
|
|
|
386
474
|
---
|
|
387
475
|
|
|
388
|
-
## 六、交互与选中(`
|
|
476
|
+
## 六、交互与选中(`interaction/select.ts`)
|
|
389
477
|
|
|
390
478
|
### `createSelectByLayer(vectorLayer)`
|
|
391
479
|
|
|
@@ -407,12 +495,12 @@ function activeFeatureByUid(uid: string): void
|
|
|
407
495
|
|
|
408
496
|
```ts
|
|
409
497
|
function resetActiveFeature(): void // 清空 overlay + 触发各矢量图层 deselect
|
|
410
|
-
function resetActiveVector(): void
|
|
498
|
+
function resetActiveVector(): void // 清空 overlay + 清空各图层选择交互的要素集合
|
|
411
499
|
```
|
|
412
500
|
|
|
413
501
|
---
|
|
414
502
|
|
|
415
|
-
## 七、覆盖物与视野(`
|
|
503
|
+
## 七、覆盖物与视野(`overlay/overlay.ts`、`map/view-fit.ts`)
|
|
416
504
|
|
|
417
505
|
### `createOverlay(config?)`
|
|
418
506
|
|
|
@@ -427,7 +515,7 @@ function createOverlay(config?: import('ol/Overlay').Options): Overlay
|
|
|
427
515
|
|
|
428
516
|
```ts
|
|
429
517
|
function removeOverlays(key?: string): void // 移除带指定属性键的 overlay(默认按 'position')
|
|
430
|
-
function removeAllLayers(): void
|
|
518
|
+
function removeAllLayers(): void // 移除并释放所有非底图(无 _isBaseLayer)图层 + overlay
|
|
431
519
|
```
|
|
432
520
|
|
|
433
521
|
### `createAnimationMarker(imgUrl, data)`
|
|
@@ -436,7 +524,7 @@ function removeAllLayers(): void // 移除并释放所有非底图(
|
|
|
436
524
|
function createAnimationMarker(imgUrl: string, data: MassData): void
|
|
437
525
|
```
|
|
438
526
|
|
|
439
|
-
以 `data.lnglat`(经 `data.crsForm` → `WGS84`
|
|
527
|
+
以 `data.lnglat`(经 `data.crsForm` → `WGS84` 转换)创建动画标注覆盖物,先移除已有动画标注。`data` 中读取 `width` / `height` / `lnglat` / `crsForm`。
|
|
440
528
|
|
|
441
529
|
### `setFitViewByCoords` / `setFitViewByGeom` / `setFitViewByLayer`
|
|
442
530
|
|
|
@@ -445,7 +533,7 @@ function setFitViewByCoords(
|
|
|
445
533
|
coords: Coordinate[],
|
|
446
534
|
mapInstance?: CustomMap,
|
|
447
535
|
fitOptions?: FitOptions | AnimationOptions
|
|
448
|
-
): void
|
|
536
|
+
): void // 单点时 animate 到 zoom 14,多点时 fit 包围盒
|
|
449
537
|
|
|
450
538
|
function setFitViewByGeom(
|
|
451
539
|
geom: SimpleGeometry,
|
|
@@ -457,13 +545,16 @@ function setFitViewByLayer(
|
|
|
457
545
|
layer: VectorLayer,
|
|
458
546
|
mapInstance?: CustomMap,
|
|
459
547
|
fitOptions?: FitOptions
|
|
460
|
-
): void
|
|
548
|
+
): void // 按图层 source 的 extent 自适应
|
|
461
549
|
```
|
|
462
550
|
|
|
463
551
|
三者默认 `padding: [50,50,50,50]`、`duration: 1000`,可由 `fitOptions` 覆盖。
|
|
464
552
|
|
|
465
553
|
```ts
|
|
466
|
-
setFitViewByCoords([
|
|
554
|
+
setFitViewByCoords([
|
|
555
|
+
[120.1, 30.2],
|
|
556
|
+
[120.3, 30.4]
|
|
557
|
+
])
|
|
467
558
|
setFitViewByLayer(layer, undefined, { duration: 500 })
|
|
468
559
|
```
|
|
469
560
|
|
|
@@ -477,11 +568,11 @@ function getLayersDataList(): any[]
|
|
|
477
568
|
|
|
478
569
|
---
|
|
479
570
|
|
|
480
|
-
## 八、WMTS(`ogc-utils.ts`)
|
|
571
|
+
## 八、WMTS(`layer/ogc-utils.ts`)
|
|
481
572
|
|
|
482
573
|
### `createWmtsLayer(serverUrl)`
|
|
483
574
|
|
|
484
|
-
柯里化函数:先传 GeoServer 服务地址,返回的方法按 `WmtsSourceOptions` 解析 GetCapabilities
|
|
575
|
+
柯里化函数:先传 GeoServer 服务地址,返回的方法按 `WmtsSourceOptions` 解析 GetCapabilities 并构建图层。仅成功响应会进入 capabilities 缓存;HTTP 非成功状态直接抛错,后续调用仍可重试。
|
|
485
576
|
|
|
486
577
|
```ts
|
|
487
578
|
function createWmtsLayer(
|
|
@@ -489,11 +580,11 @@ function createWmtsLayer(
|
|
|
489
580
|
): (config: WmtsSourceOptions) => Promise<TileLayer>
|
|
490
581
|
|
|
491
582
|
type WmtsSourceOptions = {
|
|
492
|
-
layerName: string
|
|
583
|
+
layerName: string // 形如 'workspace:datastore'
|
|
493
584
|
style?: string
|
|
494
|
-
format?: string
|
|
495
|
-
version?: string
|
|
496
|
-
matrixSet?: string
|
|
585
|
+
format?: string // 默认 'image/png'
|
|
586
|
+
version?: string // 默认 '1.1.0'
|
|
587
|
+
matrixSet?: string // 默认 'EPSG:4326'
|
|
497
588
|
}
|
|
498
589
|
```
|
|
499
590
|
|
|
@@ -512,13 +603,67 @@ import { emitter } from 'map-ol-utils' // mitt 实例
|
|
|
512
603
|
```
|
|
513
604
|
|
|
514
605
|
| 事件名 | 载荷 | 触发时机 |
|
|
515
|
-
|
|
606
|
+
| --- | --- | --- |
|
|
516
607
|
| `selected-feature` | 要素属性对象 | 要素被选中(`createSelectByLayer` 内触发) |
|
|
517
608
|
| `dynamic-marker` | 动画标注配置 | 选中动态图层(`_isDynamic`)要素 1s 后 |
|
|
518
609
|
|
|
519
610
|
---
|
|
520
611
|
|
|
521
|
-
##
|
|
612
|
+
## 十、扩展能力
|
|
613
|
+
|
|
614
|
+
以下 API 补充天地图组合、标记、绘制与 GeoJSON 等能力;`createMapInstance`、`createOverlay`、`disposeMap` 等既有 API 的签名、默认值和行为保持不变。`disposeInstance()` 直接复用 `disposeMap()` 的完整清理语义。
|
|
615
|
+
|
|
616
|
+
### 天地图组合与栅格处理
|
|
617
|
+
|
|
618
|
+
```ts
|
|
619
|
+
const { baseImgLayer, baseCiaLayer, baseVecLayer, baseCvaLayer } =
|
|
620
|
+
baseLayers('你的天地图令牌')
|
|
621
|
+
|
|
622
|
+
const recoloredLayer = changeLayer(
|
|
623
|
+
baseImgLayer,
|
|
624
|
+
[255, 255, 255],
|
|
625
|
+
[0.05, 0.55, 0.05]
|
|
626
|
+
)
|
|
627
|
+
```
|
|
628
|
+
|
|
629
|
+
- `baseLayers(tk)`:创建影像、影像注记、矢量、矢量注记四个 XYZ 图层。
|
|
630
|
+
- `changeSource(layer, rgbColorArray, ratioArray, options?)`:创建栅格颜色转换数据源;`options.threads` 可指定线程数。
|
|
631
|
+
- `changeLayer(layer, rgbColorArray, ratioArray, options?)`:把转换数据源包装为 `VectorImageLayer`;支持相同的线程配置。
|
|
632
|
+
|
|
633
|
+
`options` 类型为 `{ threads?: number }`。未指定时使用浏览器硬件并发数与 4 的较小值(无法读取时为 2),且至少使用 1 个线程。
|
|
634
|
+
|
|
635
|
+
### 标记与选择
|
|
636
|
+
|
|
637
|
+
```ts
|
|
638
|
+
const markerLayer = createMarkersLayer(markerData, {
|
|
639
|
+
layerName: 'device-layer',
|
|
640
|
+
zIndex: 10
|
|
641
|
+
})
|
|
642
|
+
map.addLayer(markerLayer)
|
|
643
|
+
|
|
644
|
+
const select = createLayerSelectByNames(['device-layer'], handleSelected)
|
|
645
|
+
map.addInteraction(select)
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
- `createText(item)` / `createIconStyle(item, active?)`:创建标记文本和图标样式。
|
|
649
|
+
- `createMarker(item, config)` / `createMarkersLayer(dataList, config)`:创建单个标记或标记图层。
|
|
650
|
+
- `createElasticMarkerLayer(dataList, config)`:按缩放级别切换 `img`、`smallImg`、`largeImg`,通过库的生命周期方法移除时自动解绑缩放监听。
|
|
651
|
+
- `changeUnselectStyle(featureCollection)`:清空选择集合并恢复未选中样式。
|
|
652
|
+
- `createLayerSelectByNames(layerNames, selectedHandler?, unSelectHandler?)`:按多个图层名选择标记。
|
|
653
|
+
- `createMoveMarkerLayer(dataItem, config)`:创建单标记图层并加入当前地图。
|
|
654
|
+
|
|
655
|
+
### 绘制、GeoJSON 与视野
|
|
656
|
+
|
|
657
|
+
- `createDrawInteraction(type, vectorLayer, openTip?)`:创建绘制交互。
|
|
658
|
+
- `getDrawStyle(feature, drawStyle?)`:为线和面绘制追加长度/面积标签。
|
|
659
|
+
- `createGeoJsonLayer(geoJson, style, config?)`:直接从 GeoJSON 创建矢量图层。
|
|
660
|
+
- `flyToAnimate(center, zoom?)`:使用两段缩放动画飞到目标点。
|
|
661
|
+
|
|
662
|
+
相关类型包括 `LayerConfig`、`DataItemConfig`、`ElasticDataItemConfig`。
|
|
663
|
+
|
|
664
|
+
---
|
|
665
|
+
|
|
666
|
+
## 十一、类型定义(`core/types.ts`,`export * from './core/types'`)
|
|
522
667
|
|
|
523
668
|
```ts
|
|
524
669
|
interface CustomMap extends OlMap {
|
|
@@ -557,17 +702,19 @@ enum GeometryType {
|
|
|
557
702
|
|
|
558
703
|
## 图层约定属性
|
|
559
704
|
|
|
560
|
-
工具库通过图层 properties 标记元信息,维护时请保持一致:`_isBaseLayer`、`_layerName`、`_isCustom`、`_isVectorLayer`、`_isClusterLayer`、`_isMassMarksLayer`、`_selectInteraction`、`_uuidSet`、`_dataList`、`_vectorConfig`、`_isAutoFit`、`_massMarksStyles`、`_statusNum`。
|
|
705
|
+
工具库通过图层 properties 标记元信息,维护时请保持一致:`_isBaseLayer`、`_layerName`、`_isCustom`、`_isVectorLayer`、`_isClusterLayer`、`_isMassMarksLayer`、`_selectInteraction`、`_resolutionChangeKey`、`_uuidSet`、`_dataList`、`_vectorConfig`、`_isAutoFit`、`_massMarksStyles`、`_statusNum`。
|
|
561
706
|
|
|
562
707
|
## 构建
|
|
563
708
|
|
|
564
709
|
```bash
|
|
565
|
-
pnpm --dir packages/map-utils build
|
|
566
|
-
pnpm --dir packages/map-utils
|
|
710
|
+
pnpm --dir packages/map-utils build # tsdown 产出 esm + cjs + d.ts(压缩)
|
|
711
|
+
pnpm --dir packages/map-utils check:types # tsc --noEmit
|
|
712
|
+
pnpm --dir packages/map-utils test # build + check:types + node:test
|
|
713
|
+
pnpm --dir packages/map-utils dev # watch 模式
|
|
567
714
|
```
|
|
568
715
|
|
|
569
716
|
## 注意事项
|
|
570
717
|
|
|
571
|
-
-
|
|
718
|
+
- **单例副作用**:绝大多数独立函数依赖模块级 `instance`,请先调用 `createMapInstance`;`createMap` 只创建独立地图,`disposeMap` 后 `instance` 为 `undefined`。
|
|
572
719
|
- **坐标系**:输入数据可通过 `config.crsForm` / `data.crsForm` 指定源坐标系,内部统一转为 `WGS84`。
|
|
573
720
|
- **天地图令牌**:`createMapWorldLayer` / `createZheJiangLayer` 内置了默认 `tk`,正式项目请传入自有令牌。
|