@3clear/basegis 0.1.5 → 0.1.6
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 +642 -208
- package/dist/basegis.js +3 -2
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,276 +8,360 @@
|
|
|
8
8
|
- `methods`：多地图实时视角联动、独立线图层、台风路径、图片图层、网格图层、海量点、点位聚合、点位抽稀、等值线、风场等高级控制器。
|
|
9
9
|
- `layers`：天地图、GeoServer 金字塔瓦片、WMS、WMTS 图层配置快捷构造器。
|
|
10
10
|
- `assets`：站点、工厂、信息标记和台风中心 SVG 资源。
|
|
11
|
-
- `style.css`：Leaflet
|
|
11
|
+
- `style.css`：BaseGIS 自有图层、标注和截图框选样式，不内嵌 Leaflet 官方 CSS。
|
|
12
12
|
|
|
13
13
|
## 能力总览
|
|
14
14
|
|
|
15
15
|
以下按类型展示 `@3clear/basegis` 的主要业务能力；工具型辅助函数不单独作为能力卡展示。点击名称可跳转到下方详细说明，完整导入方式见[出口](#出口)。
|
|
16
16
|
|
|
17
|
-
###
|
|
17
|
+
### 快速开始
|
|
18
18
|
|
|
19
|
-
<table>
|
|
19
|
+
<table width="90%">
|
|
20
|
+
<thead>
|
|
21
|
+
<tr>
|
|
22
|
+
<th width="20%"><small>名称</small></th>
|
|
23
|
+
<th width="65%"><small>介绍</small></th>
|
|
24
|
+
<th width="15%"><small>查看</small></th>
|
|
25
|
+
</tr>
|
|
26
|
+
</thead>
|
|
20
27
|
<tbody>
|
|
21
28
|
<tr>
|
|
29
|
+
<td><small><a href="#base-gis-lifecycle"><strong>初始化与生命周期</strong></a></small></td>
|
|
22
30
|
<td>
|
|
23
|
-
<
|
|
24
|
-
<small>Cesium / Leaflet 统一 GIS 主入口 · <a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small>
|
|
31
|
+
<small>创建并初始化 BaseGIS 实例，管理实例状态、尺寸刷新和资源销毁。</small>
|
|
25
32
|
</td>
|
|
33
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
26
34
|
</tr>
|
|
27
|
-
</tbody>
|
|
28
|
-
</table>
|
|
29
|
-
|
|
30
|
-
### DEM 地形
|
|
31
|
-
|
|
32
|
-
<table>
|
|
33
|
-
<tbody>
|
|
34
35
|
<tr>
|
|
36
|
+
<td><small><a href="#map-init-config"><strong>地图初始化配置</strong></a></small></td>
|
|
35
37
|
<td>
|
|
36
|
-
<
|
|
37
|
-
<small>Cesium 椭球地形、World Terrain 与地形夸张</small>
|
|
38
|
+
<small>说明构造参数、init() 参数优先级、完整配置分组，以及 setConfig() 的用法与生效规则。</small>
|
|
38
39
|
</td>
|
|
40
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
41
|
+
</tr>
|
|
42
|
+
<tr>
|
|
43
|
+
<td><small><a href="#engine-switch"><strong>切换引擎</strong></a></small></td>
|
|
44
|
+
<td>
|
|
45
|
+
<small>支持 Cesium / Leaflet 运行时切换，并保留当前视野、恢复托管图层。</small>
|
|
46
|
+
</td>
|
|
47
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-4" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
48
|
+
</tr>
|
|
49
|
+
<tr>
|
|
50
|
+
<td><small><a href="#view-control-scene"><strong>视角控制与场景模式</strong></a></small></td>
|
|
51
|
+
<td>
|
|
52
|
+
<small>支持视角缩放、重置、范围适配，以及 2D、2.5D、3D 场景模式切换。</small>
|
|
53
|
+
</td>
|
|
54
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr>
|
|
57
|
+
<td><small><a href="#map-view-listener"><strong>地图视角监听</strong></a></small></td>
|
|
58
|
+
<td>
|
|
59
|
+
<small>监听地图移动、缩放和视角变化的开始、过程与结束状态。</small>
|
|
60
|
+
</td>
|
|
61
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-36" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
39
62
|
</tr>
|
|
40
|
-
</tbody>
|
|
41
|
-
</table>
|
|
42
|
-
|
|
43
|
-
### 地图截图导出
|
|
44
|
-
|
|
45
|
-
<table>
|
|
46
|
-
<tbody>
|
|
47
63
|
<tr>
|
|
64
|
+
<td><small><a href="#map-click-events"><strong>点击事件</strong></a></small></td>
|
|
48
65
|
<td>
|
|
49
|
-
<
|
|
50
|
-
<small>当前视口、框选及指定范围截图 · <a href="http://61.50.111.214:31166/lgmap/test-page-40" target="_blank" rel="noopener noreferrer">查看示例</a></small>
|
|
66
|
+
<small>统一监听 Cesium / Leaflet 地图点击，返回坐标及命中目标信息。</small>
|
|
51
67
|
</td>
|
|
68
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
52
69
|
</tr>
|
|
53
70
|
</tbody>
|
|
54
71
|
</table>
|
|
55
72
|
|
|
56
|
-
###
|
|
73
|
+
### 地图工具（2）
|
|
57
74
|
|
|
58
|
-
<table>
|
|
75
|
+
<table width="90%">
|
|
76
|
+
<thead>
|
|
77
|
+
<tr>
|
|
78
|
+
<th width="20%"><small>名称</small></th>
|
|
79
|
+
<th width="65%"><small>介绍</small></th>
|
|
80
|
+
<th width="15%"><small>查看</small></th>
|
|
81
|
+
</tr>
|
|
82
|
+
</thead>
|
|
59
83
|
<tbody>
|
|
60
84
|
<tr>
|
|
85
|
+
<td><small><a href="#map-screenshot"><strong>地图截图导出</strong></a></small></td>
|
|
61
86
|
<td>
|
|
62
|
-
<
|
|
63
|
-
<small>多地图实例注册与移动、缩放、视角实时联动 · <a href="http://61.50.111.214:31166/lgmap/test-page-36" target="_blank" rel="noopener noreferrer">查看示例</a></small>
|
|
87
|
+
<small>支持当前视口、框选区域及指定范围截图，并导出 PNG 图片。</small>
|
|
64
88
|
</td>
|
|
89
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-40" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
90
|
+
</tr>
|
|
91
|
+
<tr>
|
|
92
|
+
<td><small><a href="#map-view-link-controller"><strong>多地图联动</strong></a></small></td>
|
|
93
|
+
<td>
|
|
94
|
+
<small>支持多地图实例注册，以及移动、缩放和视角实时联动。</small>
|
|
95
|
+
</td>
|
|
96
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-36" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
65
97
|
</tr>
|
|
66
98
|
</tbody>
|
|
67
99
|
</table>
|
|
68
100
|
|
|
69
|
-
###
|
|
101
|
+
### 通用点位图层（5）
|
|
70
102
|
|
|
71
|
-
<table>
|
|
103
|
+
<table width="90%">
|
|
104
|
+
<thead>
|
|
105
|
+
<tr>
|
|
106
|
+
<th width="20%"><small>名称</small></th>
|
|
107
|
+
<th width="65%"><small>介绍</small></th>
|
|
108
|
+
<th width="15%"><small>查看</small></th>
|
|
109
|
+
</tr>
|
|
110
|
+
</thead>
|
|
72
111
|
<tbody>
|
|
73
112
|
<tr>
|
|
74
|
-
<td
|
|
75
|
-
|
|
76
|
-
<small
|
|
113
|
+
<td><small><a href="#basic-graphics"><strong>基础图形与点位</strong></a></small></td>
|
|
114
|
+
<td>
|
|
115
|
+
<small>绘制点、线、面、文字和 Marker，支持 Cesium / Leaflet。</small>
|
|
77
116
|
</td>
|
|
78
|
-
<td
|
|
79
|
-
|
|
80
|
-
|
|
117
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
118
|
+
</tr>
|
|
119
|
+
<tr>
|
|
120
|
+
<td><small><a href="#point-large-layer-controller"><strong>海量点</strong></a></small></td>
|
|
121
|
+
<td>
|
|
122
|
+
<small>使用批量渲染展示大规模点位数据。</small>
|
|
81
123
|
</td>
|
|
124
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-5" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
82
125
|
</tr>
|
|
83
126
|
<tr>
|
|
84
|
-
<td
|
|
85
|
-
|
|
86
|
-
<small
|
|
127
|
+
<td><small><a href="#point-cluster-controller"><strong>点位聚合</strong></a></small></td>
|
|
128
|
+
<td>
|
|
129
|
+
<small>根据地图视图和缩放层级对邻近点位进行聚合展示。</small>
|
|
87
130
|
</td>
|
|
88
|
-
<td
|
|
89
|
-
|
|
90
|
-
|
|
131
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-29" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr>
|
|
134
|
+
<td><small><a href="#point-density-controller"><strong>点位抽稀</strong></a></small></td>
|
|
135
|
+
<td>
|
|
136
|
+
<small>根据当前视野裁剪点位，并按屏幕密度进行抽稀展示。</small>
|
|
91
137
|
</td>
|
|
138
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-8" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
92
139
|
</tr>
|
|
93
|
-
</tbody>
|
|
94
|
-
</table>
|
|
95
|
-
|
|
96
|
-
### geojson
|
|
97
|
-
|
|
98
|
-
<table>
|
|
99
|
-
<tbody>
|
|
100
140
|
<tr>
|
|
141
|
+
<td><small><a href="#marker-icons"><strong>图标</strong></a></small></td>
|
|
101
142
|
<td>
|
|
102
|
-
<
|
|
103
|
-
<small>GeoJSON 点、线、面与按要素设置样式 · <a href="http://61.50.111.214:31166/lgmap/test-page-23" target="_blank" rel="noopener noreferrer">查看示例</a></small>
|
|
143
|
+
<small>提供项目常用图标及告警扩散效果图标。</small>
|
|
104
144
|
</td>
|
|
145
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-41" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
105
146
|
</tr>
|
|
106
147
|
</tbody>
|
|
107
148
|
</table>
|
|
108
149
|
|
|
109
|
-
###
|
|
150
|
+
### 行政区划边界图层（1）
|
|
110
151
|
|
|
111
|
-
<table>
|
|
152
|
+
<table width="90%">
|
|
153
|
+
<thead>
|
|
154
|
+
<tr>
|
|
155
|
+
<th width="20%"><small>名称</small></th>
|
|
156
|
+
<th width="65%"><small>介绍</small></th>
|
|
157
|
+
<th width="15%"><small>查看</small></th>
|
|
158
|
+
</tr>
|
|
159
|
+
</thead>
|
|
112
160
|
<tbody>
|
|
113
161
|
<tr>
|
|
162
|
+
<td><small><a href="#geojson-layer"><strong>GeoJSON 图层</strong></a></small></td>
|
|
114
163
|
<td>
|
|
115
|
-
<
|
|
116
|
-
<small>提供了一些项目中常用的图标及告警扩散效果图标 · <a href="http://61.50.111.214:31166/lgmap/test-page-41" target="_blank" rel="noopener noreferrer">查看示例</a></small>
|
|
164
|
+
<small>支持 GeoJSON 点、线、面、行政区划边界，以及数据驱动的边线、填充和点样式。</small>
|
|
117
165
|
</td>
|
|
166
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-23" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
118
167
|
</tr>
|
|
119
168
|
</tbody>
|
|
120
169
|
</table>
|
|
121
170
|
|
|
122
|
-
###
|
|
171
|
+
### 轨迹路径图层（2）
|
|
123
172
|
|
|
124
|
-
<table>
|
|
173
|
+
<table width="90%">
|
|
174
|
+
<thead>
|
|
175
|
+
<tr>
|
|
176
|
+
<th width="20%"><small>名称</small></th>
|
|
177
|
+
<th width="65%"><small>介绍</small></th>
|
|
178
|
+
<th width="15%"><small>查看</small></th>
|
|
179
|
+
</tr>
|
|
180
|
+
</thead>
|
|
125
181
|
<tbody>
|
|
126
182
|
<tr>
|
|
183
|
+
<td><small><a href="#line-layer-controller"><strong>走航路径</strong></a></small></td>
|
|
127
184
|
<td>
|
|
128
|
-
<
|
|
129
|
-
<small>独立线图层、实线/虚线、固定/流动渐变与沿线动画 · <a href="http://61.50.111.214:31166/lgmap/test-page-34" target="_blank" rel="noopener noreferrer">查看示例</a></small><br>
|
|
130
|
-
<small>支持：逐顶点色、时间裁剪和图标引领的逐步出线；走航轨迹见 <a href="http://61.50.111.214:31166/lgmap/test-page-43" target="_blank" rel="noopener noreferrer">走航示例</a></small>
|
|
185
|
+
<small>轨迹折线、逐顶点浓度着色、时间裁剪与沿线动画；底层支持实线/虚线、固定/流动渐变和图标引领的逐步出线。</small>
|
|
131
186
|
</td>
|
|
187
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-43" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
132
188
|
</tr>
|
|
133
|
-
</tbody>
|
|
134
|
-
</table>
|
|
135
|
-
|
|
136
|
-
### Typhoon 台风路径（1）
|
|
137
|
-
|
|
138
|
-
<table>
|
|
139
|
-
<tbody>
|
|
140
189
|
<tr>
|
|
190
|
+
<td><small><a href="#typhoon-path-controller"><strong>台风路径</strong></a></small></td>
|
|
141
191
|
<td>
|
|
142
|
-
<
|
|
143
|
-
<small>实况路径、强度节点、当前中心、四象限风圈、多机构预报与路径播放 · <a href="http://61.50.111.214:31166/lgmap/test-page-10" target="_blank" rel="noopener noreferrer">查看示例</a></small><br>
|
|
144
|
-
<small>支持：Cesium / Leaflet 同一份规范化台风数据与引擎切换恢复</small>
|
|
192
|
+
<small>实况路径、强度节点、当前中心、四象限风圈、多机构预报与路径播放；支持 Cesium / Leaflet 同一份规范化台风数据与引擎切换恢复。</small>
|
|
145
193
|
</td>
|
|
194
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-10" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
146
195
|
</tr>
|
|
147
196
|
</tbody>
|
|
148
197
|
</table>
|
|
149
198
|
|
|
150
|
-
###
|
|
199
|
+
### 格点填色图层（2）
|
|
151
200
|
|
|
152
|
-
<table>
|
|
201
|
+
<table width="90%">
|
|
202
|
+
<thead>
|
|
203
|
+
<tr>
|
|
204
|
+
<th width="20%"><small>名称</small></th>
|
|
205
|
+
<th width="65%"><small>介绍</small></th>
|
|
206
|
+
<th width="15%"><small>查看</small></th>
|
|
207
|
+
</tr>
|
|
208
|
+
</thead>
|
|
153
209
|
<tbody>
|
|
154
210
|
<tr>
|
|
211
|
+
<td><small><a href="#image-layer-controller"><strong>图片填色图层</strong></a></small></td>
|
|
155
212
|
<td>
|
|
156
|
-
<
|
|
157
|
-
<small>图片覆盖层与时次切换 · <a href="http://61.50.111.214:31166/lgmap/test-page-4" target="_blank" rel="noopener noreferrer">查看示例</a></small><br>
|
|
158
|
-
<small>支持：PNG / JPG / WebP 等浏览器图片、灰度图；可配套 GeoTIFF 取值</small>
|
|
213
|
+
<small>支持 PNG / JPG / WebP 等图片覆盖、灰度图及时次切换，可配套 GeoTIFF 取值。</small>
|
|
159
214
|
</td>
|
|
215
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-4" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
160
216
|
</tr>
|
|
161
|
-
</tbody>
|
|
162
|
-
</table>
|
|
163
|
-
|
|
164
|
-
### Grid 数值网格（1）
|
|
165
|
-
|
|
166
|
-
<table>
|
|
167
|
-
<tbody>
|
|
168
217
|
<tr>
|
|
218
|
+
<td><small><a href="#grid-layer-controller"><strong>网格数值图层</strong></a></small></td>
|
|
169
219
|
<td>
|
|
170
|
-
<
|
|
171
|
-
<small>栅格数值注记与鼠标探针 · <a href="http://61.50.111.214:31166/lgmap/test-page-4" target="_blank" rel="noopener noreferrer">查看示例</a></small><br>
|
|
172
|
-
<small>支持：GeoTIFF、灰度图、直接数值网格</small>
|
|
220
|
+
<small>支持 GeoTIFF、灰度图和直接数值网格的数值注记与鼠标探针。</small>
|
|
173
221
|
</td>
|
|
222
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-4" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
174
223
|
</tr>
|
|
175
224
|
</tbody>
|
|
176
225
|
</table>
|
|
177
226
|
|
|
178
|
-
###
|
|
227
|
+
### 等值线图层（2）
|
|
179
228
|
|
|
180
|
-
<table>
|
|
229
|
+
<table width="90%">
|
|
230
|
+
<thead>
|
|
231
|
+
<tr>
|
|
232
|
+
<th width="20%"><small>名称</small></th>
|
|
233
|
+
<th width="65%"><small>介绍</small></th>
|
|
234
|
+
<th width="15%"><small>查看</small></th>
|
|
235
|
+
</tr>
|
|
236
|
+
</thead>
|
|
181
237
|
<tbody>
|
|
182
238
|
<tr>
|
|
183
|
-
<td
|
|
184
|
-
|
|
185
|
-
<small
|
|
239
|
+
<td><small><a href="#contour-layer-controller"><strong>通用等值线</strong></a></small></td>
|
|
240
|
+
<td>
|
|
241
|
+
<small>已有等值线数据，支持线平滑、线值标签、中心标注与标注避让。</small>
|
|
186
242
|
</td>
|
|
187
|
-
<td
|
|
188
|
-
|
|
189
|
-
|
|
243
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-19" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
244
|
+
</tr>
|
|
245
|
+
<tr>
|
|
246
|
+
<td><small><a href="#raster-contour-controller"><strong>栅格等值线</strong></a></small></td>
|
|
247
|
+
<td>
|
|
248
|
+
<small>没有等值线数据，需要前端通过格点数据自动生成等值线，支持线平滑、标注避让，可选自动检测 H/L 中心。</small>
|
|
190
249
|
</td>
|
|
250
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-18" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
191
251
|
</tr>
|
|
192
252
|
</tbody>
|
|
193
253
|
</table>
|
|
194
254
|
|
|
195
|
-
###
|
|
255
|
+
### 三维渲染（不支持2维）
|
|
196
256
|
|
|
197
|
-
<table>
|
|
257
|
+
<table width="90%">
|
|
258
|
+
<thead>
|
|
259
|
+
<tr>
|
|
260
|
+
<th width="20%"><small>名称</small></th>
|
|
261
|
+
<th width="65%"><small>介绍</small></th>
|
|
262
|
+
<th width="15%"><small>查看</small></th>
|
|
263
|
+
</tr>
|
|
264
|
+
</thead>
|
|
198
265
|
<tbody>
|
|
199
266
|
<tr>
|
|
267
|
+
<td><small><a href="#dem-terrain"><strong>DEM 地形</strong></a></small></td>
|
|
200
268
|
<td>
|
|
201
|
-
<
|
|
202
|
-
<small>Cesium 专有；贡献弧线、灰色烟羽点云、移动烟团与目标汇聚体 · <a href="http://61.50.111.214:31166/lgmap/test-page-42" target="_blank" rel="noopener noreferrer">查看示例</a></small><br>
|
|
203
|
-
<small>页面最少只传 target + flows，体云复用 BaseGIS 现有体渲染</small>
|
|
269
|
+
<small>Cesium 专用，支持椭球地形、World Terrain 与地形夸张。</small>
|
|
204
270
|
</td>
|
|
271
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
205
272
|
</tr>
|
|
206
|
-
</tbody>
|
|
207
|
-
</table>
|
|
208
|
-
|
|
209
|
-
### Volume 三维体渲染（1）
|
|
210
|
-
|
|
211
|
-
<table>
|
|
212
|
-
<tbody>
|
|
213
273
|
<tr>
|
|
274
|
+
<td><small><a href="#source-transport"><strong>源解析传输</strong></a></small></td>
|
|
214
275
|
<td>
|
|
215
|
-
<
|
|
216
|
-
<small>Cesium 专有；三维标量场体积采样与裁切 · <a href="http://61.50.111.214:31166/lgmap/test-page-14" target="_blank" rel="noopener noreferrer">查看示例</a></small><br>
|
|
217
|
-
<small>支持：一维体数据 + rows / cols / heights 网格维度、原位更新体数据与屏幕位置取值</small>
|
|
276
|
+
<small>展示贡献弧线、灰色烟羽点云、移动烟团与目标汇聚体，体云复用现有体渲染。</small>
|
|
218
277
|
</td>
|
|
278
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-42" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
219
279
|
</tr>
|
|
220
|
-
</tbody>
|
|
221
|
-
</table>
|
|
222
|
-
|
|
223
|
-
### Section 三维切片 / 剖面（1）
|
|
224
|
-
|
|
225
|
-
<table>
|
|
226
|
-
<tbody>
|
|
227
280
|
<tr>
|
|
281
|
+
<td><small><a href="#volume-rendering"><strong>盒子体渲染</strong></a></small></td>
|
|
228
282
|
<td>
|
|
229
|
-
<
|
|
230
|
-
<small>Cesium 专有；按经度、纬度、气压层切片 · <a href="http://61.50.111.214:31166/lgmap/test-page-15" target="_blank" rel="noopener noreferrer">查看示例</a></small><br>
|
|
231
|
-
<small>支持：{ Bound, DataAry } 三维格点数据</small>
|
|
283
|
+
<small>对三维标量场进行体积采样与裁切，支持原位更新体数据及按屏幕位置取值。</small>
|
|
232
284
|
</td>
|
|
285
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-14" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr>
|
|
288
|
+
<td><small><a href="#section-rendering"><strong>切片/剖面渲染</strong></a></small></td>
|
|
289
|
+
<td>
|
|
290
|
+
<small>基于三维格点数据，按经度、纬度或气压层渲染切片与剖面。</small>
|
|
291
|
+
</td>
|
|
292
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-15" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
233
293
|
</tr>
|
|
234
294
|
</tbody>
|
|
235
295
|
</table>
|
|
236
296
|
|
|
237
|
-
###
|
|
297
|
+
### 风场图层（2）
|
|
238
298
|
|
|
239
|
-
|
|
299
|
+
<p><small>推荐使用 <a href="#unified-wind-layer"><code>BaseGIS.upsertWindLayer</code></a> 统一入口：Cesium 自动使用 GPU，Leaflet 自动使用 Canvas，切换引擎时自动恢复风场。</small></p>
|
|
240
300
|
|
|
241
|
-
<table>
|
|
301
|
+
<table width="90%">
|
|
302
|
+
<thead>
|
|
303
|
+
<tr>
|
|
304
|
+
<th width="20%"><small>名称</small></th>
|
|
305
|
+
<th width="65%"><small>介绍</small></th>
|
|
306
|
+
<th width="15%"><small>查看</small></th>
|
|
307
|
+
</tr>
|
|
308
|
+
</thead>
|
|
242
309
|
<tbody>
|
|
243
310
|
<tr>
|
|
311
|
+
<td><small><a href="#gpu-wind-layer"><strong>GPU 风场</strong></a></small></td>
|
|
244
312
|
<td>
|
|
245
|
-
<
|
|
246
|
-
<small>Cesium 专用，使用 GPU 绘制风场粒子，支持地形采样 · <a href="http://61.50.111.214:31166/lgmap/test-page-21" target="_blank" rel="noopener noreferrer">查看示例</a></small>
|
|
313
|
+
<small>Cesium 专用，使用 GPU 绘制风场粒子，支持地形采样。</small>
|
|
247
314
|
</td>
|
|
315
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-21" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
248
316
|
</tr>
|
|
249
317
|
<tr>
|
|
318
|
+
<td><small><a href="#wind-field-methods"><strong>Canvas 风场</strong></a></small></td>
|
|
250
319
|
<td>
|
|
251
|
-
<
|
|
252
|
-
<small>通过 WindFieldMethods 在 Cesium / Leaflet 上绘制风场粒子，支持风速底图 · <a href="http://61.50.111.214:31166/lgmap/test-page-3" target="_blank" rel="noopener noreferrer">查看示例</a></small>
|
|
320
|
+
<small>通过 Canvas 在 Cesium / Leaflet 上绘制风场粒子，支持风速底图。</small>
|
|
253
321
|
</td>
|
|
322
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-3" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
254
323
|
</tr>
|
|
255
324
|
</tbody>
|
|
256
325
|
</table>
|
|
257
326
|
|
|
258
|
-
###
|
|
327
|
+
### 影像瓦片图层（4）
|
|
259
328
|
|
|
260
|
-
<table>
|
|
329
|
+
<table width="90%">
|
|
330
|
+
<thead>
|
|
331
|
+
<tr>
|
|
332
|
+
<th width="20%"><small>名称</small></th>
|
|
333
|
+
<th width="65%"><small>介绍</small></th>
|
|
334
|
+
<th width="15%"><small>查看</small></th>
|
|
335
|
+
</tr>
|
|
336
|
+
</thead>
|
|
261
337
|
<tbody>
|
|
262
338
|
<tr>
|
|
263
|
-
<td
|
|
264
|
-
|
|
265
|
-
<small
|
|
339
|
+
<td><small><a href="#layer-config-builders"><strong>天地图图层</strong></a></small></td>
|
|
340
|
+
<td>
|
|
341
|
+
<small>生成天地图矢量、影像、地形及注记图层配置。</small>
|
|
266
342
|
</td>
|
|
267
|
-
<td
|
|
268
|
-
|
|
269
|
-
|
|
343
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
344
|
+
</tr>
|
|
345
|
+
<tr>
|
|
346
|
+
<td><small><a href="#layer-config-builders"><strong>GeoServer 金字塔瓦片</strong></a></small></td>
|
|
347
|
+
<td>
|
|
348
|
+
<small>生成 GeoServer 金字塔瓦片图层配置，支持标准瓦片地址模板。</small>
|
|
270
349
|
</td>
|
|
350
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
271
351
|
</tr>
|
|
272
352
|
<tr>
|
|
273
|
-
<td
|
|
274
|
-
|
|
275
|
-
<small
|
|
353
|
+
<td><small><a href="#layer-config-builders"><strong>WMS 图层</strong></a></small></td>
|
|
354
|
+
<td>
|
|
355
|
+
<small>生成 WMS 服务图层配置，支持图层名称及附加请求参数。</small>
|
|
276
356
|
</td>
|
|
277
|
-
<td
|
|
278
|
-
|
|
279
|
-
|
|
357
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
358
|
+
</tr>
|
|
359
|
+
<tr>
|
|
360
|
+
<td><small><a href="#layer-config-builders"><strong>WMTS 图层</strong></a></small></td>
|
|
361
|
+
<td>
|
|
362
|
+
<small>生成 WMTS 标准瓦片图层配置，可指定 Cesium / Leaflet 引擎支持范围。</small>
|
|
280
363
|
</td>
|
|
364
|
+
<td><small><a href="http://61.50.111.214:31166/lgmap/test-page-2" target="_blank" rel="noopener noreferrer">查看示例</a></small></td>
|
|
281
365
|
</tr>
|
|
282
366
|
</tbody>
|
|
283
367
|
</table>
|
|
@@ -317,13 +401,29 @@ npm install @3clear/basegis leaflet axios
|
|
|
317
401
|
|
|
318
402
|
`d3-contour`、`pixi.js`、`leaflet-pixi-overlay` 和 `html2canvas` 已随 BaseGIS 构建产物发布，业务项目不需要单独安装。其中 Pixi 相关代码只在首次使用 Leaflet 海量点能力时按需加载，`html2canvas` 只在首次调用 Leaflet 截图时按需加载。
|
|
319
403
|
|
|
320
|
-
|
|
404
|
+
在应用入口引入 BaseGIS 与自有样式：
|
|
405
|
+
|
|
406
|
+
```js
|
|
407
|
+
import { BaseGIS } from '@3clear/basegis'
|
|
408
|
+
import '@3clear/basegis/style.css'
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
外部依赖版本以 `package.json` 为准：当前为 `leaflet ^1.9.4`、`axios ^1.15.1`。
|
|
412
|
+
|
|
413
|
+
当前限制：完整 BaseGIS 入口中的剖面工具仍在模块加载时访问 `Cesium.Cartesian3`，因此即使只创建 Leaflet 地图，也需在导入 BaseGIS 前加载下文的 Cesium 脚本，否则会报 `Cesium is not defined`。这是既有的引擎依赖问题，与本次 Leaflet CSS 共用处理无关；纯原生 Leaflet 不受此限制。
|
|
414
|
+
|
|
415
|
+
Leaflet JS 和 `leaflet/dist/leaflet.css` 都由宿主依赖提供。BaseGIS 保留对官方 CSS 的导入，因此上面的原有用法仍然有效；官方规则不再另行内嵌到包的 `style.css` 中。
|
|
416
|
+
|
|
417
|
+
如果项目同时使用原生 Leaflet，可以在应用入口统一引入：
|
|
321
418
|
|
|
322
419
|
```js
|
|
420
|
+
import L from 'leaflet'
|
|
421
|
+
import 'leaflet/dist/leaflet.css'
|
|
422
|
+
import { BaseGIS } from '@3clear/basegis'
|
|
323
423
|
import '@3clear/basegis/style.css'
|
|
324
424
|
```
|
|
325
425
|
|
|
326
|
-
|
|
426
|
+
确保 BaseGIS 与业务代码解析到同一份安装的 Leaflet，宿主构建器即可复用同路径的 JS / CSS。不同地图使用各自容器；不需要挂载 `window.L` 或注册 Vue 插件，其他模块需要使用 `L` / `BaseGIS` 时仍按需 import。纯原生页面若不导入 BaseGIS JS，必须自行引入 `leaflet/dist/leaflet.css`，仅引入包的 `style.css` 不包含官方规则。
|
|
327
427
|
|
|
328
428
|
Cesium 不随 npm 包发布。使用 Cesium 时，宿主项目需自行加载 `Cesium.js` 和 `Widgets/widgets.css`，并保留 `Workers`、`Assets` 等完整静态目录；初始化前必须能访问 `window.Cesium`。`config.engine.cesium.scriptUrl/cssUrl` 不会自动注入脚本和样式。
|
|
329
429
|
|
|
@@ -413,8 +513,6 @@ onMounted(() => {
|
|
|
413
513
|
basemap: {
|
|
414
514
|
// 默认内置值：tianditu-imagery。
|
|
415
515
|
defaultVisibleId: 'tianditu-imagery',
|
|
416
|
-
// 默认内置值：tianditu-vector-label。
|
|
417
|
-
defaultAnnotationId: 'tianditu-vector-label',
|
|
418
516
|
},
|
|
419
517
|
},
|
|
420
518
|
})
|
|
@@ -464,15 +562,322 @@ onBeforeUnmount(() => {
|
|
|
464
562
|
|
|
465
563
|
`getEngineType()`、`getConfig()`、`getMapInstance()` 等读取方法直接返回值；`createMarkerIcon()` 直接返回图标参数或 `null`。控制器的 `getState()` 也返回状态对象，不能一律按 `result.data` 读取。
|
|
466
564
|
|
|
467
|
-
|
|
565
|
+
<a id="map-init-config"></a>
|
|
468
566
|
|
|
469
|
-
|
|
567
|
+
## 地图初始化与运行时配置
|
|
568
|
+
|
|
569
|
+
`BaseGIS` 的初始化参数分为两类：需要长期保留的默认配置放在构造函数的 `config` 中；只想覆盖本次初始化时，传给 `init(options)`。地图已经创建后，`setConfig()` 只更新实例保存的配置，不会直接改变当前画面；初始化默认值通常需要重新 `init()` 才会生效。
|
|
570
|
+
|
|
571
|
+
| 配置入口 | 适用场景 | 是否写入运行时配置 | 是否立即重建地图 |
|
|
572
|
+
| --- | --- | --- | --- |
|
|
573
|
+
| `new BaseGIS({ ... })` | 创建实例并设置默认引擎、容器和整套配置。 | 是 | 否，仍需调用 `init()`。 |
|
|
574
|
+
| `init(options)` | 创建或重新创建地图，并单次覆盖容器、引擎、场景模式或初始视角。 | `engineType` 会写入；`sceneMode / initialView` 不写入。 | 是 |
|
|
575
|
+
| `setConfig(config)` | 修改实例保存的配置，供后续初始化或配置查询使用。 | 是 | 否 |
|
|
576
|
+
|
|
577
|
+
### 构造参数
|
|
578
|
+
|
|
579
|
+
```js
|
|
580
|
+
const mapCore = new BaseGIS({
|
|
581
|
+
engineType: 'cesium',
|
|
582
|
+
containerId: 'map',
|
|
583
|
+
config: {
|
|
584
|
+
view: {
|
|
585
|
+
defaultSceneMode: '3d',
|
|
586
|
+
initialView: {
|
|
587
|
+
center: [104, 35],
|
|
588
|
+
height: 5000000,
|
|
589
|
+
zoom: 5,
|
|
590
|
+
heading: 0,
|
|
591
|
+
pitch: -90,
|
|
592
|
+
roll: 0,
|
|
593
|
+
},
|
|
594
|
+
},
|
|
595
|
+
},
|
|
596
|
+
})
|
|
597
|
+
```
|
|
598
|
+
|
|
599
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
600
|
+
| --- | --- | --- | --- |
|
|
601
|
+
| `engineType` | `'cesium' \| 'leaflet'` | `config.engine.active`，内置为 `cesium` | 默认引擎。该参数最终覆盖 `config.engine.active`。 |
|
|
602
|
+
| `container` | `HTMLElement \| string` | - | 地图容器 DOM，也兼容传容器 id 字符串。 |
|
|
603
|
+
| `containerId` | `string` | - | 地图容器 id。与 `container` 二选一即可。 |
|
|
604
|
+
| `config` | `Object` | 内置配置 | 推荐的配置入口，与内置配置做深合并。 |
|
|
605
|
+
| `engine / view / basemap / dem / sourceTransport` | `Object` | - | 兼容直接写在构造参数顶层；推荐统一放入 `config`，避免与控制参数混淆。同名配置同时出现时，`config` 中的值优先。 |
|
|
606
|
+
|
|
607
|
+
### `init(options)` 参数与优先级
|
|
608
|
+
|
|
609
|
+
```js
|
|
610
|
+
const result = mapCore.init({
|
|
611
|
+
// 都是选填；构造时已经设置过的内容不需要重复传。
|
|
612
|
+
containerId: 'map',
|
|
613
|
+
engineType: 'cesium',
|
|
614
|
+
sceneMode: '3d',
|
|
615
|
+
initialView: {
|
|
616
|
+
center: [104, 35],
|
|
617
|
+
height: 5000000,
|
|
618
|
+
zoom: 5,
|
|
619
|
+
pitch: -90,
|
|
620
|
+
},
|
|
621
|
+
})
|
|
470
622
|
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
623
|
+
if (!result.success) {
|
|
624
|
+
console.warn(result.message)
|
|
625
|
+
}
|
|
626
|
+
```
|
|
627
|
+
|
|
628
|
+
| 参数 | 类型 | 说明 |
|
|
629
|
+
| --- | --- | --- |
|
|
630
|
+
| `container` | `HTMLElement \| string` | 本次使用的容器 DOM 或容器 id，优先级最高。 |
|
|
631
|
+
| `containerId` | `string` | 本次使用的容器 id。 |
|
|
632
|
+
| `engineType` | `'cesium' \| 'leaflet'` | 本次使用的引擎，同时更新实例保存的 `engine.active`。 |
|
|
633
|
+
| `sceneMode` | `'2d' \| '2.5d' \| '3d'` | 本次初始化的场景模式；Leaflet 只支持 `2d`。不会写回 `config.view.defaultSceneMode`。 |
|
|
634
|
+
| `initialView` | `Object` | 本次初始化的视角。不会写回 `config.view.initialView`。 |
|
|
635
|
+
|
|
636
|
+
`init({ config: ... })` 不是有效写法；`init()` 不会合并 `config`。持久配置必须在构造函数中传入，或先调用 `setConfig()`。
|
|
637
|
+
|
|
638
|
+
各参数的实际取值顺序如下，左侧优先级更高：
|
|
639
|
+
|
|
640
|
+
| 项目 | 取值优先级 |
|
|
641
|
+
| --- | --- |
|
|
642
|
+
| 容器 | `init.container` → `init.containerId` → 构造函数 `container` → 构造函数 `containerId` |
|
|
643
|
+
| 引擎 | `init.engineType` → 实例当前引擎（由构造函数 `engineType` 或 `config.engine.active` 得到）→ `cesium` |
|
|
644
|
+
| 场景模式 | Cesium：`init.sceneMode` → `config.view.defaultSceneMode` → `3d`；Leaflet 始终为 `2d` |
|
|
645
|
+
| 初始视角 | `init.initialView` → `config.view.initialView` → 引擎内置安全视角 |
|
|
646
|
+
|
|
647
|
+
重复调用 `init()` 时会先销毁旧 adapter，再创建新地图；BaseGIS 托管图层会异步恢复。`init()` 本身同步返回初始化结果，后续逻辑依赖图层恢复时还需等待：
|
|
648
|
+
|
|
649
|
+
```js
|
|
650
|
+
const result = mapCore.init()
|
|
651
|
+
if (result.success) {
|
|
652
|
+
const restore = await mapCore.whenReady()
|
|
653
|
+
console.log(restore.restored, restore.failed)
|
|
654
|
+
}
|
|
655
|
+
```
|
|
656
|
+
|
|
657
|
+
### 完整配置分组
|
|
658
|
+
|
|
659
|
+
`config` 当前只有以下五个顶层分组。页面不要直接依赖包内部的 `src/gis/config` 文件；需要查看当前实例最终合并后的配置时，使用 `mapCore.getConfig()`。
|
|
660
|
+
|
|
661
|
+
| 配置组 | 用途 | 主要生效时机 |
|
|
662
|
+
| --- | --- | --- |
|
|
663
|
+
| `engine` | 默认引擎、引擎接入元数据及 Cesium 渲染质量。 | `init()` / 重新 `init()` |
|
|
664
|
+
| `view` | 默认场景模式和初始视角。 | `init()` / 重新 `init()` |
|
|
665
|
+
| `basemap` | 初始底图、可切换底图列表及内置服务元数据。 | `init()`；列表也供 `setBasemapById()` 查询 |
|
|
666
|
+
| `dem` | Cesium 默认地形及可切换地形列表。 | Cesium `init()`；列表也供 `loadDEMById()` 查询 |
|
|
667
|
+
| `sourceTransport` | 源解析传输图层的实例级默认视觉参数。 | 创建 adapter 时锁定；`setConfig()` 后需重新 `init()`，新 adapter 创建图层时才会读取 |
|
|
668
|
+
|
|
669
|
+
#### `engine` 引擎配置
|
|
670
|
+
|
|
671
|
+
| 配置项 | 内置默认值 | 说明 |
|
|
672
|
+
| --- | --- | --- |
|
|
673
|
+
| `engine.active` | `'cesium'` | 默认引擎；构造参数 `engineType` 或 `init({ engineType })` 的优先级更高。 |
|
|
674
|
+
| `engine.cesium.sourceType` | `'local-script'` | Cesium 接入方式说明字段。 |
|
|
675
|
+
| `engine.cesium.scriptUrl` | `'/lib/Cesium/Cesium.js'` | Cesium 脚本地址说明字段；BaseGIS 不会自动加载该脚本。 |
|
|
676
|
+
| `engine.cesium.cssUrl` | `'/lib/Cesium/Widgets/widgets.css'` | Cesium 样式地址说明字段；BaseGIS 不会自动加载该样式。 |
|
|
677
|
+
| `engine.cesium.renderQuality.maximumDevicePixelRatio` | `2` | Cesium 最大设备像素比，实际值限制在 `1～3`；越高越清晰，也越耗 GPU。 |
|
|
678
|
+
| `engine.cesium.renderQuality.fxaa` | `true` | 是否启用 Cesium FXAA。 |
|
|
679
|
+
| `engine.cesium.renderQuality.msaaSamples` | `4` | Cesium MSAA 采样数，取整并限制在 `1～8`。 |
|
|
680
|
+
| `engine.leaflet.sourceType` | `'npm'` | Leaflet 接入方式说明字段。 |
|
|
681
|
+
| `engine.leaflet.packageName` | `'leaflet'` | Leaflet 依赖包名说明字段。 |
|
|
682
|
+
|
|
683
|
+
`scriptUrl / cssUrl` 只是接入元数据。Cesium 资源的实际加载方法见[安装](#安装)。渲染质量在创建 Cesium Viewer 时读取，修改后需要重新 `init()`。
|
|
684
|
+
|
|
685
|
+
#### `view` 视角配置
|
|
686
|
+
|
|
687
|
+
| 配置项 | 内置默认值 | Cesium | Leaflet | 说明 |
|
|
688
|
+
| --- | --- | --- | --- | --- |
|
|
689
|
+
| `view.defaultSceneMode` | `'3d'` | 使用 | 只接受 `2d` | 默认场景，可选 `2d / 2.5d / 3d`。 |
|
|
690
|
+
| `view.initialView.center` | `[121.4737, 31.2304]` | 使用 | 使用 | `[经度, 纬度]`。 |
|
|
691
|
+
| `view.initialView.height` | `1800000` | 使用 | 忽略 | Cesium 相机高度，单位米。 |
|
|
692
|
+
| `view.initialView.zoom` | `7` | 忽略 | 使用 | Leaflet 缩放级别。 |
|
|
693
|
+
| `view.initialView.heading` | `0` | 使用 | 忽略 | Cesium 航向角，单位度。 |
|
|
694
|
+
| `view.initialView.pitch` | `-90` | 使用 | 忽略 | Cesium 俯仰角，单位度；`-90` 表示垂直俯视。 |
|
|
695
|
+
| `view.initialView.roll` | `0` | 使用 | 忽略 | Cesium 翻滚角，单位度。 |
|
|
696
|
+
|
|
697
|
+
#### `basemap` 底图配置
|
|
698
|
+
|
|
699
|
+
| 配置项 | 内置默认值 | 说明 |
|
|
700
|
+
| --- | --- | --- |
|
|
701
|
+
| `basemap.defaultVisibleId` | `'tianditu-imagery'` | 初始化时从 `basemap.list` 选择的底图 id。 |
|
|
702
|
+
| `basemap.defaultAnnotationId` | `'tianditu-vector-label'` | 当前为保留字段，初始化流程尚未读取；注记应通过所选底图项的 `annotationResourceKey` 配置，天地图也会按底图资源自动推断注记。 |
|
|
703
|
+
| `basemap.list` | 内置天地图、WMS、WMTS 示例列表 | 底图资源数组；完整默认项和字段见下方[默认底图配置](#default-basemap-config)。外部传入数组会整体替换内置数组。 |
|
|
704
|
+
| `basemap.providers` | 内置天地图 provider | 内置服务的地址、子域名、token 池及资源映射。当前适配器读取包内 provider，构造参数或 `setConfig()` 中的覆盖值尚不会生效；自定义服务请在 `basemap.list` 中配置 URL。 |
|
|
705
|
+
|
|
706
|
+
#### `dem` 地形配置
|
|
707
|
+
|
|
708
|
+
| 配置项 | 内置默认值 | 说明 |
|
|
709
|
+
| --- | --- | --- |
|
|
710
|
+
| `dem.defaultEnabled` | `true` | Cesium 初始化时是否加载默认 DEM；`false` 时跳过。 |
|
|
711
|
+
| `dem.defaultVisibleId` | `'ellipsoid-flat'` | 默认 DEM id，必须能在 `dem.list` 中找到、`visible !== false` 且支持 Cesium，否则初始化失败。 |
|
|
712
|
+
| `dem.list` | 平面地形、Cesium World Terrain、天地图 DEM 占位项 | DEM 资源数组；外部传入时整体替换。列表项常用字段为 `id / name / sourceType / factory / url / visible / engineSupport / options`，详细用法见[DEM 地形](#dem-terrain)。 |
|
|
713
|
+
|
|
714
|
+
Leaflet 不加载 DEM。`cesium-world-terrain` 需要 Cesium Ion 能力；`tianditu-dem` 是待补真实服务地址的占位项。
|
|
715
|
+
|
|
716
|
+
#### 常用地图初始化配置示例
|
|
717
|
+
|
|
718
|
+
下面示例把真正参与地图创建的常用配置集中写在一起。未传的字段继续使用上表中的内置默认值：
|
|
719
|
+
|
|
720
|
+
```js
|
|
721
|
+
const mapCore = new BaseGIS({
|
|
722
|
+
containerId: 'map',
|
|
723
|
+
config: {
|
|
724
|
+
engine: {
|
|
725
|
+
active: 'cesium',
|
|
726
|
+
cesium: {
|
|
727
|
+
renderQuality: {
|
|
728
|
+
maximumDevicePixelRatio: 2,
|
|
729
|
+
fxaa: true,
|
|
730
|
+
msaaSamples: 4,
|
|
731
|
+
},
|
|
732
|
+
},
|
|
733
|
+
},
|
|
734
|
+
view: {
|
|
735
|
+
defaultSceneMode: '3d',
|
|
736
|
+
initialView: {
|
|
737
|
+
center: [104, 35],
|
|
738
|
+
height: 5000000,
|
|
739
|
+
zoom: 5,
|
|
740
|
+
heading: 0,
|
|
741
|
+
pitch: -90,
|
|
742
|
+
roll: 0,
|
|
743
|
+
},
|
|
744
|
+
},
|
|
745
|
+
basemap: {
|
|
746
|
+
defaultVisibleId: 'tianditu-imagery',
|
|
747
|
+
},
|
|
748
|
+
dem: {
|
|
749
|
+
defaultEnabled: true,
|
|
750
|
+
defaultVisibleId: 'ellipsoid-flat',
|
|
751
|
+
},
|
|
752
|
+
},
|
|
753
|
+
})
|
|
754
|
+
|
|
755
|
+
const result = mapCore.init()
|
|
756
|
+
if (!result.success) {
|
|
757
|
+
console.warn(result.message)
|
|
758
|
+
}
|
|
759
|
+
```
|
|
760
|
+
|
|
761
|
+
#### `sourceTransport` 源解析传输默认配置
|
|
762
|
+
|
|
763
|
+
这一组不是地图容器或相机初始化参数，而是 Cesium [源解析传输](#source-transport)图层的实例级默认值。
|
|
764
|
+
|
|
765
|
+
| 配置项 | 内置默认值 | 说明 |
|
|
766
|
+
| --- | --- | --- |
|
|
767
|
+
| `sourceTransport.visible` | `true` | 新建图层默认是否显示。 |
|
|
768
|
+
| `sourceTransport.running` | `true` | 新建图层默认是否播放烟羽动画。 |
|
|
769
|
+
| `sourceTransport.colors` | 内置 7 色数组 | 多来源默认色板。 |
|
|
770
|
+
| `sourceTransport.path` | 内置对象 | 弧线路径分段、高度与弯曲参数。 |
|
|
771
|
+
| `sourceTransport.line` | 内置对象 | 线宽、透明度、辉光、收尖和命中宽度。 |
|
|
772
|
+
| `sourceTransport.smoke` | 内置对象 | 烟羽数量、大小、透明度、扩散和速度。 |
|
|
773
|
+
| `sourceTransport.sourceNode` | 内置对象 | 来源节点大小与标签数量。 |
|
|
774
|
+
| `sourceTransport.targetNode` | 内置对象 | 目标节点颜色与环半径。 |
|
|
775
|
+
| `sourceTransport.volume` | 内置对象 | 目标体云开关、网格尺寸、渲染参数及色带。 |
|
|
776
|
+
| `sourceTransport.interaction` | 内置对象 | 交互开关、命中容差和鼠标样式。 |
|
|
777
|
+
| `sourceTransport.fog` | 内置对象 | 雾效开关与密度。 |
|
|
778
|
+
| `sourceTransport.camera` | 内置对象 | 定位图层时的俯仰角、高度和动画时长。 |
|
|
779
|
+
|
|
780
|
+
单个图层传入的同名参数优先于这里的实例默认值。
|
|
781
|
+
|
|
782
|
+
### 配置合并规则
|
|
783
|
+
|
|
784
|
+
构造函数和 `setConfig()` 使用同一套合并规则：
|
|
785
|
+
|
|
786
|
+
| 数据类型 | 合并方式 |
|
|
787
|
+
| --- | --- |
|
|
788
|
+
| 普通对象 | 按层级递归合并，只传一个叶子字段不会删除同组其他字段。 |
|
|
789
|
+
| 数组 | 整体替换，不会追加；`basemap.list`、`dem.list`、`sourceTransport.colors` 都遵循此规则。 |
|
|
790
|
+
| 基本类型、函数及其他值 | 使用新值替换旧值。 |
|
|
791
|
+
| 未传字段 | 保留当前配置中的值。 |
|
|
792
|
+
|
|
793
|
+
配置会被克隆后保存，不会直接修改包内默认配置。`getConfig()` 返回当前实例持有的配置对象引用，建议只读；修改配置统一调用 `setConfig()`。
|
|
794
|
+
|
|
795
|
+
例如，只覆盖 Cesium 像素比不会丢失 `fxaa` 和 `msaaSamples`：
|
|
796
|
+
|
|
797
|
+
```js
|
|
798
|
+
mapCore.setConfig({
|
|
799
|
+
engine: {
|
|
800
|
+
cesium: {
|
|
801
|
+
renderQuality: {
|
|
802
|
+
maximumDevicePixelRatio: 1.5,
|
|
803
|
+
},
|
|
804
|
+
},
|
|
805
|
+
},
|
|
806
|
+
})
|
|
807
|
+
```
|
|
808
|
+
|
|
809
|
+
如果要在现有底图列表后追加一项，必须自行保留原数组：
|
|
810
|
+
|
|
811
|
+
```js
|
|
812
|
+
const currentConfig = mapCore.getConfig()
|
|
813
|
+
|
|
814
|
+
mapCore.setConfig({
|
|
815
|
+
basemap: {
|
|
816
|
+
list: [
|
|
817
|
+
...currentConfig.basemap.list,
|
|
818
|
+
{
|
|
819
|
+
id: 'custom-xyz',
|
|
820
|
+
name: '自定义 XYZ',
|
|
821
|
+
category: 'basemap',
|
|
822
|
+
type: 'xyz',
|
|
823
|
+
provider: 'custom',
|
|
824
|
+
url: 'https://example.com/tiles/{z}/{x}/{y}.png',
|
|
825
|
+
engineSupport: ['cesium', 'leaflet'],
|
|
826
|
+
},
|
|
827
|
+
],
|
|
828
|
+
},
|
|
829
|
+
})
|
|
830
|
+
```
|
|
831
|
+
|
|
832
|
+
### `setConfig()` 怎么用
|
|
833
|
+
|
|
834
|
+
`setConfig(overrideConfig)` 是同步方法，不校验配置，也没有统一结果对象或其他返回值。它只更新 `BaseGIS` 实例保存的配置，不会把新配置推送给已经创建的 adapter，也不会自动改变当前场景、视角、底图、DEM 或渲染质量。`engine.active` 是一个需要特别注意的例外：它会同步实例记录的引擎类型，但不会真正替换当前底层地图。
|
|
835
|
+
|
|
836
|
+
需要让整套初始化配置生效时，直接再次 `init()`，不要先调用 `destroy()`；否则托管图层快照会被清空：
|
|
837
|
+
|
|
838
|
+
```js
|
|
839
|
+
mapCore.setConfig({
|
|
840
|
+
engine: {
|
|
841
|
+
cesium: {
|
|
842
|
+
renderQuality: {
|
|
843
|
+
maximumDevicePixelRatio: 1.5,
|
|
844
|
+
fxaa: true,
|
|
845
|
+
msaaSamples: 4,
|
|
846
|
+
},
|
|
847
|
+
},
|
|
848
|
+
},
|
|
849
|
+
view: {
|
|
850
|
+
defaultSceneMode: '2d',
|
|
851
|
+
initialView: {
|
|
852
|
+
center: [116.4, 39.9],
|
|
853
|
+
height: 1800000,
|
|
854
|
+
zoom: 7,
|
|
855
|
+
pitch: -90,
|
|
856
|
+
},
|
|
857
|
+
},
|
|
858
|
+
})
|
|
859
|
+
|
|
860
|
+
const result = mapCore.init()
|
|
861
|
+
if (result.success) {
|
|
862
|
+
await mapCore.whenReady()
|
|
863
|
+
}
|
|
864
|
+
```
|
|
865
|
+
|
|
866
|
+
如果目标只是立即操作当前地图，不要用 `setConfig() + init()` 代替已有的实时 API：
|
|
867
|
+
|
|
868
|
+
| 目标 | 推荐 API | 是否重建地图 |
|
|
869
|
+
| --- | --- | --- |
|
|
870
|
+
| 切换 Cesium / Leaflet | `await mapCore.setEngine(engineType)` | 是，并自动恢复托管图层 |
|
|
871
|
+
| 切换当前场景模式 | `mapCore.setSceneMode({ mode })` | 否 |
|
|
872
|
+
| 移动当前视角 | `mapCore.setInitialView(view)` | 否 |
|
|
873
|
+
| 切换当前底图 | `mapCore.setBasemapById(id)` 或 `mapCore.setBasemap(payload)` | 否 |
|
|
874
|
+
| 切换当前 DEM | `mapCore.loadDEMById(id)`、`mapCore.loadDefaultDEM()` 或 `mapCore.loadDEM(payload)` | 否 |
|
|
875
|
+
| 修改当前或新建源解析传输层 | `mapCore.updateSourceTransportLayer(payload)` 或 `mapCore.upsertSourceTransportLayer(payload)` | 否 |
|
|
876
|
+
| 修改 Cesium 渲染质量或整套初始化默认值 | `setConfig()` 后重新 `init()` | 是 |
|
|
877
|
+
|
|
878
|
+
特别注意：不要用 `setConfig({ engine: { active: 'leaflet' } })` 切换已经显示的地图；应直接调用 `setEngine('leaflet')`。前者会让 `getEngineType()` 变成 `leaflet`，但底层仍可能是 Cesium，随后调用相同目标的 `setEngine('leaflet')` 还会被当作“已经是当前引擎”而跳过。若已经这样修改，应调用 `init()` 重建并校正地图实例。
|
|
879
|
+
|
|
880
|
+
<a id="default-basemap-config"></a>
|
|
476
881
|
|
|
477
882
|
### 默认底图配置
|
|
478
883
|
|
|
@@ -481,6 +886,7 @@ onBeforeUnmount(() => {
|
|
|
481
886
|
```js
|
|
482
887
|
basemap: {
|
|
483
888
|
defaultVisibleId: 'tianditu-imagery',
|
|
889
|
+
// 当前为保留字段，初始化时不会读取。
|
|
484
890
|
defaultAnnotationId: 'tianditu-vector-label',
|
|
485
891
|
}
|
|
486
892
|
```
|
|
@@ -492,13 +898,14 @@ basemap: {
|
|
|
492
898
|
| `tianditu-vector` | 天地图矢量底图 | `basemap` | `true` | `wmts` | `tianditu` | `vector` | 可作为 `defaultVisibleId` | Cesium / Leaflet |
|
|
493
899
|
| `tianditu-imagery` | 天地图影像底图 | `basemap` | `true` | `wmts` | `tianditu` | `imagery` | 内置 `defaultVisibleId` | Cesium / Leaflet |
|
|
494
900
|
| `tianditu-terrain` | 天地图地形底图 | `basemap` | `true` | `wmts` | `tianditu` | `terrain` | 可作为 `defaultVisibleId` | Cesium / Leaflet |
|
|
495
|
-
| `tianditu-vector-label` | 天地图矢量注记 | `annotation` | `true` | `wmts` | `tianditu` | `vectorLabel` |
|
|
496
|
-
| `tianditu-terrain-label` | 天地图地形注记 | `annotation` | `true` | `wmts` | `tianditu` | `terrainLabel` |
|
|
901
|
+
| `tianditu-vector-label` | 天地图矢量注记 | `annotation` | `true` | `wmts` | `tianditu` | `vectorLabel` | 可作为底图的 `annotationResourceKey` | Cesium / Leaflet |
|
|
902
|
+
| `tianditu-terrain-label` | 天地图地形注记 | `annotation` | `true` | `wmts` | `tianditu` | `terrainLabel` | 可作为底图的 `annotationResourceKey` | Cesium / Leaflet |
|
|
497
903
|
|
|
498
904
|
说明：
|
|
499
905
|
|
|
500
906
|
- `defaultVisibleId` 应指向 `category: 'basemap'` 的底图。
|
|
501
|
-
- `
|
|
907
|
+
- `defaultVisibleId` 找不到可用项时，会回退到 `basemap.list` 中第一个 `enabled !== false`、分类和引擎均匹配的底图；仍找不到时使用内置天地图矢量兜底配置。
|
|
908
|
+
- `defaultAnnotationId` 当前只是保留字段，不参与初始化。要指定注记，给底图项设置 `annotationResourceKey`；天地图矢量、影像和地形底图未显式设置时，也会分别推断对应注记资源。
|
|
502
909
|
- `tianditu-terrain` 是天地图地形底图瓦片，不是 Cesium 的 DEM 高程地形；如果要控制 Cesium terrainProvider，请看后文 DEM。
|
|
503
910
|
- `geoserver-wmts-sample` 和 `geoserver-wms-sample` 默认 `enabled: false`，只是配置格式示例；如果要作为默认底图，需要替换真实服务地址并改为 `enabled: true`。
|
|
504
911
|
- 天地图 provider 内置资源还包括 `imageryLabel`；默认 `basemap.list` 没有单独注册影像注记 id，但 `resourceKey: 'imagery'` 会自动推断使用 `imageryLabel` 注记。
|
|
@@ -654,9 +1061,11 @@ const mapCore = new BaseGIS({
|
|
|
654
1061
|
|
|
655
1062
|
这一节列的是 `BaseGIS` 主入口直接提供的基础能力。业务页面优先调用这些方法；图片图层、网格图层、海量点、点位聚合、点位抽稀、等值线、风场等更复杂能力，建议使用后文 `methods` 中对应的 Controller。
|
|
656
1063
|
|
|
657
|
-
|
|
1064
|
+
<a id="base-gis-lifecycle"></a>
|
|
658
1065
|
|
|
659
|
-
|
|
1066
|
+
### 1. 生命周期与实例
|
|
1067
|
+
|
|
1068
|
+
`BaseGIS` 负责地图实例的初始化、状态读取、尺寸刷新和销毁。构造参数、完整配置项、参数优先级及 `setConfig()` 的生效规则见[地图初始化与运行时配置](#map-init-config)。
|
|
660
1069
|
|
|
661
1070
|
```js
|
|
662
1071
|
const mapCore = new BaseGIS({
|
|
@@ -664,60 +1073,49 @@ const mapCore = new BaseGIS({
|
|
|
664
1073
|
containerId: 'map',
|
|
665
1074
|
})
|
|
666
1075
|
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
await mapCore.setEngine('leaflet')
|
|
1076
|
+
const initResult = mapCore.init()
|
|
1077
|
+
if (!initResult.success) {
|
|
1078
|
+
console.warn(initResult.message)
|
|
1079
|
+
}
|
|
672
1080
|
|
|
673
|
-
|
|
674
|
-
mapCore.
|
|
1081
|
+
const engineType = mapCore.getEngineType()
|
|
1082
|
+
const config = mapCore.getConfig() // 只读使用，不要直接修改。
|
|
1083
|
+
const mapInstance = mapCore.getMapInstance()
|
|
675
1084
|
|
|
676
|
-
|
|
677
|
-
mapCore.getEngineType()
|
|
678
|
-
//获取当前地图配置
|
|
679
|
-
mapCore.getConfig()
|
|
680
|
-
//获取地图实例
|
|
681
|
-
mapCore.getMapInstance()
|
|
682
|
-
// 销毁当前地图实例。
|
|
1085
|
+
mapCore.resize()
|
|
683
1086
|
mapCore.destroy()
|
|
684
1087
|
```
|
|
685
1088
|
|
|
686
|
-
Cesium 默认使用最高 2 倍设备像素比、FXAA 和 4 倍 MSAA，避免高分屏上的细线出现明显像素阶梯。可按设备性能覆盖：
|
|
687
|
-
|
|
688
|
-
```js
|
|
689
|
-
const mapCore = new BaseGIS({
|
|
690
|
-
config: {
|
|
691
|
-
engine: {
|
|
692
|
-
cesium: {
|
|
693
|
-
renderQuality: {
|
|
694
|
-
maximumDevicePixelRatio: 1.5,
|
|
695
|
-
fxaa: true,
|
|
696
|
-
msaaSamples: 4,
|
|
697
|
-
},
|
|
698
|
-
},
|
|
699
|
-
},
|
|
700
|
-
},
|
|
701
|
-
})
|
|
702
|
-
```
|
|
703
|
-
|
|
704
1089
|
方法说明：
|
|
705
1090
|
|
|
706
1091
|
| 方法 | 参数 | 说明 |
|
|
707
1092
|
| --- | --- | --- |
|
|
708
|
-
| `init(options)` | `{ container, containerId, engineType }` |
|
|
709
|
-
| `setEngine(engineType, options)` | 引擎类型、初始化参数 | 未初始化时记录默认引擎；已初始化时自动切换、保留视野并恢复托管图层。 |
|
|
710
|
-
| `switchEngine(engineType, options)` | 引擎类型、初始化参数 | `setEngine()` 的兼容别名。 |
|
|
1093
|
+
| `init(options)` | `{ container, containerId, engineType, sceneMode, initialView }` | 初始化地图。重复调用会重建地图并异步恢复 BaseGIS 托管图层。 |
|
|
711
1094
|
| `whenReady()` | 无 | 等待最近一次 `init()` 触发的托管图层恢复完成。 |
|
|
712
1095
|
| `destroy()` | 无 | 销毁当前地图实例和 adapter，并清空托管图层快照。 |
|
|
713
|
-
| `setConfig(config)` | `Object` |
|
|
1096
|
+
| `setConfig(config)` | `Object` | 合并实例配置，无返回值且不自动重建地图；[查看完整规则](#map-init-config)。 |
|
|
714
1097
|
| `getEngineType()` | 无 | 返回当前引擎类型。 |
|
|
715
|
-
| `getConfig()` | 无 |
|
|
1098
|
+
| `getConfig()` | 无 | 返回当前配置对象引用，建议只读。 |
|
|
716
1099
|
| `getMapInstance()` | 无 | 返回底层地图实例：Cesium `viewer` 或 Leaflet `map`。 |
|
|
717
1100
|
| `getMapContainer()` | 无 | 返回统一结果，`data.container` 为地图容器 DOM。 |
|
|
718
1101
|
| `resize()` | 无 | 在容器尺寸改变、隐藏面板重新显示后刷新地图尺寸。 |
|
|
719
1102
|
|
|
720
|
-
|
|
1103
|
+
<a id="engine-switch"></a>
|
|
1104
|
+
|
|
1105
|
+
### 2. 切换引擎
|
|
1106
|
+
|
|
1107
|
+
`BaseGIS` 支持 `cesium` 和 `leaflet` 两种引擎。调用 `setEngine()` 可以在运行时切换引擎、保留当前视野，并恢复 BaseGIS 托管图层。
|
|
1108
|
+
|
|
1109
|
+
| 方法 | 参数 | 说明 |
|
|
1110
|
+
| --- | --- | --- |
|
|
1111
|
+
| `setEngine(engineType, options)` | 引擎类型、初始化参数 | 未初始化时记录默认引擎；已初始化时自动切换、保留视野并恢复托管图层。 |
|
|
1112
|
+
| `switchEngine(engineType, options)` | 引擎类型、初始化参数 | `setEngine()` 的兼容别名。 |
|
|
1113
|
+
|
|
1114
|
+
目标引擎与当前引擎相同时，`setEngine()` 会直接返回，不会应用 `options.sceneMode / initialView / container`。同一引擎下调整场景或视角应调用 `setSceneMode()`、`setInitialView()`；需要重建地图时直接调用 `init()`。
|
|
1115
|
+
|
|
1116
|
+
发生实际切换时，`setEngine()` 会把目标场景模式，以及显式传入或从当前地图保留的视角写回 `config.view`，供之后再次初始化使用。
|
|
1117
|
+
|
|
1118
|
+
#### 推荐写法
|
|
721
1119
|
|
|
722
1120
|
页面上做 Cesium / Leaflet 切换时，直接调用 `setEngine()`。它会保留当前视野、重建目标引擎，并等待托管图层自动恢复。
|
|
723
1121
|
|
|
@@ -774,7 +1172,9 @@ console.log(result.data?.restore?.failed)
|
|
|
774
1172
|
|
|
775
1173
|
`result.success` 表示引擎初始化/切换是否成功，不保证每个图层都恢复成功；应同时检查 `data.restore.failed`。不要在切换前先调用 `destroy()`，它会清空托管快照。
|
|
776
1174
|
|
|
777
|
-
|
|
1175
|
+
<a id="view-control-scene"></a>
|
|
1176
|
+
|
|
1177
|
+
### 3. 视角控制与场景模式
|
|
778
1178
|
|
|
779
1179
|
视角控制分为缩放、重置视角、设置初始视角、场景模式切换、视图状态读取和视图变化监听。
|
|
780
1180
|
|
|
@@ -844,6 +1244,8 @@ const pointResult = mapCore.projectToContainerPoint({
|
|
|
844
1244
|
// pointResult.data: { x, y }
|
|
845
1245
|
```
|
|
846
1246
|
|
|
1247
|
+
<a id="map-view-listener"></a>
|
|
1248
|
+
|
|
847
1249
|
视图变化监听：
|
|
848
1250
|
|
|
849
1251
|
```js
|
|
@@ -888,7 +1290,7 @@ viewListener.data?.off?.()
|
|
|
888
1290
|
|
|
889
1291
|
<a id="map-screenshot"></a>
|
|
890
1292
|
|
|
891
|
-
###
|
|
1293
|
+
### 4. 地图截图与导出
|
|
892
1294
|
|
|
893
1295
|
`screenshot()` 用于导出当前 Cesium 或 Leaflet 地图，两个引擎使用完全相同的调用方式、参数和结果对象。默认截取当前可视范围（地图视口）并下载 PNG，不会自动拼接视口外尚未渲染的地图内容；只截取地图内容，不包含页面工具栏、弹窗等地图容器外的 DOM 浮层。
|
|
894
1296
|
|
|
@@ -970,7 +1372,7 @@ if (captureResult.success) {
|
|
|
970
1372
|
|
|
971
1373
|
<a id="basic-graphics"></a>
|
|
972
1374
|
|
|
973
|
-
###
|
|
1375
|
+
### 5. 绘制点、线、面、文字和 Marker
|
|
974
1376
|
|
|
975
1377
|
这些方法用于轻量绘制和样例验证。大量点位请优先使用后文的 `PointLargeLayerController`、`PointClusterController`、`PointDensityController` 等控制器。
|
|
976
1378
|
|
|
@@ -1284,9 +1686,9 @@ mapCore.clearGraphics()
|
|
|
1284
1686
|
|
|
1285
1687
|
<a id="geojson-layer"></a>
|
|
1286
1688
|
|
|
1287
|
-
###
|
|
1689
|
+
### 6. GeoJSON 图层
|
|
1288
1690
|
|
|
1289
|
-
`upsertGeoJsonLayer()` 用同一个 `layerId` 创建或替换 GeoJSON
|
|
1691
|
+
`upsertGeoJsonLayer()` 用同一个 `layerId` 创建或替换 GeoJSON 点、线、面图层，两个引擎共用数据与样式参数。图层基础样式使用 `style`，按要素覆盖的完整样式由 `styleCallback(feature, index)` 返回。坐标按 GeoJSON 顺序传入 `[经度, 纬度, 可选高度]`。
|
|
1290
1692
|
|
|
1291
1693
|
```js
|
|
1292
1694
|
const result = await mapCore.upsertGeoJsonLayer({
|
|
@@ -1296,18 +1698,24 @@ const result = await mapCore.upsertGeoJsonLayer({
|
|
|
1296
1698
|
features: [{
|
|
1297
1699
|
type: 'Feature',
|
|
1298
1700
|
id: 'region-1',
|
|
1299
|
-
properties: {
|
|
1701
|
+
properties: {
|
|
1702
|
+
name: '示例区域',
|
|
1703
|
+
},
|
|
1300
1704
|
geometry: {
|
|
1301
1705
|
type: 'Polygon',
|
|
1302
1706
|
coordinates: [[[103, 34], [105, 34], [105, 36], [103, 36], [103, 34]]],
|
|
1303
1707
|
},
|
|
1304
1708
|
}],
|
|
1305
1709
|
},
|
|
1306
|
-
style: { color: '#2f80ff', weight: 2, fillOpacity: 0.2 },
|
|
1307
1710
|
styleCallback(feature) {
|
|
1308
|
-
return
|
|
1309
|
-
|
|
1310
|
-
:
|
|
1711
|
+
return {
|
|
1712
|
+
color: '#36d3ff',
|
|
1713
|
+
weight: 3,
|
|
1714
|
+
opacity: 1,
|
|
1715
|
+
dashArray: '8 4',
|
|
1716
|
+
fillColor: '#1677ff',
|
|
1717
|
+
fillOpacity: 0.4,
|
|
1718
|
+
}
|
|
1311
1719
|
},
|
|
1312
1720
|
onClick({ feature, properties }) {
|
|
1313
1721
|
console.log(properties.name, feature)
|
|
@@ -1324,8 +1732,8 @@ if (result.success && result.data.bounds) {
|
|
|
1324
1732
|
| `layerId` | 必填，图层唯一 id。 |
|
|
1325
1733
|
| `data` | 必填；支持 FeatureCollection、Feature、Geometry、Feature 数组、JSON 字符串或 URL。也兼容 `geojson / geoJson / source / url`。 |
|
|
1326
1734
|
| `fetchOptions` | 使用 URL 时传给 Fetch 的请求参数。业务接口通常由宿主 `api/modules` 获取后再传入 `data`。 |
|
|
1327
|
-
| `style` | 统一样式：`color / weight / opacity / fillColor / fillOpacity / stroke / fill`；Leaflet 圆点大小用 `radius`，Cesium 标记大小用 `markerSize`。 |
|
|
1328
|
-
| `styleCallback(feature, index)` |
|
|
1735
|
+
| `style` | 统一样式：`color / weight / opacity / dashArray / fillColor / fillOpacity / stroke / fill`；Leaflet 圆点大小用 `radius`，Cesium 标记大小用 `markerSize`。 |
|
|
1736
|
+
| `styleCallback(feature, index)` | 按数据返回样式覆盖；线、面支持全部 `style` 字段，点还支持 `radius / markerSize`；异常时使用基础样式。 |
|
|
1329
1737
|
| `onClick(event)` | 返回 `layerId / feature / properties / data / event / target / engineType`；`data` 为原始 Feature。 |
|
|
1330
1738
|
| `visible` | 默认 `true`。 |
|
|
1331
1739
|
| `clampToGround` | Cesium 是否贴地，默认 `true`。 |
|
|
@@ -1340,11 +1748,13 @@ mapCore.clearGeoJsonLayer({ layerId: 'region-boundaries' }) // 清空要素，
|
|
|
1340
1748
|
mapCore.removeGeoJsonLayer({ layerId: 'region-boundaries' }) // 删除图层。
|
|
1341
1749
|
```
|
|
1342
1750
|
|
|
1751
|
+
`styleCallback` 可直接返回完整样式；需要按要素变化时，在回调中读取 `feature.properties` 后决定返回值即可。`opacity: 0`、`fillOpacity: 0`、`stroke: false`、`fill: false` 都会按原值保留。两个引擎都会渲染虚线，但 `dashArray` 的具体节奏是近似效果。
|
|
1752
|
+
|
|
1343
1753
|
上述管理方法也可直接传 id 字符串；方法名兼容大写 `GeoJSON`，例如 `upsertGeoJSONLayer()`。更新时需重新提供完整数据和样式。GeoJSON 当前不在自动恢复清单中，切换引擎后需重新调用 `upsertGeoJsonLayer()`。
|
|
1344
1754
|
|
|
1345
1755
|
<a id="dem-terrain"></a>
|
|
1346
1756
|
|
|
1347
|
-
###
|
|
1757
|
+
### 7. DEM 地形
|
|
1348
1758
|
|
|
1349
1759
|
仅 Cesium 支持。默认使用 `ellipsoid-flat` 椭球地形；`tianditu-terrain` 是底图瓦片，不会提供高程。当前 DEM 接口支持椭球和 Cesium World Terrain，配置中的 `tianditu-dem` 仍是占位项，不能作为已实现地形源使用。
|
|
1350
1760
|
|
|
@@ -1373,7 +1783,9 @@ console.log(mapCore.getDEMState().data)
|
|
|
1373
1783
|
|
|
1374
1784
|
恢复平面地形可调用 `mapCore.loadDEMById('ellipsoid-flat')`。Leaflet 不提供 DEM；调用失败时应检查 `success / code / message`，不要直接假定结果包含地形状态。
|
|
1375
1785
|
|
|
1376
|
-
|
|
1786
|
+
<a id="map-click-events"></a>
|
|
1787
|
+
|
|
1788
|
+
### 8. 点击事件
|
|
1377
1789
|
|
|
1378
1790
|
`onClick` 注册地图点击事件；`offClick` 移除当前点击监听。当前每个 adapter 只保留一个基础点击监听，重复调用 `onClick` 会先移除旧监听。
|
|
1379
1791
|
|
|
@@ -4436,6 +4848,7 @@ SOFTWARE.
|
|
|
4436
4848
|
|
|
4437
4849
|
```bash
|
|
4438
4850
|
npm run build:basegis
|
|
4851
|
+
npm run test:basegis
|
|
4439
4852
|
npm run pack:basegis
|
|
4440
4853
|
```
|
|
4441
4854
|
|
|
@@ -4451,6 +4864,8 @@ packages/basegis/dist/style.css
|
|
|
4451
4864
|
|
|
4452
4865
|
分发时必须保留完整 `packages/basegis/dist`，不能只复制上述入口文件。`pack:basegis` 不会自动构建，修改源码后应先执行 `build:basegis`。
|
|
4453
4866
|
|
|
4867
|
+
`test:basegis` 会先构建包，再检查 Leaflet JS / CSS 外部依赖及样式产物边界，防止包重新内嵌一份官方 CSS。
|
|
4868
|
+
|
|
4454
4869
|
当前包版本为 `0.1.4`，`pack:basegis` 会在仓库根目录生成以下文件；后续以 `packages/basegis/package.json` 中的版本及实际输出为准：
|
|
4455
4870
|
|
|
4456
4871
|
```text
|
|
@@ -4489,12 +4904,29 @@ npm publish ./packages/basegis --access public
|
|
|
4489
4904
|
|
|
4490
4905
|
### Leaflet 样式异常
|
|
4491
4906
|
|
|
4492
|
-
|
|
4907
|
+
BaseGIS JS 会导入宿主的 Leaflet 官方 CSS；使用 npm 包时还需引入自有样式。也可以在应用入口显式统一加载两者：
|
|
4493
4908
|
|
|
4494
4909
|
```js
|
|
4910
|
+
import 'leaflet/dist/leaflet.css'
|
|
4495
4911
|
import '@3clear/basegis/style.css'
|
|
4496
4912
|
```
|
|
4497
4913
|
|
|
4914
|
+
### 全局同时引入 BaseGIS 和原生 Leaflet 会覆盖吗
|
|
4915
|
+
|
|
4916
|
+
按[安装](#安装)中的共同使用示例引入，并确保解析到同一份 Leaflet。包不再把官方 CSS 复制进 `style.css`，宿主可复用对 `leaflet/dist/leaflet.css` 的引用；不要再叠加 CDN 或其他版本的 Leaflet。
|
|
4917
|
+
|
|
4918
|
+
这解决的是重复打包，不会隔离 CSS 的全局作用域。业务直接修改 `.leaflet-*` 仍会影响所有匹配的地图；页面定制应限定在自己的容器内，例如：
|
|
4919
|
+
|
|
4920
|
+
```vue
|
|
4921
|
+
<style scoped lang="scss">
|
|
4922
|
+
.native-map-page {
|
|
4923
|
+
:deep(.leaflet-popup-content) {
|
|
4924
|
+
color: #333;
|
|
4925
|
+
}
|
|
4926
|
+
}
|
|
4927
|
+
</style>
|
|
4928
|
+
```
|
|
4929
|
+
|
|
4498
4930
|
### 调用方法返回 NOT_INITIALIZED
|
|
4499
4931
|
|
|
4500
4932
|
说明地图还没有初始化成功。先执行：
|
|
@@ -4506,7 +4938,7 @@ console.log(result.success, result.message)
|
|
|
4506
4938
|
|
|
4507
4939
|
### 切换配置后地图没有变化
|
|
4508
4940
|
|
|
4509
|
-
`setConfig()`
|
|
4941
|
+
`setConfig()` 不会更新当前 adapter；需要再次 `init()` 才会按新配置重建地图。不要先手动 `destroy()`，以免清空托管图层快照：
|
|
4510
4942
|
|
|
4511
4943
|
```js
|
|
4512
4944
|
mapCore.setConfig(nextConfig)
|
|
@@ -4516,6 +4948,8 @@ if (result.success) await mapCore.whenReady()
|
|
|
4516
4948
|
|
|
4517
4949
|
`init()` 内部会先销毁旧适配器，再创建新实例。
|
|
4518
4950
|
|
|
4951
|
+
完整的配置项、生效时机和实时操作 API 对照见[地图初始化与运行时配置](#map-init-config)。
|
|
4952
|
+
|
|
4519
4953
|
### 切换引擎后图层没了
|
|
4520
4954
|
|
|
4521
4955
|
先确认通过 `setEngine()` 切换且没有提前 `destroy()`，再查看恢复结果：
|
package/dist/basegis.js
CHANGED
|
@@ -2,6 +2,7 @@ import { b as ya, a as ys, g as ps, c as Ls, d as bs } from "./basemap.config-Bs
|
|
|
2
2
|
import { u as C, s as p, v as vs, m as Ot, n as yi, b as pa, a as ws, f as Is, c as Cs, g as Ts, r as Ss, d as xs, W as hr, e as m, R as f } from "./WindDataGrid-B1KZflZc.js";
|
|
3
3
|
import Ps from "axios";
|
|
4
4
|
import { t as As } from "./typhoon-path-BAiUgsJf.js";
|
|
5
|
+
import "leaflet/dist/leaflet.css";
|
|
5
6
|
import * as F from "leaflet";
|
|
6
7
|
import H from "leaflet";
|
|
7
8
|
const $r = "/", La = {
|
|
@@ -17906,7 +17907,7 @@ function bc(r, e, t = "id") {
|
|
|
17906
17907
|
features: n(r.features)
|
|
17907
17908
|
} : r;
|
|
17908
17909
|
}
|
|
17909
|
-
class
|
|
17910
|
+
class Rc {
|
|
17910
17911
|
constructor(e = {}) {
|
|
17911
17912
|
var l;
|
|
17912
17913
|
const { engineType: t, containerId: i, container: n, config: s, ...a } = e || {}, o = s ? Pe(a, s) : a;
|
|
@@ -18876,5 +18877,5 @@ class Dc {
|
|
|
18876
18877
|
}
|
|
18877
18878
|
}
|
|
18878
18879
|
export {
|
|
18879
|
-
|
|
18880
|
+
Rc as BaseGIS
|
|
18880
18881
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none!important;max-height:none!important;width:auto;padding:0}.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078a8}.leaflet-zoom-box{border:2px dotted #38f;background:#ffffff80}.leaflet-container{font-family:Helvetica Neue,Arial,Helvetica,sans-serif;font-size:12px;font-size:.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px #000000a6;border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:#000}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:700 18px Lucida Console,Monaco,monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px #0006;background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=)}.leaflet-container .leaflet-control-attribution{background:#fff;background:#fffc;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-attribution-flag{display:inline!important;vertical-align:baseline!important;width:1em;height:.6669em}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;-moz-box-sizing:border-box;box-sizing:border-box;background:#fffc;text-shadow:1px 1px #fff}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#333;box-shadow:0 3px 14px #0006}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=.70710678,M12=.70710678,M21=-.70710678,M22=.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px #0006}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:""}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.dt-contour-label-marker{border:0;background:transparent;pointer-events:none}.dt-contour-label-marker__content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-style:solid;box-shadow:0 1px 2px #14202438;line-height:1;letter-spacing:0;white-space:nowrap;transform-origin:center}.dt-contour-center-marker{border:0;background:transparent;pointer-events:none}.dt-contour-center-marker__content{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;line-height:1.15;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.55)}.dt-contour-center-marker__label,.dt-contour-center-marker__value{display:block;line-height:1.15}.dt-map-screenshot-selection{position:fixed;z-index:2000;overflow:hidden;outline:none;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.dt-map-screenshot-selection__tip{position:absolute;top:24px;left:50%;z-index:2;max-width:calc(100% - 32px);padding:8px 14px;border-radius:4px;color:#fff;font-size:14px;line-height:20px;white-space:nowrap;background:#002a5de0;box-shadow:0 4px 12px #00000040;transform:translate(-50%);pointer-events:none}.dt-map-screenshot-selection__tip--warning{background:#ad5b00eb}.dt-map-screenshot-selection__rect{position:absolute;display:none;box-sizing:border-box;border:1px solid #37c9ff;background:#37c9ff29;box-shadow:0 0 0 9999px #0003;pointer-events:none}
|
|
1
|
+
.dt-map-screenshot-selection{position:fixed;z-index:2000;overflow:hidden;outline:none;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.dt-map-screenshot-selection__tip{position:absolute;top:24px;left:50%;z-index:2;max-width:calc(100% - 32px);padding:8px 14px;border-radius:4px;color:#fff;font-size:14px;line-height:20px;white-space:nowrap;background:#002a5de0;box-shadow:0 4px 12px #00000040;transform:translate(-50%);pointer-events:none}.dt-map-screenshot-selection__tip--warning{background:#ad5b00eb}.dt-map-screenshot-selection__rect{position:absolute;display:none;box-sizing:border-box;border:1px solid #37c9ff;background:#37c9ff29;box-shadow:0 0 0 9999px #0003;pointer-events:none}.dt-contour-label-marker{border:0;background:transparent;pointer-events:none}.dt-contour-label-marker__content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-style:solid;box-shadow:0 1px 2px #14202438;line-height:1;letter-spacing:0;white-space:nowrap;transform-origin:center}.dt-contour-center-marker{border:0;background:transparent;pointer-events:none}.dt-contour-center-marker__content{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;line-height:1.15;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.55)}.dt-contour-center-marker__label,.dt-contour-center-marker__value{display:block;line-height:1.15}
|