Skip to content

Commit da025fe

Browse files
chenxianhuiichenxianhuii
committed
fix：统一图层过滤示例 & 补充UT
AI-GEN: 100% gpt-6.1-sol
1 parent e8376d1 commit da025fe

14 files changed

Lines changed: 402 additions & 121 deletions

‎dist/leaflet/include-leaflet.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@
191191
}
192192

193193
load({
194-
libsurl: '../../web/libs',
194+
libsurl: 'https://iclient.supermap.io/web/libs',
195195
disturl: '../../dist'
196196
});
197197
window.isLocal = false;

‎examples/leaflet/01_tiledMapLayer_displayFilters.html‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,6 @@
6767
color: #1890ff;
6868
}
6969

70-
#land-use-count {
71-
margin-left: auto;
72-
color: #777;
73-
line-height: 26px;
74-
white-space: nowrap;
75-
}
76-
7770
#land-use-list {
7871
max-height: calc(100vh - 150px);
7972
padding: 6px 12px 10px;
@@ -114,7 +107,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
114107
<div id="land-use-toolbar">
115108
<button type="button" id="select-all" data-i18n="resources.text_displayFiltersSelectAll"></button>
116109
<button type="button" id="select-none" data-i18n="resources.text_displayFiltersSelectNone"></button>
117-
<span id="land-use-count"></span>
118110
</div>
119111
<div id="land-use-list">
120112
<p class="land-use-loading" data-i18n="resources.text_displayFiltersLoading"></p>
@@ -154,12 +146,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
154146
return displayFilters;
155147
}
156148

157-
function getSelectedCount() {
158-
return landUseTypes.filter(function (type) {
159-
return selectedLandUseTypes[type];
160-
}).length;
161-
}
162-
163149
function refreshLayer() {
164150
if (!map || !layer) {
165151
return;
@@ -171,7 +157,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
171157

172158
function renderLandUseList() {
173159
var list = document.getElementById('land-use-list');
174-
var count = document.getElementById('land-use-count');
175160
list.innerHTML = '';
176161
landUseTypes.forEach(function (type) {
177162
var label = document.createElement('label');
@@ -181,7 +166,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
181166
checkbox.checked = !!selectedLandUseTypes[type];
182167
checkbox.addEventListener('change', function () {
183168
selectedLandUseTypes[type] = checkbox.checked;
184-
count.textContent = getSelectedCount() + '/' + landUseTypes.length;
185169
refreshLayer();
186170
});
187171
var swatch = document.createElement('span');
@@ -192,7 +176,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
192176
label.appendChild(document.createTextNode(type));
193177
list.appendChild(label);
194178
});
195-
count.textContent = getSelectedCount() + '/' + landUseTypes.length;
196179
}
197180

198181
function setAllTypes(checked) {
@@ -224,6 +207,7 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
224207
}
225208

226209
/*
210+
* 方式一：手动创建地图和图层。
227211
*/
228212
function createMap() {
229213
map = L.map('map', {
@@ -237,6 +221,7 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
237221
}
238222

239223
/*
224+
* 方式二：使用 L.supermap.initMap 根据服务信息创建地图和图层。
240225
*/
241226
// function createMap() {
242227
// return L.supermap.initMap(mapUrl, {

‎examples/mapboxgl/01_tiledMapLayer_displayFilters.html‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,6 @@
7373
color: #1890ff;
7474
}
7575

76-
#land-use-count {
77-
margin-left: auto;
78-
color: #777;
79-
line-height: 26px;
80-
white-space: nowrap;
81-
}
82-
8376
#land-use-list {
8477
max-height: calc(100vh - 150px);
8578
padding: 6px 12px 10px;
@@ -120,7 +113,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
120113
<div id="land-use-toolbar">
121114
<button type="button" id="select-all" data-i18n="resources.text_displayFiltersSelectAll"></button>
122115
<button type="button" id="select-none" data-i18n="resources.text_displayFiltersSelectNone"></button>
123-
<span id="land-use-count"></span>
124116
</div>
125117
<div id="land-use-list">
126118
<p class="land-use-loading" data-i18n="resources.text_displayFiltersLoading"></p>
@@ -187,15 +179,8 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
187179
map.triggerRepaint();
188180
}
189181

190-
function getSelectedCount() {
191-
return landUseTypes.filter(function (type) {
192-
return selectedLandUseTypes[type];
193-
}).length;
194-
}
195-
196182
function renderLandUseList() {
197183
var list = document.getElementById('land-use-list');
198-
var count = document.getElementById('land-use-count');
199184
list.innerHTML = '';
200185
landUseTypes.forEach(function (type) {
201186
var label = document.createElement('label');
@@ -205,7 +190,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
205190
checkbox.checked = !!selectedLandUseTypes[type];
206191
checkbox.addEventListener('change', function () {
207192
selectedLandUseTypes[type] = checkbox.checked;
208-
count.textContent = getSelectedCount() + '/' + landUseTypes.length;
209193
refreshRasterSource();
210194
});
211195
var swatch = document.createElement('span');
@@ -216,7 +200,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
216200
label.appendChild(document.createTextNode(type));
217201
list.appendChild(label);
218202
});
219-
count.textContent = getSelectedCount() + '/' + landUseTypes.length;
220203
}
221204

222205
function setAllTypes(checked) {

‎examples/mapboxgl/01_tiledMapLayer_displayFilters_4326.html‎

Lines changed: 36 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,6 @@
7474
color: #1890ff;
7575
}
7676

77-
#land-use-count {
78-
margin-left: auto;
79-
color: #777;
80-
line-height: 26px;
81-
white-space: nowrap;
82-
}
83-
8477
#land-use-list {
8578
max-height: calc(100vh - 150px);
8679
padding: 6px 12px 10px;
@@ -130,7 +123,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
130123
<div id="land-use-toolbar">
131124
<button type="button" id="select-all" data-i18n="resources.text_displayFiltersSelectAll"></button>
132125
<button type="button" id="select-none" data-i18n="resources.text_displayFiltersSelectNone"></button>
133-
<span id="land-use-count"></span>
134126
</div>
135127
<div id="land-use-list">
136128
<p class="land-use-loading" data-i18n="resources.text_displayFiltersLoading"></p>
@@ -260,44 +252,46 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
260252
list.appendChild(message);
261253
}
262254

263-
// function createMap() {
264-
// map = new mapboxgl.Map({
265-
// container: 'map',
266-
// style: {
267-
// version: 8,
268-
// sources: {
269-
// 'land-use-raster': createRasterSource()
270-
// },
271-
// layers: [
272-
// {
273-
// id: rasterLayerId,
274-
// type: 'raster',
275-
// source: rasterSourceId,
276-
// minzoom: 0,
277-
// maxzoom: 22
278-
// }
279-
// ]
280-
// },
281-
// crs: 'EPSG:4326',
282-
// center: [117.08, 40.04],
283-
// zoom: 7
284-
// });
255+
// 方式一：手动创建地图和图层。
256+
function createMap() {
257+
map = new mapboxgl.Map({
258+
container: 'map',
259+
style: {
260+
version: 8,
261+
sources: {
262+
'land-use-raster': createRasterSource()
263+
},
264+
layers: [
265+
{
266+
id: rasterLayerId,
267+
type: 'raster',
268+
source: rasterSourceId,
269+
minzoom: 0,
270+
maxzoom: 22
271+
}
272+
]
273+
},
274+
crs: 'EPSG:4326',
275+
center: [117.08, 40.04],
276+
zoom: 7
277+
});
285278

286-
// map.addControl(new mapboxgl.NavigationControl(), 'top-left');
287-
// }
279+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
280+
}
288281

289282
/*
283+
* 方式二：使用 mapboxgl.supermap.initMap 根据服务信息创建地图和图层。
290284
*/
291-
function createMap() {
292-
return mapboxgl.supermap.initMap(mapUrl, {
293-
displayFilters: getDisplayFilters(),
294-
}).then(function (result) {
295-
map = result.map;
296-
rasterSourceId = 'smaples-source';
297-
rasterLayerId = 'sample-layer';
298-
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
299-
});
300-
}
285+
// function createMap() {
286+
// return mapboxgl.supermap.initMap(mapUrl, {
287+
// displayFilters: getDisplayFilters(),
288+
// }).then(function (result) {
289+
// map = result.map;
290+
// rasterSourceId = 'smaples-source';
291+
// rasterLayerId = 'sample-layer';
292+
// map.addControl(new mapboxgl.NavigationControl(), 'top-left');
293+
// });
294+
// }
301295

302296
function loadLandUseTypes() {
303297
new mapboxgl.supermap.LayerInfoService(mapUrl).getLayersInfo().then(function (serviceResult) {

‎examples/maplibregl/01_tiledMapLayer_displayFilters.html‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,6 @@
7373
color: #1890ff;
7474
}
7575

76-
#land-use-count {
77-
margin-left: auto;
78-
color: #777;
79-
line-height: 26px;
80-
white-space: nowrap;
81-
}
82-
8376
#land-use-list {
8477
max-height: calc(100vh - 150px);
8578
padding: 6px 12px 10px;
@@ -120,7 +113,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
120113
<div id="land-use-toolbar">
121114
<button type="button" id="select-all" data-i18n="resources.text_displayFiltersSelectAll"></button>
122115
<button type="button" id="select-none" data-i18n="resources.text_displayFiltersSelectNone"></button>
123-
<span id="land-use-count"></span>
124116
</div>
125117
<div id="land-use-list">
126118
<p class="land-use-loading" data-i18n="resources.text_displayFiltersLoading"></p>
@@ -187,15 +179,8 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
187179
map.triggerRepaint();
188180
}
189181

190-
function getSelectedCount() {
191-
return landUseTypes.filter(function (type) {
192-
return selectedLandUseTypes[type];
193-
}).length;
194-
}
195-
196182
function renderLandUseList() {
197183
var list = document.getElementById('land-use-list');
198-
var count = document.getElementById('land-use-count');
199184
list.innerHTML = '';
200185
landUseTypes.forEach(function (type) {
201186
var label = document.createElement('label');
@@ -205,7 +190,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
205190
checkbox.checked = !!selectedLandUseTypes[type];
206191
checkbox.addEventListener('change', function () {
207192
selectedLandUseTypes[type] = checkbox.checked;
208-
count.textContent = getSelectedCount() + '/' + landUseTypes.length;
209193
refreshRasterSource();
210194
});
211195
var swatch = document.createElement('span');
@@ -216,7 +200,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
216200
label.appendChild(document.createTextNode(type));
217201
list.appendChild(label);
218202
});
219-
count.textContent = getSelectedCount() + '/' + landUseTypes.length;
220203
}
221204

222205
function setAllTypes(checked) {

‎examples/maplibregl/01_tiledMapLayer_displayFilters_4326.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,6 @@
7474
color: #1890ff;
7575
}
7676

77-
#land-use-count {
78-
margin-left: auto;
79-
color: #777;
80-
line-height: 26px;
81-
white-space: nowrap;
82-
}
83-
8477
#land-use-list {
8578
max-height: calc(100vh - 150px);
8679
padding: 6px 12px 10px;
@@ -130,7 +123,6 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
130123
<div id="land-use-toolbar">
131124
<button type="button" id="select-all" data-i18n="resources.text_displayFiltersSelectAll"></button>
132125
<button type="button" id="select-none" data-i18n="resources.text_displayFiltersSelectNone"></button>
133-
<span id="land-use-count"></span>
134126
</div>
135127
<div id="land-use-list">
136128
<p class="land-use-loading" data-i18n="resources.text_displayFiltersLoading"></p>
@@ -260,6 +252,9 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
260252
list.appendChild(message);
261253
}
262254

255+
/*
256+
* 方式一：手动创建地图和图层。
257+
*/
263258
function createMap() {
264259
map = new maplibregl.Map({
265260
container: 'map',
@@ -287,6 +282,7 @@ <h3 data-i18n="resources.text_displayFiltersLandUseType"></h3>
287282
}
288283

289284
/*
285+
* 方式二：使用 maplibregl.supermap.initMap 根据服务信息创建地图和图层。
290286
*/
291287
// function createMap() {
292288
// return maplibregl.supermap.initMap(mapUrl, {

0 commit comments

Comments
 (0)