@ywbgn/bgl-package 1.2.1 → 1.2.2

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/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @ywbgn/bgl-package
2
2
 
3
- 基于 Vue 3 与 `@arcgis/core` 的地图组件库:地图初始化、底图切换、底图卷帘、工具栏(全图、全屏、缩放、定位、测距、测面、图层管理、业务卷帘、地图标注、条件查询)、**空间分析面板**(`SpatialAnalysisPanel`),业务图层加载 / Portal Token 注册,以及平移边界约束(`panBounds` / `applyPanBoundsConstraint`)。
3
+ 基于 Vue 3 与 `@arcgis/core` 的地图组件库:地图初始化、底图切换、底图卷帘、工具栏(全图、全屏、缩放、上一/下一视图、定位、测距、测面、图层管理、业务卷帘、地图标注、条件查询、TXT 画图)、**空间分析面板**(`SpatialAnalysisPanel`)、通用表格(`BglDataTable`),业务图层加载 / Portal Token 注册与续期,以及平移边界约束(`panBounds` / `applyPanBoundsConstraint`)。
4
4
 
5
5
  ## 安装依赖
6
6
 
@@ -27,18 +27,32 @@ app.use(VueArcgisMap)
27
27
  app.mount('#app')
28
28
  ```
29
29
 
30
+ 组件库自身样式:ESM 入口构建时已注入 CSS;按需 / UMD 或样式丢失时再显式引入:
31
+
32
+ ```js
33
+ import '@ywbgn/bgl-package/style.css'
34
+ ```
35
+
30
36
  按需引入(不全局注册):
31
37
 
32
38
  ```js
33
39
  import {
34
40
  ArcgisMap,
35
41
  BasemapSwitch,
42
+ LayerSwitch,
36
43
  SwipeCompare,
37
44
  MapToolbar,
45
+ SpatialAnalysisPanel,
46
+ BglInput,
47
+ BglSelect,
48
+ BglDataTable,
38
49
  provideBasemapKeys,
39
50
  loadBusinessLayers,
51
+ setPendingBusinessLayers,
40
52
  registerPortalToken,
53
+ registerPortalAccessToken,
41
54
  startPortalTokenRenewal,
55
+ startPortalTokenRenewalWithFetcher,
42
56
  applyPanBoundsConstraint,
43
57
  goToFullExtent
44
58
  } from '@ywbgn/bgl-package'
@@ -48,7 +62,10 @@ import type {
48
62
  MapReadyPayload,
49
63
  ToolbarToolId,
50
64
  LonLatExtent,
51
- PanConstraintHandle
65
+ PanConstraintHandle,
66
+ MapBounds,
67
+ BglDataTableColumn,
68
+ BglDataTableRow
52
69
  } from '@ywbgn/bgl-package'
53
70
  ```
54
71
 
@@ -56,9 +73,9 @@ import type {
56
73
 
57
74
  1. 先拿到底图密钥 / 系统参数(含 `minZoom` / `maxZoom` / 经纬度范围),再挂 `ArcgisMap`(密钥只在挂载时读一次,可用 `v-if` 等配置就绪后再渲染)。
58
75
  2. `@ready` 里用 `shallowRef` 保存 `view` / `sketchLayer` / `map`。
59
- 3. 需要时再挂 `BasemapSwitch`、`SwipeCompare`、`MapLegend`、`MapScaleBar`、`MapToolbar`。
76
+ 3. 需要时再挂 `LayerSwitch`、`BasemapSwitch`、`SwipeCompare`、`MapLegend`、`MapScaleBar`、`MapToolbar`;空间分析挂 `SpatialAnalysisPanel`(不在工具栏内)。
60
77
  4. 有经纬度范围时:给 `ArcgisMap` 传 `:pan-bounds`(自动限制拖动),给 `MapToolbar` 传 `:home-extent`(全图回到范围中心 + minZoom)。
61
- 5. 在 `ready` `startPortalTokenRenewal`(或 `registerPortalToken`)→ `loadBusinessLayers`;卸载时对续期调用 `stop()`。
78
+ 5. 在 `ready` 后登记 Portal Token(生产用 `startPortalTokenRenewalWithFetcher`,内网联调可用 `startPortalTokenRenewal`)→ `loadBusinessLayers`;默认隐藏层用 `setPendingBusinessLayers`;卸载时对续期调用 `stop()`。
62
79
  6. 切底图前同时拆除**底图卷帘**与**工具栏业务卷帘**。
63
80
 
64
81
  ```vue
@@ -76,6 +93,7 @@ import type {
76
93
  @ready="onReady"
77
94
  />
78
95
  <template v-if="view && sketchLayer">
96
+ <LayerSwitch :view="view" />
79
97
  <BasemapSwitch :view="view" @before-change="onBeforeBasemapChange" />
80
98
  <SwipeCompare ref="swipeCompareRef" :view="view" />
81
99
  <MapLegend :view="view" position="left" :offset-x="12" :offset-y="14" />
@@ -97,6 +115,7 @@ import type GraphicsLayer from '@arcgis/core/layers/GraphicsLayer.js'
97
115
  import {
98
116
  ArcgisMap,
99
117
  BasemapSwitch,
118
+ LayerSwitch,
100
119
  MapLegend,
101
120
  MapScaleBar,
102
121
  MapToolbar,
@@ -167,7 +186,7 @@ const onBeforeBasemapChange = () => {
167
186
 
168
187
  ### 通用输入组件
169
188
 
170
- 组件库提供统一深色主题样式的 `BglInput` 和 `BglSelect`,支持全局注册或按需引入。使用组件前请引入组件库样式:
189
+ 组件库提供统一深色主题样式的 `BglInput`、`BglSelect` 和 `BglDataTable`,支持全局注册或按需引入。使用组件前请引入组件库样式:
171
190
 
172
191
  ```ts
173
192
  import '@ywbgn/bgl-package/style.css'
@@ -196,7 +215,7 @@ const statusOptions = [
196
215
  按需引入时,在页面组件中直接导入:
197
216
 
198
217
  ```ts
199
- import { BglInput, BglSelect } from '@ywbgn/bgl-package'
218
+ import { BglInput, BglSelect, BglDataTable } from '@ywbgn/bgl-package'
200
219
  ```
201
220
 
202
221
  #### BglInput
@@ -269,6 +288,64 @@ const statusOptions = [
269
288
  />
270
289
  ```
271
290
 
291
+ #### BglDataTable
292
+
293
+ 通用数据表格:固定表头 + 可滚动表体 + 可选底部固定区。表头与表体分表渲染,纵向滚动时表头不跟着动;列宽按内容测量后对齐。空间分析面板结果表即使用此组件,业务侧也可单独用于统计排行等场景。
294
+
295
+ 父容器需要有明确高度(或处于 flex 列布局且 `min-height: 0`),表体才能内部滚动。
296
+
297
+ ```vue
298
+ <BglDataTable
299
+ v-model:active-index="activeIndex"
300
+ :columns="columns"
301
+ :rows="rows"
302
+ align="center"
303
+ >
304
+ <template #footer>
305
+ <span>共 {{ rows.length }} 条</span>
306
+ </template>
307
+ </BglDataTable>
308
+ ```
309
+
310
+ ```ts
311
+ import { ref } from 'vue'
312
+ import type { BglDataTableColumn, BglDataTableRow } from '@ywbgn/bgl-package'
313
+
314
+ const activeIndex = ref(-1)
315
+ const columns: BglDataTableColumn[] = [
316
+ { title: '序号', key: 'index', width: '56px', render: (_row, index) => index + 1 },
317
+ { title: '名称', key: 'name' },
318
+ { title: '面积(亩)', key: 'area', render: (row) => Number(row.area || 0).toFixed(2) }
319
+ ]
320
+ const rows = ref<BglDataTableRow[]>([
321
+ { name: '示例牧户', area: 12.5 }
322
+ ])
323
+ ```
324
+
325
+ | 属性 | 类型 | 默认值 | 说明 |
326
+ | --- | --- | --- | --- |
327
+ | `columns` | `BglDataTableColumn[]` | `[]` | 列定义 |
328
+ | `rows` | `BglDataTableRow[]` | `[]` | 行数据 |
329
+ | `align` | `'left' \| 'center'` | `'left'` | 表头与单元格对齐 |
330
+ | `activeIndex` | `number` | `-1` | 当前高亮行下标,`-1` 表示无;支持 `v-model:active-index` |
331
+
332
+ `BglDataTableColumn`:
333
+
334
+ | 字段 | 类型 | 说明 |
335
+ | --- | --- | --- |
336
+ | `title` | `string` | 表头文案 |
337
+ | `key` | `string` | 列标识;默认从行对象取 `row[key]`,也作为单元格插槽名 |
338
+ | `width` | `string` | 可选列宽,如 `'48px'`;未测量前作为最小宽度 |
339
+ | `render` | `(row, index) => string \| number` | 可选单元格渲染;传入后优先于 `row[key]` |
340
+
341
+ 组件事件与插槽:
342
+
343
+ - `update:activeIndex(index)`:点击行时触发,可通过 `v-model:active-index` 接收。
344
+ - `#footer`:底部固定区;不传则不渲染。
345
+ - `#cell-<key>`:按列覆盖单元格内容,作用域为 `{ row, index, column, value }`。
346
+
347
+ 暴露方法:`scrollToTop()`,将表体滚回左上角(切换 Tab 等场景使用)。
348
+
272
349
  ### ArcgisMap
273
350
 
274
351
  | Prop / 能力 | 说明 |
@@ -284,10 +361,31 @@ const statusOptions = [
284
361
  - `panBounds` 在 view ready 后自动调用 `applyPanBoundsConstraint` + `wrapViewGoTo`;组件卸载时自动清理
285
362
  - 有 `panBounds` 时,初始会定位到范围中心 + `minZoom`(与「全图」一致)
286
363
 
364
+ ### LayerSwitch(图层显隐,独立入口)
365
+
366
+ 停靠在底图按钮**正上方**,与底图/卷帘同款 50×50 入口。点击弹出业务图层列表,用眼睛切换显隐。再点按钮或点击外部关闭。
367
+
368
+ 与工具栏「图层管理」独立:本组件只做显隐,不含排序 / 透明度 / 定位。
369
+
370
+ ```vue
371
+ <LayerSwitch :view="view" appearance="frame" />
372
+ ```
373
+
374
+ | Prop | 说明 |
375
+ | -------------- | ---------------------------------------------------------------- |
376
+ | `view` | 必填 |
377
+ | `idPrefix` | 业务层前缀,默认`bgl-biz-`(需与 `loadBusinessLayers` 一致) |
378
+ | `appearance` | `'plain'` \| `'frame'`,默认 `frame`。`plain` 为纯色圆角面板;`frame` 用切图九宫格铺背景 |
379
+
380
+ 待创建隐藏层会出现在列表中,点眼睛显示后才真正上图(与图层管理勾选行为一致)。
381
+
382
+ 默认 `left: 16px`、`bottom: 390px`(底图默认 330px 之上留 50+10 空隙),可用 `--bgl-layer-left` / `--bgl-layer-bottom` / `--bgl-layer-z` 覆盖。
383
+
287
384
  ### BasemapSwitch(底图切换)
288
385
 
289
386
  - 必填 `view`
290
387
  - 可选 `keys`
388
+ - 可选 `appearance`:`'plain'` \| `'frame'`,默认 `frame`(切图背景;工具栏弹框仍为 plain)
291
389
  - 事件 `before-change`:成功切换底图**前**触发(用于拆卷帘)
292
390
 
293
391
  可选底图:天地图影像 / 矢量、星图地球、吉林一号、ArcGIS 影像。缺 Key 时可选中,切换时会提示。
@@ -295,11 +393,12 @@ const statusOptions = [
295
393
  ### SwipeCompare(底图卷帘)
296
394
 
297
395
  - 左下角入口,对比**底图影像**
396
+ - 可选 `appearance`:`'plain'` \| `'frame'`,默认 `frame`(与底图弹框一致)
298
397
  - 方法 `destroySwipe()`:拆除 Swipe 并移除左侧对比层
299
398
 
300
399
  ### MapToolbar(工具栏)
301
400
 
302
- 内置工具:全图、全屏、放大、缩小、坐标定位、距离测量、面积测量、图层管理、业务图层卷帘、地图标注、条件查询。
401
+ 内置工具:全图、全屏、放大、缩小、上一视图、下一视图、坐标定位、距离测量、面积测量、图层管理、业务图层卷帘、地图标注、条件查询、TXT 画图。
303
402
 
304
403
  | Prop / 能力 | 说明 |
305
404
  | -------------------------- | ------------------------------------------------------------------------ |
@@ -318,7 +417,7 @@ const statusOptions = [
318
417
 
319
418
  工具 id(`ToolbarToolId`):
320
419
 
321
- `fullExtent` | `fullscreen` | `zoomIn` | `zoomOut` | `coordinateLocate` | `distanceMeasure` | `areaMeasure` | `layerManage` | `layerSwipe` | `mapLabel` | `conditionQuery`
420
+ `fullExtent` | `fullscreen` | `zoomIn` | `zoomOut` | `prevExtent` | `nextExtent` | `coordinateLocate` | `distanceMeasure` | `areaMeasure` | `layerManage` | `layerSwipe` | `mapLabel` | `conditionQuery` | `txtDraw`
322
421
 
323
422
  ```vue
324
423
  <MapToolbar
@@ -352,22 +451,25 @@ const coordinateSystemConfig = {
352
451
 
353
452
  | 工具 | 行为 |
354
453
  | ---- | ------------------------------------------------------------------------------------------------- |
355
- | 全图 | 有`homeExtent` 时:`goToFullExtent`(范围中心 + minZoom);否则用 `homeCenter` / 仅 minZoom |
356
- | 全屏 | 对`document.documentElement` 请求整页全屏(接近 F11),再次点击或 Esc 退出 |
454
+ | 全图 | 有`homeExtent` 时:`goToFullExtent`(范围中心 + minZoom);否则用 `homeCenter` / 仅 minZoom |
455
+ | 全屏 | 对`document.documentElement` 请求整页全屏(接近 F11),再次点击或 Esc 退出 |
456
+ | 上一视图 | 回退到上一次静止视野(平移 / 缩放后入栈,最多 30 条);无历史时按钮禁用 |
457
+ | 下一视图 | 前进到回退前的视野;无可前进记录时按钮禁用 |
357
458
 
358
459
  #### 内置面板说明
359
460
 
360
461
  | 工具 | 作用 | 注意 |
361
462
  | -------- | ---------------------------------------- | ---------------------------------------------------- |
362
- | 图层管理 | 业务层显隐、透明度、排序、定位 | 仅识别`layerIdPrefix` 前缀图层;若加载时做过坐标系校验,不一致图层会标记「坐标系不一致」 |
463
+ | 图层管理 | 业务层显隐、透明度、排序、定位 | 仅识别`layerIdPrefix` 前缀图层;待创建隐藏层会出现在列表中,勾选后才真正上图;若加载时做过坐标系校验,不一致图层会标记「坐标系不一致」 |
363
464
  | 卷帘对比 | 选左右**业务层**做 Swipe | 与底图卷帘互斥(应用时自动拆另一侧) |
364
465
  | 坐标定位 | 按所选坐标系输入或拾取坐标后定位 | `coordinateSystemConfig` 可由业务系统动态下发默认坐标系与可选项 |
365
466
  | 地图标注 | 按字段设置`labelingInfo` | 仅**FeatureLayer**;MapImageLayer 不出现在列表 |
366
467
  | 条件查询 | 拼 WHERE →`queryFeatures` → 定位高亮 | 仅 FeatureLayer;字段值去重最多约 1000 条 |
468
+ | TXT 画图 | 上传经纬度 txt,在地图上绘面并计算亩数 | 仅 `.txt`,≤ 10MB;自动识别「经度,纬度」或「纬度,经度」;打开面板期间会暂停 `panBounds`,关闭约 3 秒后恢复 |
367
469
 
368
470
  ### MapLegend(图例,独立常开)
369
471
 
370
- 与底图切换、卷帘一样单独挂载,**不在工具栏内**;默认常开,基于 ArcGIS `Legend` 微件。
472
+ 与底图切换、卷帘一样单独挂载,**不在工具栏内**;默认常开,基于 ArcGIS `LegendViewModel` 渲染。
371
473
 
372
474
  - 只展示业务图层(`idPrefix` 前缀,默认 `bgl-biz-`)
373
475
  - 排除 `listMode === 'hide'` 的图层(如绘制层)
@@ -379,19 +481,33 @@ const coordinateSystemConfig = {
379
481
  position="left"
380
482
  :offset-x="12"
381
483
  :offset-y="14"
484
+ appearance="plain"
485
+ />
486
+ ```
487
+
488
+ 切图背景模式:
489
+
490
+ ```vue
491
+ <MapLegend
492
+ :view="view"
493
+ position="left"
494
+ :offset-x="12"
495
+ :offset-y="14"
496
+ appearance="frame"
382
497
  />
383
498
  ```
384
499
 
385
- | Prop | 说明 |
386
- | ------------ | ---------------------------------------------------------------- |
387
- | `view` | 必填 |
388
- | `idPrefix` | 业务层前缀,默认`bgl-biz-`(需与 `loadBusinessLayers` 一致) |
389
- | `position` | `'left'` \| `'right'`,默认 `left`(右侧有业务抽屉时用左) |
390
- | `offsetX` | 水平边距(px),默认`12` |
391
- | `offsetY` | 相对地图底边抬高(px),默认`14` |
500
+ | Prop | 说明 |
501
+ | -------------- | ---------------------------------------------------------------- |
502
+ | `view` | 必填 |
503
+ | `idPrefix` | 业务层前缀,默认`bgl-biz-`(需与 `loadBusinessLayers` 一致) |
504
+ | `position` | `'left'` \| `'right'`,默认 `left`(右侧有业务抽屉时用左) |
505
+ | `offsetX` | 水平边距(px),默认`12` |
506
+ | `offsetY` | 相对地图底边抬高(px),默认`14` |
507
+ | `appearance` | `'plain'` \| `'frame'`,默认 `plain`。`plain` 为纯色圆角面板;`frame` 用切图九宫格铺背景 |
392
508
 
393
509
  默认尺寸 **150×240px**(可用 CSS 变量 `--bgl-legend-width` / `--bgl-legend-height` 覆盖)。
394
- 层级默认约 `1050`,可用 `--bgl-legend-z` 覆盖。
510
+ 层级默认 `100`(与底图切换、工具栏、比例尺一致),可用 `--bgl-legend-z` 覆盖。
395
511
 
396
512
  与比例尺同侧时,建议比例尺加大 `offsetX`(例如图例 `12`、比例尺 `170`),避免重叠。
397
513
 
@@ -446,6 +562,89 @@ const coordinateSystemConfig = {
446
562
  - 容器 `pointer-events: none`,不挡地图拖拽
447
563
  - 层级默认 `100`(与底图切换、图例、工具栏一致),可用 `--bgl-scalebar-z` 覆盖
448
564
 
565
+ ### SpatialAnalysisPanel(空间分析)
566
+
567
+ 独立面板,**不在工具栏内**。用于上传图斑、与九类业务图层叠加比对、统计压占面积,并导出 Word / TXT。可用工具栏 `#extra` 按钮控制显隐。
568
+
569
+ 叠加勾选项与图层 `title`(`BusinessLayerConfig.mapServiceName`)必须一致:
570
+
571
+ | 面板勾选 | 图层 title |
572
+ | -------- | ---------- |
573
+ | 确权 | 草场确权 |
574
+ | 草地 | 草地分布 |
575
+ | 林地 | 林地分布 |
576
+ | 湿地 | 湿地分布 |
577
+ | 耕地 | 耕地分布 |
578
+ | 保护区 | 保护区 |
579
+ | 林保图 | 林保图 |
580
+ | 生态红线 | 生态红线 |
581
+ | 基本草原 | 基本草原 |
582
+
583
+ 默认勾选「确权」。勾选时按 title 显示图层;若该层尚未上图(已用 `setPendingBusinessLayers` 登记),会现场物化后再显示。找不到图层时控制台警告,不中断。
584
+
585
+ ```vue
586
+ <SpatialAnalysisPanel
587
+ v-if="showAnalysis && map && view"
588
+ :map="map"
589
+ :view="view"
590
+ :system-coordinate-wkid="systemCoordinateWkid"
591
+ :map-bounds="mapBounds"
592
+ />
593
+ ```
594
+
595
+ ```ts
596
+ import type Map from '@arcgis/core/Map.js'
597
+ import type { MapBounds, MapReadyPayload } from '@ywbgn/bgl-package'
598
+
599
+ const showAnalysis = ref(false)
600
+ const map = shallowRef<Map | null>(null)
601
+ const systemCoordinateWkid = ref<number | null>(null)
602
+ const mapBounds = ref<MapBounds | null>(null)
603
+
604
+ const onReady = async (payload: MapReadyPayload) => {
605
+ map.value = payload.map
606
+ view.value = payload.view
607
+ // mapBounds.value = { jwXMin, jwXMax, jwYMin, jwYMax }
608
+ }
609
+ ```
610
+
611
+ | Prop | 说明 |
612
+ | ---- | ---- |
613
+ | `map` / `view` | 必填;用 `shallowRef`,不要 `ref()` |
614
+ | `systemCoordinateWkid` | 系统参数坐标系;`8848` 按 CGCS2000_Albers,其他按 WKID |
615
+ | `mapBounds` | `{ jwXMin, jwXMax, jwYMin, jwYMax }`,分析范围约束;不传则全球范围 |
616
+
617
+ 操作流程:
618
+
619
+ 1. 勾选叠加类型(默认确权)。
620
+ 2. 「选择文件」→ 填数据类型(面 / 线 / 点);线、点需填缓冲距离(米)。
621
+ 3. 上传 `.txt`(CGCS2000 经纬度 / `GCS_China_Geodetic_Coordinate_System_2000`,每行「经度,纬度」)或带 `.shp` / `.prj` / `.dbf` 的 `.zip`。TXT ≤ 10MB,ZIP ≤ 500MB。
622
+ 4. 上图后可编辑折点。
623
+ 5. 「分析」:与勾选图层求交,输出压占面积、牧户及分类明细。
624
+ 6. 「导出」Word(含地图截图)或 TXT 坐标。
625
+ 7. 「重置」清空图斑、结果与勾选(回到默认确权)。关闭面板会释放 Sketch 与分析图层。
626
+
627
+ #### 结果区
628
+
629
+ 分析完成后,结果区按叠加类型分 Tab(左右箭头可滚动)。分析前展示全部 Tab;分析后只保留当前勾选类型。表格使用 `BglDataTable`(居中对齐),点击行高亮;切换 Tab 时滚动回到顶部。
630
+
631
+ 底部固定汇总:
632
+
633
+ | 指标 | 说明 |
634
+ | ---- | ---- |
635
+ | 分析面积(亩) | 图斑面积;确权压占面积更大时取确权合计 |
636
+ | 牧户/集体(个) | 当前 Tab 行数 |
637
+ | 确权面积(亩) / 资源面积(亩) | 确权 Tab 汇总 `occupiedArea`;其余 Tab 汇总「小计」 |
638
+
639
+ 各 Tab 列概要(数字列保留两位小数):
640
+
641
+ | Tab | 列 |
642
+ | --- | --- |
643
+ | 确权 | 序号、牧户名称、覆盖面积(亩)、苏木镇、嘎查村 |
644
+ | 草地 / 林地 / 湿地 / 耕地 / 基本草原 / 生态红线 | 序号、牧户名称、苏木镇、嘎查村、小计、各分类面积 |
645
+ | 保护区 | 上列基础字段 + 保护区名称、核心区、缓冲区 |
646
+ | 林保图 | 上列基础字段 + 乔木林地、灌木林地、宜林荒山荒地、其他 |
647
+
449
648
  ## 平移边界约束
450
649
 
451
650
  基于 ArcGIS `view.constraints.geometry`(只约束**视图中心点**):按当前可视范围反推中心点合法活动区域,效果上等价于「经纬度矩形始终不拖出屏幕」。所有缩放级别均生效;拖到边缘直接停住,不做回弹。
@@ -455,7 +654,9 @@ const coordinateSystemConfig = {
455
654
  ```ts
456
655
  import {
457
656
  applyPanBoundsConstraint,
458
- goToFullExtent
657
+ goToFullExtent,
658
+ suspendPanBounds,
659
+ resumePanBounds
459
660
  } from '@ywbgn/bgl-package'
460
661
  import type { LonLatExtent, PanConstraintHandle } from '@ywbgn/bgl-package'
461
662
 
@@ -482,6 +683,8 @@ handle.remove()
482
683
  | `applyPanBoundsConstraint(view, extent)` | 挂平移约束并初始定位到全图;返回`PanConstraintHandle` |
483
684
  | `handle.wrapViewGoTo(view)` | 包装`view.goTo`,定位期间临时放开约束 |
484
685
  | `handle.remove()` | 释放 watch,恢复原始`goTo`,清空 `constraints.geometry` |
686
+ | `handle.suspend()` / `handle.resume()` | 长期暂停 / 恢复约束(如 TXT 画图打开面板) |
687
+ | `suspendPanBounds(view)` / `resumePanBounds(view)` | 按 view 查找已登记句柄后暂停 / 恢复 |
485
688
  | `goToFullExtent(view, extent)` | 定位到范围中心 +`constraints.minZoom` |
486
689
 
487
690
  ## 两套卷帘(务必区分)
@@ -506,6 +709,7 @@ const layers = loadBusinessLayers({
506
709
  layers: configs,
507
710
  reverse: true,
508
711
  idPrefix: BUSINESS_LAYER_ID_PREFIX,
712
+ // accessToken, // 已登记 Portal token 时建议传入,保证首轮元数据请求带 token
509
713
  // labelConfigs: [...] // 见下文「业务图层注记」
510
714
  // expectedSpatialReferenceWkid: 8848, // 系统参数;8848=CGCS2000_Albers,其他为 WKID
511
715
  })
@@ -532,6 +736,37 @@ const layers = loadBusinessLayers({
532
736
  - 不一致记录会登记到组件内,图层管理面板会显示「坐标系不一致」标记,并在顶部汇总数量
533
737
  - 注意:`systemCoordinate` 表示业务图层期望坐标系;坐标定位面板默认输入坐标系仍优先使用 `latitudeLongitude`(经纬度)
534
738
 
739
+ ### 默认隐藏层(延迟上图)
740
+
741
+ `layerVisible` 为假的图层不要立刻 `loadBusinessLayers`,用 `setPendingBusinessLayers` 登记。图层管理勾选显示、或空间分析勾选对应叠加类型时,才会真正请求服务并 `reorderBusinessLayers`。
742
+
743
+ ```ts
744
+ import {
745
+ loadBusinessLayers,
746
+ setPendingBusinessLayers,
747
+ clearPendingBusinessLayers,
748
+ resolveLayerVisible
749
+ } from '@ywbgn/bgl-package'
750
+
751
+ const visible = configs.filter((item) => resolveLayerVisible(item.layerVisible))
752
+ const pending = configs.filter((item) => !resolveLayerVisible(item.layerVisible))
753
+
754
+ loadBusinessLayers({
755
+ map,
756
+ layers: visible,
757
+ reverse: true,
758
+ accessToken
759
+ })
760
+ setPendingBusinessLayers(pending, {
761
+ allConfigs: configs,
762
+ accessToken,
763
+ reverse: true
764
+ })
765
+
766
+ // 页面卸载或重新上图前
767
+ clearPendingBusinessLayers()
768
+ ```
769
+
535
770
  ### 业务图层注记(地图上显示属性字段)
536
771
 
537
772
  对齐 forestpests:前端配置指定图层的 `labelingInfo`(Arcade + 描边样式),**不依赖**后端 mapServiceSettings。
@@ -575,7 +810,41 @@ loadBusinessLayers({
575
810
 
576
811
  注意:仅 **FeatureLayer** 生效;与工具栏「地图标注」可并存(手动标注会覆盖该层 `labelingInfo`)。
577
812
 
578
- ### registerPortalToken / startPortalTokenRenewal
813
+ ### Portal Token
814
+
815
+ 生产不要在前端持有 Portal 账号密码。由后端签发短期 token,前端只登记 / 续期。
816
+
817
+ **生产推荐:后端代签 + 自动续期**
818
+
819
+ ```ts
820
+ const renewal = await startPortalTokenRenewalWithFetcher({
821
+ portalUrl: 'https://example.com',
822
+ extraServers: ['https://gis.example.com/server'],
823
+ fetchToken: async () => {
824
+ const res = await fetch('/api/portal-token')
825
+ const data = await res.json()
826
+ // token 必填;expires 为毫秒时间戳,有则按此调度续期
827
+ return { token: data.token, expires: data.expires }
828
+ },
829
+ // expirationMinutes: 60, // fetch 未返回 expires 时的兜底有效期
830
+ onRenewError: (err) => console.error(err)
831
+ })
832
+
833
+ // 组件卸载时
834
+ renewal.stop()
835
+ ```
836
+
837
+ 已有 token、无需续期时:
838
+
839
+ ```ts
840
+ registerPortalAccessToken({
841
+ portalUrl: 'https://example.com',
842
+ token: accessToken,
843
+ extraServers: ['https://gis.example.com/server']
844
+ })
845
+ ```
846
+
847
+ **内网联调:前端 generateToken(勿用于生产)**
579
848
 
580
849
  单次注册:
581
850
 
@@ -609,11 +878,10 @@ const renewal = await startPortalTokenRenewal({
609
878
  onRenewError: (err) => console.error(err)
610
879
  })
611
880
 
612
- // 组件卸载时
613
881
  renewal.stop()
614
882
  ```
615
883
 
616
- 注意:前端持有账号密码仅适合内网联调;生产应由后端签发 token。
884
+ 续期失败时库内会节流通知(首次立即,之后同一失败串最多约每 15 分钟一次),并每 5 分钟重试。`onRenewError` 仍建议业务侧做提示。
617
885
 
618
886
  ### 密钥怎么传
619
887
 
@@ -633,7 +901,7 @@ provideBasemapKeys(basemapKeys)
633
901
 
634
902
  也可给组件传 `:keys`(优先于 inject)。
635
903
 
636
- 导出:`BasemapKeys`、`BASEMAP_KEYS_KEY`、`provideBasemapKeys`、`useBasemapKeys`、`BASEMAP_OPTIONS`、`ToolbarToolId`、`DEFAULT_TOOLBAR_TOOLS`、`LonLatExtent`、`PanConstraintHandle`、`applyPanBoundsConstraint`、`goToFullExtent`。
904
+ 导出:`BasemapKeys`、`BASEMAP_KEYS_KEY`、`provideBasemapKeys`、`useBasemapKeys`、`BASEMAP_OPTIONS`、`ToolbarToolId`、`DEFAULT_TOOLBAR_TOOLS`、`LonLatExtent`、`PanConstraintHandle`、`applyPanBoundsConstraint`、`goToFullExtent`、`suspendPanBounds`、`resumePanBounds`、`registerPortalAccessToken`、`startPortalTokenRenewalWithFetcher`、`setPendingBusinessLayers`、`MapBounds`、`BglDataTable`、`BglDataTableColumn`、`BglDataTableRow`。
637
905
 
638
906
  ## 样式定制
639
907
 
@@ -643,19 +911,22 @@ provideBasemapKeys(basemapKeys)
643
911
 
644
912
  | 变量 | 作用对象 | 默认 |
645
913
  | --------------------------- | ---------------------- | -------------------- |
914
+ | `--bgl-layer-left` | 图层入口 | `16px` |
915
+ | `--bgl-layer-bottom` | 图层入口 | `390px` |
916
+ | `--bgl-layer-z` | 图层入口 | `100` |
646
917
  | `--bgl-basemap-left` | 底图入口 | `16px` |
647
918
  | `--bgl-basemap-bottom` | 底图入口 | `160px` |
648
- | `--bgl-basemap-z` | 底图入口 | `1100` |
919
+ | `--bgl-basemap-z` | 底图入口 | `100` |
649
920
  | `--bgl-swipe-left` | 底图卷帘入口 | `16px` |
650
921
  | `--bgl-swipe-bottom` | 底图卷帘入口 | `100px` |
651
- | `--bgl-swipe-z` | 底图卷帘入口 | `1100` |
922
+ | `--bgl-swipe-z` | 底图卷帘入口 | `100` |
652
923
  | `--bgl-toolbar-left` | 工具栏整体(含经纬度) | `50%` |
653
924
  | `--bgl-toolbar-bottom` | 工具栏整体 | `14px` |
654
925
  | `--bgl-toolbar-transform` | 工具栏整体 | `translateX(-50%)` |
655
- | `--bgl-toolbar-z` | 工具栏整体 | `1000` |
926
+ | `--bgl-toolbar-z` | 工具栏整体 | `100` |
656
927
  | `--bgl-legend-width` | 图例宽度 | `150px` |
657
928
  | `--bgl-legend-height` | 图例高度 | `240px` |
658
- | `--bgl-legend-z` | 图例层级 | `1050` |
929
+ | `--bgl-legend-z` | 图例层级 | `100` |
659
930
  | `--bgl-scalebar-z` | 比例尺层级 | `100` |
660
931
 
661
932
  **背景与强调色**
@@ -672,12 +943,15 @@ provideBasemapKeys(basemapKeys)
672
943
 
673
944
  | class | 说明 |
674
945
  | -------------------------------------------------------------- | ------------ |
946
+ | `.layer-switch-wrap` / `.layer-switch-trigger` / `.layer-switch-panel` | 图层显隐 |
675
947
  | `.basemap-switch-wrap` / `.basemap-switch-trigger` | 底图 |
676
948
  | `.swipe-compare-wrap` / `.swipe-compare-trigger` | 底图卷帘 |
677
949
  | `.toolbar-wrap` / `.coordinate-display` / `.toolbar-box` | 工具栏 |
678
950
  | `.map-tool-panel` | 通用浮层面板 |
679
- | `.map-legend` / `.map-legend__body` | 图例 |
951
+ | `.map-legend` / `.map-legend--plain` / `.map-legend--frame` / `.map-legend__body` | 图例 |
680
952
  | `.map-scale-bar` / `.map-scale-bar__body` | 比例尺 |
953
+ | `.spatial-analysis-panel` | 空间分析面板 |
954
+ | `.bgl-data-table` / `.bgl-data-table__head` / `.bgl-data-table__wrap` / `.bgl-data-table__footer` | 通用数据表格 |
681
955
 
682
956
  ## TypeScript
683
957
 
@@ -692,7 +966,11 @@ import type {
692
966
  LonLatExtent,
693
967
  PanConstraintHandle,
694
968
  SpatialReferenceMismatchInfo,
695
- CoordinateSystemConfig
969
+ CoordinateSystemConfig,
970
+ MapBounds,
971
+ PortalTokenRenewalHandle,
972
+ BglDataTableColumn,
973
+ BglDataTableRow
696
974
  } from '@ywbgn/bgl-package'
697
975
  ```
698
976