Skip to content

Commit e2b0ac5

Browse files
hechangqunhechangqun
committed
add maplibregl overlay UT; review by qiw
1 parent 5106b56 commit e2b0ac5

File tree

10 files changed

+1377
-2
lines changed

10 files changed

+1377
-2
lines changed

‎src/common/overlay/threejs/ThreeLayerRenderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ export class ThreeLayerRenderer {
354354
* @returns {THREE.Vector3} 目标点的 threejs 3D 矢量对象。
355355
*/
356356
distanceToThreeVector3(x, y, lngLat) {
357-
let map = this._map;
357+
let map = this.map;
358358

359359
let center = lngLat || map.getCenter(),
360360
maxZoom = Transform.projection.nativeMaxZoom,

‎test/maplibregl/overlay/DeckglLayerSpec.js‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
import maplibregl from 'maplibre-gl';
2+
import '../../libs/deck.gl/5.1.3/deck.gl';
3+
import {Point} from '../../../src/common/commontypes/geometry/Point';
4+
import {LineString} from '../../../src/common/commontypes/geometry/LineString';
5+
import {DeckglLayer} from '../../../src/maplibregl/overlay/DeckglLayer';
6+
7+
maplibregl.accessToken = 'pk.eyJ1IjoibW9ua2VyIiwiYSI6ImNpd2Z6aTE5YTAwdHEyb2tpOWs2ZzRydmoifQ.LwQMRArUP8Q9P7QApuOIHg';
8+
describe('maplibregl_DeckglLayer', () => {
9+
var originalTimeout;
10+
var testDiv, map, deckglLayer, features;
11+
beforeAll(() => {
12+
testDiv = window.document.createElement("div");
13+
testDiv.setAttribute("id", "map");
14+
testDiv.style.styleFloat = "left";
15+
testDiv.style.marginLeft = "8px";
16+
testDiv.style.marginTop = "50px";
17+
testDiv.style.width = "500px";
18+
testDiv.style.height = "500px";
19+
window.document.body.appendChild(testDiv);
20+
map = new maplibregl.Map({
21+
container: 'map',
22+
style: 'mapbox://styles/mapbox/streets-v9',
23+
center: [13.413952, 52.531913],
24+
zoom: 16.000000000000004,
25+
pitch: 33.2
26+
});
27+
var pointList = [],
28+
p1 = new Point(20.05408801141, 38.837029131724),
29+
p2 = new Point(18.80757663534, 38.606951847395),
30+
p3 = new Point(17.43207212138, 38.530259419285);
31+
pointList.push(p1);
32+
pointList.push(p2);
33+
pointList.push(p3);
34+
var line = new LineString(pointList);
35+
features = {
36+
fieldNames: [],
37+
fieldValues: [],
38+
geometry: line
39+
};
40+
41+
});
42+
beforeEach(() => {
43+
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
44+
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
45+
});
46+
afterEach(() => {
47+
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
48+
});
49+
afterAll(() => {
50+
document.body.removeChild(testDiv);
51+
});
52+
53+
it('onAdd_PathLayer', (done) => {
54+
deckglLayer = new DeckglLayer("path-layer", {
55+
data: features,
56+
props: {
57+
strokeWidth: 12 //线宽
58+
},
59+
callback: {
60+
getSourcePosition: d => d.from.coordinates,
61+
getTargetPosition: d => d.to.coordinates,
62+
getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
63+
getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
64+
}
65+
});
66+
deckglLayer.onAdd(map);
67+
68+
setTimeout(() => {
69+
expect(deckglLayer.deckGL).not.toBeNull();
70+
done();
71+
}, 0)
72+
});
73+
74+
it('onAdd_ArcLayer', (done) => {
75+
deckglLayer = new DeckglLayer("arc-layer", {
76+
data: features,
77+
props: {
78+
strokeWidth: 12 //线宽
79+
},
80+
callback: {
81+
getSourcePosition: d => d.from.coordinates,
82+
getTargetPosition: d => d.to.coordinates,
83+
getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
84+
getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
85+
}
86+
});
87+
deckglLayer.onAdd(map);
88+
89+
setTimeout(() => {
90+
expect(deckglLayer.deckGL).not.toBeNull();
91+
done();
92+
}, 0)
93+
});
94+
95+
it('onAdd_HexagonLayer', (done) => {
96+
deckglLayer = new DeckglLayer("hexagon-layer", {
97+
data: features,
98+
props: {
99+
strokeWidth: 12 //线宽
100+
},
101+
callback: {
102+
getSourcePosition: d => d.from.coordinates,
103+
getTargetPosition: d => d.to.coordinates,
104+
getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
105+
getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
106+
}
107+
});
108+
deckglLayer.onAdd(map);
109+
110+
setTimeout(() => {
111+
expect(deckglLayer.deckGL).not.toBeNull();
112+
done();
113+
}, 0)
114+
});
115+
116+
it('onAdd_PolygonLayer', (done) => {
117+
deckglLayer = new DeckglLayer("polygon-layer", {
118+
data: features,
119+
props: {
120+
strokeWidth: 12 //线宽
121+
},
122+
callback: {
123+
getSourcePosition: d => d.from.coordinates,
124+
getTargetPosition: d => d.to.coordinates,
125+
getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
126+
getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
127+
}
128+
});
129+
deckglLayer.onAdd(map);
130+
131+
setTimeout(() => {
132+
expect(deckglLayer.deckGL).not.toBeNull();
133+
done();
134+
}, 0)
135+
});
136+
137+
it('onAdd_scatter-plot', (done) => {
138+
var p1 = new Point(20.05408801141, 38.837029131724);
139+
var p2 = new Point(18.80757663534, 38.606951847395);
140+
var p3 = new Point(17.43207212138, 38.530259419285);
141+
deckglLayer = new DeckglLayer("scatter-plot", {
142+
data: {p1, p2, p3},
143+
props: {
144+
radiusScale: 300,
145+
radiusMaxPixels: 500,
146+
opacity: 0.3,
147+
autoHighlight: true,
148+
highlightColor: [255, 255, 0, 255],
149+
},
150+
callback: {
151+
getPosition: function (feature) {
152+
if (!feature || !feature.Longitude || !feature.Latitude) {
153+
return [0, 0, 0];
154+
}
155+
return [Number(feature.Longitude), Number(feature.Latitude), 0];
156+
},
157+
getColor: function (feature) {
158+
if (feature.Magnitude >= 2.5 && feature.Magnitude <= 3.31) {
159+
return [118, 42, 131];
160+
}
161+
return [0, 0, 0, 0]
162+
},
163+
getRadius: function (feature) {
164+
165+
return Math.pow(Number(feature.Magnitude), 2.5);
166+
}
167+
}
168+
});
169+
deckglLayer.onAdd(map);
170+
setTimeout(() => {
171+
expect(deckglLayer.deckGL).not.toBeNull();
172+
done();
173+
}, 0)
174+
});
175+
176+
it('setVisibility', (done) => {
177+
deckglLayer.setVisibility(false);
178+
expect(deckglLayer.visibility).toBeFalsy;
179+
done();
180+
});
181+
182+
it('setData,removeFromMap', (done) => {
183+
var data = [
184+
{"ADDRESS": "939 ELLIS ST", "RACKS": 2, "SPACES": 4, "COORDINATES": [-122.42177834, 37.78346622]},
185+
{"ADDRESS": "1380 HOWARD ST", "RACKS": 1, "SPACES": 2, "COORDINATES": [-122.414411, 37.774458]}
186+
];
187+
deckglLayer = new DeckglLayer("hexagon-layer", {
188+
data: features,
189+
props: {
190+
strokeWidth: 12 //线宽
191+
},
192+
callback: {
193+
getSourcePosition: d => d.from.coordinates,
194+
getTargetPosition: d => d.to.coordinates,
195+
getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
196+
getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
197+
}
198+
});
199+
map.addLayer(deckglLayer);
200+
setTimeout(() => {
201+
deckglLayer.setData(data);
202+
expect(deckglLayer.deckGL).not.toBeNull();
203+
expect(deckglLayer.data).toEqual(data);
204+
expect(deckglLayer.data.length).toEqual(2);
205+
}, 0)
206+
setTimeout(() => {
207+
deckglLayer.removeFromMap()
208+
expect(deckglLayer.deckGL).not.toBeNull();
209+
expect(deckglLayer.data.length).toEqual(0);
210+
done();
211+
}, 0)
212+
213+
214+
});
215+
216+
it('addData,removeData', (done) => {
217+
var data = [
218+
{"ADDRESS": "939 ELLIS ST", "RACKS": 2, "SPACES": 4, "COORDINATES": [-122.42177834, 37.78346622]},
219+
{"ADDRESS": "1380 HOWARD ST", "RACKS": 1, "SPACES": 2, "COORDINATES": [-122.414411, 37.774458]},
220+
{"ADDRESS": "685 CHENERY ST", "RACKS": 1, "SPACES": 2, "COORDINATES": [-122.433618, 37.73435]}
221+
];
222+
deckglLayer = new DeckglLayer("arc-layer", {
223+
data: features,
224+
props: {
225+
strokeWidth: 12 //线宽
226+
},
227+
callback: {
228+
getSourcePosition: d => d.from.coordinates,
229+
getTargetPosition: d => d.to.coordinates,
230+
getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
231+
getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
232+
}
233+
});
234+
map.addLayer(deckglLayer);
235+
236+
setTimeout(() => {
237+
deckglLayer.addData(data);
238+
expect(deckglLayer.deckGL).not.toBeNull();
239+
expect(deckglLayer.data.length).toEqual(4);
240+
}, 0)
241+
setTimeout(() => {
242+
deckglLayer.removeData();
243+
expect(deckglLayer.deckGL).not.toBeNull();
244+
expect(deckglLayer.data.length).toEqual(0);
245+
done();
246+
}, 0)
247+
});
248+
249+
it('setStyle,hexagon-layer', (done) => {
250+
deckglLayer = new DeckglLayer("hexagon-layer", {
251+
data: features,
252+
props: {
253+
radius: 100 //线宽
254+
}
255+
});
256+
map.addLayer(deckglLayer);
257+
258+
setTimeout(() => {
259+
expect(deckglLayer.deckGL).not.toBeNull();
260+
expect(deckglLayer.deckGL.props.radius).toEqual(100);
261+
deckglLayer.setStyle({ radius: 1000 });
262+
expect(deckglLayer.deckGL.props.radius).toEqual(1000);
263+
done();
264+
}, 0)
265+
266+
});
267+
});

‎test/maplibregl/overlay/FGBLayerSpec.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { FGBLayer } from '../../../src/maplibregl/overlay/FGBLayer';
2+
import maplibregl from 'maplibre-gl';
3+
var url = GlobeParameter.ChinaURL + '/zxyTileImage.png?z={z}&x={x}&y={y}';
4+
var fgbUrl = 'base/resources/data/capitals_data20.fgb';
5+
6+
describe('maplibregl_FGBLayer', () => {
7+
var originalTimeout;
8+
var testDiv, map;
9+
beforeAll(() => {
10+
testDiv = window.document.createElement('div');
11+
testDiv.setAttribute('id', 'map');
12+
testDiv.style.styleFloat = 'left';
13+
testDiv.style.marginLeft = '8px';
14+
testDiv.style.marginTop = '50px';
15+
testDiv.style.width = '500px';
16+
testDiv.style.height = '500px';
17+
window.document.body.appendChild(testDiv);
18+
map = new maplibregl.Map({
19+
container: 'map',
20+
style: {
21+
version: 8,
22+
sources: {
23+
'raster-tiles': {
24+
type: 'raster',
25+
tiles: [url],
26+
tileSize: 256
27+
}
28+
},
29+
layers: [
30+
{
31+
id: 'simple-tiles',
32+
type: 'raster',
33+
source: 'raster-tiles',
34+
minzoom: 0,
35+
maxzoom: 22
36+
}
37+
]
38+
},
39+
center: [0, 0],
40+
zoom: 3
41+
});
42+
});
43+
beforeEach(() => {
44+
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
45+
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
46+
});
47+
48+
afterEach(() => {
49+
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
50+
});
51+
52+
afterAll(() => {
53+
document.body.removeChild(testDiv);
54+
map = null;
55+
});
56+
57+
it('load bbox', (done) => {
58+
map.on('load', () => {
59+
var count = 0;
60+
var fgblayer = new FGBLayer({
61+
url: fgbUrl,
62+
featureLoader: function (feature) {
63+
expect(['圣多美', '蒙罗维亚'].includes(feature.properties['CAPITAL'])).toBeTrue();
64+
count++;
65+
if (count === 2) {
66+
done();
67+
}
68+
return feature;
69+
}
70+
});
71+
fgblayer.onAdd(map);
72+
expect(fgblayer.strategy).toBe('bbox');
73+
expect(fgblayer).not.toBeNull();
74+
expect(fgblayer.url).toBe(fgbUrl);
75+
})
76+
});
77+
78+
it('load all', (done) => {
79+
var count = 0;
80+
var fgblayer = new FGBLayer({
81+
url: fgbUrl,
82+
strategy: 'all',
83+
featureLoader: function (feature) {
84+
count++;
85+
if (count === 19) {
86+
done();
87+
}
88+
return feature;
89+
}
90+
});
91+
fgblayer.onAdd(map);
92+
expect(fgblayer.url).toBe(fgbUrl);
93+
});
94+
95+
it('set extent', (done) => {
96+
var fgblayer = new FGBLayer({
97+
url: fgbUrl,
98+
extent: [0, 0, 21, 21],
99+
featureLoader: function (feature) {
100+
expect(feature.properties['CAPITAL']).toBe('圣多美');
101+
done();
102+
return feature;
103+
}
104+
});
105+
fgblayer.onAdd(map);
106+
expect(fgblayer).not.toBeNull();
107+
expect(fgblayer.url).toBe(fgbUrl);
108+
});
109+
});

0 commit comments

Comments
 (0)