Skip to content

Commit 20edbcb

Browse files
author
user name
committed
fix 修复fgb按需加载移动地图后导致全量加载与第一次范围未缓存 补充ut
1 parent b811cc5 commit 20edbcb

File tree

11 files changed

+428
-117
lines changed

11 files changed

+428
-117
lines changed

‎src/leaflet/overlay/FGBLayer.js‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { deserialize } from 'flatgeobuf/lib/mjs/geojson';
1616
* @category Visualization FGB
1717
* @extends {L.LayerGroup}
1818
* @param {string} url - FGB 服务地址，例如：http://localhost:8090/iserver/services/xxx/rest/data/featureResults/newResourceId.fgb。
19-
* @param {Object} opt_options - 参数。
19+
* @param {Object} options - 参数。
2020
* @param {function} [options.pointToLayer] - 定义点要素如何绘制在地图上。
2121
* @param {function} [options.style] - 定义点、线、面要素样式。参数为{@link L.Path-option}。
2222
* @param {boolean} [options.strategy='bbox'] - 指定加载策略，可选值为 all，bbox。 all为全量加载， bbox为按需加载。
@@ -51,14 +51,7 @@ export var FGBLayer = L.LayerGroup.extend({
5151
const intersectExtent = getIntersection(this.extent, extent);
5252
extent = (intersectExtent && intersectExtent.length) ? intersectExtent : this.extent;
5353
}
54-
55-
const formatBounds = extent.length ? {
56-
minX: extent[0],
57-
minY: extent[1],
58-
maxX: extent[2],
59-
maxY: extent[3]
60-
} : {};
61-
this._handleFeatures(formatBounds);
54+
this._handleFeatures(extent);
6255
},
6356
onRemove: function (map) {
6457
this.loadedExtentsRtree_.clear();
@@ -71,29 +64,32 @@ export var FGBLayer = L.LayerGroup.extend({
7164
const map = e.target;
7265
let extent = [map.getBounds().getSouthWest(), map.getBounds().getNorthEast()];
7366
const extentToLoad = [extent[0].lng, extent[0].lat, extent[1].lng, extent[1].lat];
74-
const loadedExtentsRtree = this.loadedExtentsRtree_;
7567
const alreadyLoaded = this._forEachInExtent(extentToLoad, (object) => {
7668
return this._containsExtent(object.extent, extentToLoad);
7769
});
7870
if (!alreadyLoaded) {
79-
this._handleFeatures(extent);
80-
const item = {
81-
minX: extentToLoad[0],
82-
minY: extentToLoad[1],
83-
maxX: extentToLoad[2],
84-
maxY: extentToLoad[3],
85-
value: { extent: extentToLoad.slice() }
86-
};
87-
loadedExtentsRtree.insert(item);
71+
72+
this._handleFeatures(extentToLoad);
73+
8874
}
8975
},
9076
_handleFeatures: async function (extent) {
9177
let fgbStream;
92-
let rect = extent;
93-
if (!Object.keys(extent).length) {
78+
let rect = {
79+
minX: extent[0],
80+
minY: extent[1],
81+
maxX: extent[2],
82+
maxY: extent[3]
83+
};
84+
if (!extent.length) {
9485
fgbStream = await this._getStream(this.url);
86+
} else {
87+
rect.value = { extent: extent.slice() };
88+
this.loadedExtentsRtree_.insert(rect);
9589
}
90+
9691
const fgb = deserialize((fgbStream && fgbStream.body) || this.url, rect);
92+
9793
let curLayer = L.geoJSON(null, this.options);
9894
curLayer.addTo(this);
9995
for await (let feature of fgb) {

‎src/mapboxgl/overlay/FGBLayer.js‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,6 @@ const PAINT_MAP = {
5353
'circle-opacity': 1,
5454
'circle-blur': 0,
5555
'circle-translate': [0, 0],
56-
'circle-translate-anchor': 'map',
57-
'circle-pitch-scale': 'map',
58-
'circle-pitch-alignment': 'viewport',
5956
'circle-stroke-width': 0,
6057
'circle-stroke-color': '#000',
6158
'circle-stroke-opacity': 1
@@ -71,8 +68,7 @@ const PAINT_MAP = {
7168
'fill-color': '#3fb1e3',
7269
'fill-translate': [0, 0],
7370
'fill-antialias': true,
74-
'fill-outline-color': '#3fb1e3',
75-
'fill-translate-anchor': 'map'
71+
'fill-outline-color': '#3fb1e3'
7672
}
7773
};
7874

@@ -81,7 +77,7 @@ export class FGBLayer {
8177
this.id = options && options.layerID ? options.layerID : CommonUtil.createUniqueID('FGBLayer_');
8278
this.layerId = this.id + 'outer';
8379
this.sourceId = this.layerId;
84-
this.options = options;
80+
this.options = options || {};
8581
this.strategy = options.strategy || 'bbox';
8682
this.url = options.url;
8783
this.loadedExtentsRtree_ = new RBush();
@@ -112,13 +108,7 @@ export class FGBLayer {
112108
extent = this.extent;
113109
}
114110
}
115-
const formatBounds = extent.length ? {
116-
minX: extent[0],
117-
minY: extent[1],
118-
maxX: extent[2],
119-
maxY: extent[3]
120-
} : {};
121-
this._handleFeatures(formatBounds);
111+
this._handleFeatures(extent);
122112
}
123113

124114
moveLayer(id, beforeId) {
@@ -142,8 +132,9 @@ export class FGBLayer {
142132
type: 'geojson',
143133
data: features
144134
});
135+
} else {
136+
this.map.getSource(this.sourceId).setData(features);
145137
}
146-
this.map.getSource(this.sourceId).setData(features);
147138
if (!this.map.getLayer(this.layerId)) {
148139
const layer = Object.assign({
149140
id: this.layerId,
@@ -159,22 +150,13 @@ export class FGBLayer {
159150
async _updateFeatures() {
160151
const bounds = this.map.getBounds().toArray();
161152
const extentToLoad = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
162-
const loadedExtentsRtree = this.loadedExtentsRtree_;
163153
const alreadyLoaded = this._forEachInExtent(extentToLoad, (object) => {
164154
return this._containsExtent(object.extent, extentToLoad);
165155
});
166156
if (!alreadyLoaded) {
167157
let iter = await this._loadData(extentToLoad);
168158
const features = await this.iterateFeatures(iter);
169159
this.map.getSource(this.sourceId).setData(features);
170-
const item = {
171-
minX: extentToLoad[0],
172-
minY: extentToLoad[1],
173-
maxX: extentToLoad[2],
174-
maxY: extentToLoad[3],
175-
value: { extent: extentToLoad.slice() }
176-
};
177-
loadedExtentsRtree.insert(item);
178160
}
179161
}
180162

@@ -197,10 +179,19 @@ export class FGBLayer {
197179

198180
async _loadData(bounds) {
199181
let fgbStream;
200-
let rect = bounds;
201-
if (!Object.keys(bounds).length) {
182+
let rect = {
183+
minX: bounds[0],
184+
minY: bounds[1],
185+
maxX: bounds[2],
186+
maxY: bounds[3]
187+
};
188+
if (!bounds.length) {
202189
fgbStream = await this._getStream(this.url);
190+
} else {
191+
rect.value = { extent: bounds.slice() };
192+
this.loadedExtentsRtree_.insert(rect);
203193
}
194+
204195
return await deserialize((fgbStream && fgbStream.body) || this.url, rect, (headerMeta) => {
205196
this.layerType = GEOMETRY_TYPE_MAP[headerMeta.geometryType];
206197
});

‎src/openlayers/overlay/FGB.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export class FGB extends VectorSource {
4747
if (!Object.keys(extent).length) {
4848
fgbStream = await this._getStream(this.url);
4949
}
50-
await this._handleFeatures((fgbStream && fgbStream.body) || this.url, extent);
50+
this._handleFeatures((fgbStream && fgbStream.body) || this.url, extent);
5151
});
5252
}
5353

‎test/karma.conf.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,11 @@ module.exports = function (config) {
5656
/***测试文件***/
5757
'./tool/**.js',
5858
'./resources/**.js',
59-
// './resources/img/**.png',
6059
/***classic的源码***/
6160
/*由于除了classic其他都不依赖于8c,所以classic 的引入放在最后，以免被common覆盖*/
62-
{ pattern: '../src/classic/libs/SuperMap_Basic-8.1.1-17729.js', include: false },
63-
{ pattern: '../src/classic/libs/Lang/*.js', include: false },
64-
{ pattern: '../src/classic/theme/default/*.css', include: false },
61+
{ pattern: '../src/classic/libs/SuperMap_Basic-8.1.1-17729.js', included: false },
62+
{ pattern: '../src/classic/libs/Lang/*.js', included: false },
63+
{ pattern: '../src/classic/theme/default/*.css', included: false },
6564
/**测试文件**/
6665
'./test-main-classic.js',
6766

@@ -71,22 +70,22 @@ module.exports = function (config) {
7170
'./test-main-common.js',
7271

7372
/***leaflet的源码***/
74-
{ pattern: './libs/workers/TurfWorkerForTest.js', include: false },
75-
{ pattern: '../node_modules/leaflet/dist/leaflet.css', include: false },
76-
{ pattern: '../src/leaflet/**/**/*.css', include: false },
73+
{ pattern: './libs/workers/TurfWorkerForTest.js', included: false },
74+
{ pattern: '../node_modules/leaflet/dist/leaflet.css', included: false },
75+
{ pattern: '../src/leaflet/**/**/*.css', included: false },
7776
'../src/leaflet/**/!(index).js',
7877
/**测试文件**/
7978
'./test-main-leaflet.js',
8079

8180
/***openlayers的源码***/
82-
{ pattern: '../node_modules/ol/ol.css', include: false },
83-
{ pattern: '../src/openlayers/**/**/*.css', include: false },
81+
{ pattern: '../node_modules/ol/ol.css', included: false },
82+
{ pattern: '../src/openlayers/**/**/*.css', included: false },
8483
'../src/openlayers/**/!(index).js',
8584
/**测试文件**/
8685
'./test-main-openlayers.js',
87-
86+
{ pattern: './resources/data/**.fgb', included: false },
8887
/***mapboxgl***/
89-
{ pattern: '../node_modules/mapbox-gl/dist/mapbox-gl.css', include: false },
88+
{ pattern: '../node_modules/mapbox-gl/dist/mapbox-gl.css', included: false },
9089
'../src/mapboxgl/**/!(index).js',
9190
/**测试文件**/
9291
'./test-main-mapboxgl.js'

‎test/leaflet/overlay/FGBLayerSpec.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { FGBLayer } from '../../../src/leaflet/overlay/FGBLayer';
2+
import { tiledMapLayer } from '../../../src/leaflet/mapping/TiledMapLayer';
3+
var url = 'base/resources/data/capitals_data20.fgb';
4+
var url1 = 'http://supermapiserver:8090/iserver/services/map-world/rest/maps/World';
5+
describe('leaflet_FGBLayer', () => {
6+
var originalTimeout;
7+
var testDiv, map;
8+
beforeAll(() => {
9+
testDiv = window.document.createElement('div');
10+
testDiv.setAttribute('id', 'map');
11+
testDiv.style.styleFloat = 'left';
12+
testDiv.style.marginLeft = '8px';
13+
testDiv.style.marginTop = '50px';
14+
testDiv.style.width = '500px';
15+
testDiv.style.height = '500px';
16+
window.document.body.appendChild(testDiv);
17+
map = L.map('map', {
18+
preferCanvas: true,
19+
crs: L.CRS.EPSG4326,
20+
center: { lon: 0, lat: 0 },
21+
maxZoom: 18,
22+
zoom: 3
23+
});
24+
tiledMapLayer(url1).addTo(map);
25+
});
26+
27+
beforeEach(() => {
28+
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
29+
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
30+
});
31+
afterEach(() => {
32+
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
33+
});
34+
afterAll(() => {
35+
map.remove();
36+
window.document.body.removeChild(testDiv);
37+
});
38+
39+
it('load bbox', (done) => {
40+
var count = 0;
41+
var fgblayer = new FGBLayer(url, {
42+
featureLoader: function (feature) {
43+
expect(['圣多美', '蒙罗维亚'].includes(feature.properties['CAPITAL'])).toBeTrue();
44+
count++;
45+
if (count === 2) {
46+
done();
47+
}
48+
return feature;
49+
}
50+
});
51+
fgblayer.addTo(map);
52+
expect(fgblayer.strategy).toBe('bbox');
53+
expect(fgblayer).not.toBeNull();
54+
expect(fgblayer.url).toBe(url);
55+
});
56+
57+
it('load all', (done) => {
58+
var count = 0;
59+
var fgblayer = new FGBLayer(url, {
60+
strategy: 'all',
61+
featureLoader: function (feature) {
62+
count++;
63+
if (count === 19) {
64+
done();
65+
}
66+
return feature;
67+
}
68+
});
69+
fgblayer.addTo(map);
70+
expect(fgblayer).not.toBeNull();
71+
expect(fgblayer.url).toBe(url);
72+
});
73+
74+
it('update extent', () => {
75+
var fgblayer = new FGBLayer(url, {
76+
featureLoader: function (feature) {
77+
return feature;
78+
}
79+
});
80+
fgblayer.addTo(map);
81+
map.fire('moveend', { target: map });
82+
expect(fgblayer).not.toBeNull();
83+
expect(fgblayer.url).toBe(url);
84+
});
85+
86+
it('set extent', (done) => {
87+
var fgblayer = new FGBLayer(url, {
88+
extent: [0, 0, 21, 21],
89+
featureLoader: function (feature) {
90+
expect(feature.properties['CAPITAL']).toBe('圣多美');
91+
done();
92+
return feature;
93+
}
94+
});
95+
fgblayer.addTo(map);
96+
expect(fgblayer).not.toBeNull();
97+
expect(fgblayer.url).toBe(url);
98+
});
99+
});

0 commit comments

Comments
 (0)