@mapgis/webclient-leaflet-plugin 17.0.7 → 17.2.1
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 +11 -39
- package/dist/es5/webclient-common.min.js +15 -4
- package/dist/es5/webclient-leaflet-plugin.min.js +6 -6
- package/dist/webclient-leaflet-plugin-es6.min.js +8 -8
- package/documention/ArcGISMapImageLayer.html +820 -0
- package/documention/ArcGISTileLayer.html +498 -0
- package/documention/EchartsLayer.html +261 -0
- package/documention/FeatureLayer.html +212 -0
- package/documention/FeatureLayerUtil.html +288 -0
- package/documention/IGSMapImageLayer.html +948 -0
- package/documention/IGSTileLayer.html +562 -0
- package/documention/MapLayer.html +330 -0
- package/documention/MapVLayer.html +320 -0
- package/documention/MapViewLeaflet.html +7 -7
- package/documention/Popup.html +4 -2
- package/documention/Screenshot.html +5 -143
- package/documention/SketchEditorLeaflet.html +106 -47
- package/documention/TileLayer.html +279 -0
- package/documention/TileLayerWMS.html +222 -0
- package/documention/VectorTileLayer.html +529 -0
- package/documention/WMSLayerView.html +689 -0
- package/documention/WebMapServiceLayer.html +723 -0
- package/documention/WebMapTileServiceLayer.html +754 -0
- package/documention/WebTileLayer.html +663 -0
- package/documention/Zondy.ThemeLayer.GeoFeatureThemeLayer.html +22 -22
- package/documention/Zondy.ThemeLayer.GraphThemeLayer.html +30 -30
- package/documention/Zondy.ThemeLayer.RandomThemeLayer.html +34 -34
- package/documention/Zondy.ThemeLayer.ThemeLayer.html +3 -3
- package/documention/Zondy.ThemeLayer.rangeThemeLayer.html +34 -34
- package/documention/Zondy.ThemeLayer.rankSymbolThemeLayer.html +47 -47
- package/documention/Zondy.ThemeLayer.simpleThemeLayer.html +33 -33
- package/documention/Zondy.ThemeLayer.uniqueThemeLayer.html +30 -30
- package/documention/Zondy.Widget.html +5 -5
- package/documention/global.html +454 -0
- package/documention/index.html +6 -6
- package/documention/scripts/sideBar.js +16 -2
- package/package.json +6 -6
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
<header id="page-title" class="page-title">
|
|
2
|
+
|
|
3
|
+
<span class="page-title-main">类名</span>
|
|
4
|
+
<span class="page-title-sub">EchartsLayer</span>
|
|
5
|
+
|
|
6
|
+
</header>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<section>
|
|
13
|
+
|
|
14
|
+
<article>
|
|
15
|
+
<div class="container-overview">
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<div class='vertical-section'>
|
|
19
|
+
<div class="members">
|
|
20
|
+
<div class="member">
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
<h4 class="name" id="EchartsLayer">
|
|
26
|
+
<a class="href-link" href="#EchartsLayer">#</a>
|
|
27
|
+
|
|
28
|
+
<span class="code-name" id="EchartsLayer" style="font-size:30px">
|
|
29
|
+
|
|
30
|
+
new EchartsLayer<span class="signature">(map, echartsOptions)</span>
|
|
31
|
+
|
|
32
|
+
</span>
|
|
33
|
+
</h4>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<div class="description">
|
|
38
|
+
<p>Echarts图层(Leaflet)</p>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
<h4>参数</h4>
|
|
51
|
+
|
|
52
|
+
<div class="table-container">
|
|
53
|
+
<table class="params table">
|
|
54
|
+
<thead>
|
|
55
|
+
<tr>
|
|
56
|
+
|
|
57
|
+
<th>名称</th>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
<th>类型</th>
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
<th class="last">描述</th>
|
|
65
|
+
</tr>
|
|
66
|
+
</thead>
|
|
67
|
+
|
|
68
|
+
<tbody>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
<tr class="deep-level-0">
|
|
73
|
+
|
|
74
|
+
<td class="name"><code>map</code></td>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<td class="type">
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
<span class="param-type">
|
|
81
|
+
|
|
82
|
+
L.map
|
|
83
|
+
|
|
84
|
+
</span>
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
</td>
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
<td class="description last"><p>leaflet的地图视图对象</p></td>
|
|
94
|
+
</tr>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
<tr class="deep-level-0">
|
|
102
|
+
|
|
103
|
+
<td class="name"><code>echartsOptions</code></td>
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
<td class="type">
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
<span class="param-type">
|
|
110
|
+
|
|
111
|
+
Object
|
|
112
|
+
|
|
113
|
+
</span>
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
</td>
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
<td class="description last"><p>echarts初始化参数</p></td>
|
|
123
|
+
</tr>
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
</tbody>
|
|
129
|
+
</table>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
<dl class="details">
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
</dl>
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
<h5>示例</h5>
|
|
194
|
+
|
|
195
|
+
<p class="code-caption"><h7 id='addLayer'>混合开发模式</h7></p>
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
<pre class="prettyprint"><code>// ES5引入方式
|
|
199
|
+
const { WebTileLayer } = zondy.Layer
|
|
200
|
+
const { WebTileLayer, EchartsLayer, leaflet } = zondy
|
|
201
|
+
// ES6引入方式
|
|
202
|
+
import { WebTileLayer } from "@mapgis/webclient-common"
|
|
203
|
+
import { WebTileLayer, EchartsLayer } from "@mapgis/webclient-leaflet-plugin"
|
|
204
|
+
import * as leaflet from '@mapgis/leaflet'
|
|
205
|
+
// 请先确保引入了Echarts库
|
|
206
|
+
<script src="http://{ip}:{port}/echarts.min.js"></script>
|
|
207
|
+
// 构造一个WebTileLayer图层对象作为底图
|
|
208
|
+
const layer = new WebTileLayer({
|
|
209
|
+
// 服务基地址
|
|
210
|
+
url: 'http://t1.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}'
|
|
211
|
+
});
|
|
212
|
+
// 加载图层元数据
|
|
213
|
+
layer.load().then(function () {
|
|
214
|
+
// 构造地图视图的初始化参数
|
|
215
|
+
const mapViewOptions = initMapViewLeafletOptions(layer, [layer])
|
|
216
|
+
// 构造Leaflet地图视图对象
|
|
217
|
+
const map = L.map('地图视图容器ID', mapViewOptions)
|
|
218
|
+
// 构造图层的初始化参数
|
|
219
|
+
const layerOptions = initializeOptions(layer)
|
|
220
|
+
// 添加图层到地图视图中
|
|
221
|
+
const leafletLayer = new WebTileLayer(layer.url + '&tk=天地图token', layerOptions).addTo(map)
|
|
222
|
+
// 构造Echarts数据和初始化参数
|
|
223
|
+
const echartsOptions = {}
|
|
224
|
+
// 创建并添加Echarts图层
|
|
225
|
+
new EchartsLayer(map, echartsOptions).addTo(
|
|
226
|
+
map
|
|
227
|
+
);
|
|
228
|
+
})</code></pre>
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
</article>
|
|
260
|
+
|
|
261
|
+
</section>
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
<header id="page-title" class="page-title">
|
|
2
|
+
|
|
3
|
+
<span class="page-title-main">类名</span>
|
|
4
|
+
<span class="page-title-sub">FeatureLayer</span>
|
|
5
|
+
|
|
6
|
+
</header>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<section>
|
|
13
|
+
|
|
14
|
+
<article>
|
|
15
|
+
<div class="container-overview">
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<div class='vertical-section'>
|
|
19
|
+
<div class="members">
|
|
20
|
+
<div class="member">
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
<h4 class="name" id="FeatureLayer">
|
|
26
|
+
<a class="href-link" href="#FeatureLayer">#</a>
|
|
27
|
+
|
|
28
|
+
<span class="code-name" id="FeatureLayer" style="font-size:30px">
|
|
29
|
+
|
|
30
|
+
new FeatureLayer<span class="signature">()</span>
|
|
31
|
+
|
|
32
|
+
</span>
|
|
33
|
+
</h4>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<div class="description">
|
|
38
|
+
<p>要素图层(Leaflet)</p>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
<dl class="details">
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
</dl>
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
<h5>示例</h5>
|
|
111
|
+
|
|
112
|
+
<p class="code-caption"><h7 id='addLayer'>混合开发模式</h7></p>
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
<pre class="prettyprint"><code>// ES5引入方式
|
|
116
|
+
const { IGSTileLayer, IGSFeatureLayer } = zondy.Layer
|
|
117
|
+
const { SimpleFillSymbol } = zondy.Symbol
|
|
118
|
+
const { initializeCRS, initializeOptions, FeatureLayerUtil } = zondy.leaflet
|
|
119
|
+
// ES6引入方式
|
|
120
|
+
import { IGSTileLayer, IGSFeatureLayer, SimpleFillSymbol } from "@mapgis/webclient-common"
|
|
121
|
+
import "@mapgis/webclient-leaflet-plugin"
|
|
122
|
+
const { initializeCRS, initializeOptions, FeatureLayerUtil } = zondy.leaflet
|
|
123
|
+
|
|
124
|
+
// 构造一个瓦片图层对象作为底图
|
|
125
|
+
const layer = new IGSTileLayer({
|
|
126
|
+
// 服务基地址
|
|
127
|
+
url: "http://{ip}:{port}/arcgis/rest/services/{服务名}/TileServer"
|
|
128
|
+
});
|
|
129
|
+
// 加载瓦片图层元数据
|
|
130
|
+
layer.load().then(function () {
|
|
131
|
+
// 通过瓦片图层元数据构造地图视图的初始化参数
|
|
132
|
+
const crs = initializeCRS(layer)
|
|
133
|
+
const mapViewOptions = {
|
|
134
|
+
// 地图视图参考系
|
|
135
|
+
crs: crs,
|
|
136
|
+
// 初始化中心点
|
|
137
|
+
center: [31.147781205532336,112.21905099757561],
|
|
138
|
+
// 初始化级数
|
|
139
|
+
zoom: 6
|
|
140
|
+
}
|
|
141
|
+
// 构造Leaflet地图视图对象
|
|
142
|
+
const map = L.map('地图视图容器ID', mapViewOptions)
|
|
143
|
+
// 构造瓦片图层的初始化参数
|
|
144
|
+
const layerOptions = initializeOptions(layer)
|
|
145
|
+
// 添加瓦片图层到地图视图中
|
|
146
|
+
new zondy.leaflet.IGSTileLayer(layer.url, layerOptions).addTo(map)
|
|
147
|
+
// 构造要素图层
|
|
148
|
+
const featureLayer = new IGSFeatureLayer({
|
|
149
|
+
// 服务基地址
|
|
150
|
+
url: 'http://{ip}:{port}/igs/rest/services/{服务名}/FeatureServer'
|
|
151
|
+
})
|
|
152
|
+
// 查询要素
|
|
153
|
+
featureLayer.queryFeatures({
|
|
154
|
+
// 指定要查询的子图层
|
|
155
|
+
layerId: '0',
|
|
156
|
+
// 指定返回数据的坐标系
|
|
157
|
+
outSrs: 'EPSG:4326',
|
|
158
|
+
// 指定查询数量
|
|
159
|
+
resultRecordCount: 100000
|
|
160
|
+
}).then((result) => {
|
|
161
|
+
// 创建Leaflet的要素图层
|
|
162
|
+
const featureLayerLeaflet = new zondy.leaflet.FeatureLayer()
|
|
163
|
+
// 添加要素图层
|
|
164
|
+
featureLayerLeaflet.addTo(map)
|
|
165
|
+
// 获取查询到的要素集合
|
|
166
|
+
const features = result.features
|
|
167
|
+
// 循环遍历要素,将要素转为Leaflet的几何对象并绘制
|
|
168
|
+
features.forEach((feature) => {
|
|
169
|
+
// 设置要素符号
|
|
170
|
+
feature.symbol = new SimpleFillSymbol({
|
|
171
|
+
color: 'rgba(244, 122, 31, 0.5)'
|
|
172
|
+
})
|
|
173
|
+
// 将要素转为Leaflet几何对象
|
|
174
|
+
const graphic = FeatureLayerUtil.convertFeature(feature)
|
|
175
|
+
// 添加并绘制要素
|
|
176
|
+
featureLayerLeaflet.addLayer(graphic)
|
|
177
|
+
})
|
|
178
|
+
})
|
|
179
|
+
})</code></pre>
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
</article>
|
|
211
|
+
|
|
212
|
+
</section>
|