Skip to content

Commit 66d2a05

Browse files
chenmeiyiSupermapchenmeiyiSupermap
committed
补充mapboxgl下的UT
1 parent d347354 commit 66d2a05

File tree

2 files changed

+293
-0
lines changed

2 files changed

+293
-0
lines changed

‎test/mapboxgl/overlay/GraphThemeLayerSpec.js‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
require('../../../src/mapboxgl/overlay/GraphThemeLayer');
2+
require('../../resources/chinaConsumptionLevel');
3+
var mapboxgl = require('mapbox-gl');
4+
window.mapboxgl = mapboxgl;
5+
6+
var url = GlobeParameter.China4326URL;
7+
describe('mapboxgl_testGraphThemeLayer', function () {
8+
var originalTimeout;
9+
var testDiv, map;
10+
beforeAll(function () {
11+
testDiv = document.createElement("div");
12+
testDiv.setAttribute("id", "map");
13+
testDiv.style.styleFloat = "left";
14+
testDiv.style.marginLeft = "8px";
15+
testDiv.style.marginTop = "50px";
16+
testDiv.style.width = "500px";
17+
testDiv.style.height = "500px";
18+
document.body.appendChild(testDiv);
19+
map = new mapboxgl.Map({
20+
container: 'map',
21+
style: {
22+
"version": 8,
23+
"sources": {
24+
"raster-tiles": {
25+
"type": "raster",
26+
"tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
27+
"tileSize": 256
28+
}
29+
},
30+
"layers": [{
31+
"id": "simple-tiles",
32+
"type": "raster",
33+
"source": "raster-tiles",
34+
"minzoom": 0,
35+
"maxzoom": 22
36+
}]
37+
},
38+
center: [116.85, 39.79],
39+
zoom: 3
40+
});
41+
});
42+
beforeEach(function () {
43+
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
44+
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
45+
});
46+
afterEach(function () {
47+
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
48+
});
49+
afterAll(function () {
50+
window.document.body.removeChild(testDiv);
51+
map.remove();
52+
});
53+
54+
it('construtor', function () {
55+
var graphThemeLayer = new mapboxgl.supermap.GraphThemeLayer("GraphThemeLayer", "Bar",
56+
{
57+
map: map,
58+
themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
59+
opacity: 0.9,
60+
chartsSetting: {
61+
// width，height，codomain 分别表示图表宽、高、数据值域；此三项参数为必设参数
62+
width: 240,
63+
height: 100,
64+
codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
65+
barStyle: {fillOpacity: 0.7}, // 柱状图中柱条的（表示字段值的图形）样式
66+
barHoverStyle: {fillOpacity: 1}, // 柱条 hover 样式
67+
xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
68+
axisYTick: 4, // y 轴刻度数量
69+
axisYLabels: ["4万", "3万", "2万", "1万", "0"], // y 轴标签内容
70+
axisXLabels: ["09年", "10年", "11年", "12年", "13年"], // x 轴标签内容
71+
backgroundStyle: {fillColor: "#CCE8CF"}, // 背景样式
72+
backgroundRadius: [5, 5, 5, 5], // 背景框圆角参数
73+
//阴影开关 默认是打开
74+
showShadow: true,
75+
//阴影样式
76+
barShadowStyle: {
77+
shadowBlur: 8,
78+
shadowOffsetX: 2,
79+
shadowOffsetY: 2,
80+
shadowColor: "rgba(100,100,100,0.8)"
81+
},
82+
//按字段设置柱条样式[渐变开始颜色,渐变终止颜色] 与 themeLayer.themeFields 中的字段一一对应）
83+
barLinearGradient: [["#00FF00", "#00CD00"], ["#00CCFF", "#5E87A2"], ["#00FF66", "#669985"], ["#CCFF00", "#94A25E"], ["#FF9900", "#A2945E"]]
84+
}
85+
});
86+
expect(graphThemeLayer).not.toBeNull();
87+
expect(graphThemeLayer.chartsType).toBe("Bar");
88+
expect(graphThemeLayer.charts.length).toEqual(0);
89+
var chartsSetting = graphThemeLayer.chartsSetting;
90+
expect(chartsSetting.axisXLabels.length).toEqual(5);
91+
expect(chartsSetting.axisYLabels.length).toEqual(5);
92+
expect(chartsSetting.axisYTick).toEqual(4);
93+
expect(chartsSetting.backgroundRadius.length).toEqual(4);
94+
expect(chartsSetting.backgroundStyle.fillColor).toBe("#CCE8CF");
95+
expect(chartsSetting.barHoverStyle.fillOpacity).toEqual(1);
96+
expect(chartsSetting.barStyle.fillOpacity).toEqual(0.7);
97+
expect(chartsSetting.barLinearGradient.length).toEqual(5);
98+
expect(chartsSetting.barShadowStyle).not.toBeNull();
99+
expect(chartsSetting.codomain.length).toEqual(2);
100+
expect(chartsSetting.barShadowStyle).not.toBeNull();
101+
expect(chartsSetting.height).toEqual(100);
102+
expect(chartsSetting.width).toEqual(240);
103+
expect(chartsSetting.showShadow).toBeTruthy();
104+
expect(graphThemeLayer.isOverLay).toBeTruthy();
105+
expect(graphThemeLayer.themeFields.length).toEqual(5);
106+
graphThemeLayer.clear();
107+
//graphThemeLayer.destroy();
108+
//expect(graphThemeLayer).not.toBeNull();
109+
});
110+
111+
it('setChartsType', function () {
112+
var graphThemeLayer = new mapboxgl.supermap.GraphThemeLayer("GraphThemeLayer", "Bar",
113+
{
114+
map: map,
115+
chartsSetting: {
116+
width: 240,
117+
height: 100,
118+
codomain: [0, 40000]
119+
}
120+
});
121+
expect(graphThemeLayer.chartsType).toBe("Bar");
122+
graphThemeLayer.setChartsType("Line");
123+
expect(graphThemeLayer.chartsType).toBe("Line");
124+
graphThemeLayer.clear();
125+
});
126+
127+
it('addFeatures, removeFeatures, getShapesByFeatureID', function () {
128+
var graphThemeLayer;
129+
var features = [];
130+
for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
131+
// 省居民消费水平（单位：元）信息
132+
var provinceInfo = chinaConsumptionLevel[i];
133+
var geo = new mapboxgl.LngLat(provinceInfo[1], provinceInfo[2]);
134+
var attrs = {};
135+
attrs.NAME = provinceInfo[0];
136+
attrs.CON2009 = provinceInfo[3];
137+
attrs.CON2010 = provinceInfo[4];
138+
attrs.CON2011 = provinceInfo[5];
139+
attrs.CON2012 = provinceInfo[6];
140+
attrs.CON2013 = provinceInfo[7];
141+
var fea = new mapboxgl.supermap.ThemeFeature(geo, attrs);
142+
features.push(fea);
143+
}
144+
graphThemeLayer = new mapboxgl.supermap.GraphThemeLayer("GraphThemeLayer", "Bar",
145+
{
146+
map: map,
147+
attributions: " ",
148+
themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
149+
opacity: 0.9,
150+
chartsSetting: {
151+
width: 240,
152+
height: 100,
153+
codomain: [0, 40000],
154+
barStyle: {fillOpacity: 0.7},
155+
barHoverStyle: {fillOpacity: 1},
156+
xShapeBlank: [10, 10, 10],
157+
axisYTick: 4,
158+
axisYLabels: ["4万", "3万", "2万", "1万", "0"],
159+
axisXLabels: ["09年", "10年", "11年", "12年", "13年"],
160+
backgroundStyle: {fillColor: "#CCE8CF"},
161+
backgroundRadius: [5, 5, 5, 5],
162+
showShadow: true,
163+
barShadowStyle: {
164+
shadowBlur: 8,
165+
shadowOffsetX: 2,
166+
shadowOffsetY: 2,
167+
shadowColor: "rgba(100,100,100,0.8)"
168+
},
169+
barLinearGradient: [["#00FF00", "#00CD00"], ["#00CCFF", "#5E87A2"], ["#00FF66", "#669985"], ["#CCFF00", "#94A25E"], ["#FF9900", "#A2945E"]]
170+
}
171+
});
172+
expect(graphThemeLayer.features.length).toEqual(0);
173+
graphThemeLayer.addFeatures(features);
174+
var LayerFeatures = graphThemeLayer.features;
175+
expect(LayerFeatures.length).toBeGreaterThan(0);
176+
for (var j = 0; j < LayerFeatures.length; j++) {
177+
expect(LayerFeatures[j].CLASS_NAME).toBe("SuperMap.Feature.Vector");
178+
expect(LayerFeatures[j].id).toContain("SuperMap.Feature");
179+
expect(LayerFeatures[j].attributes).not.toBeNull();
180+
expect(LayerFeatures[j].geometry).not.toBeNull();
181+
expect(LayerFeatures[j].geometry.CLASS_NAME).toBe("SuperMap.Geometry.Point");
182+
expect(LayerFeatures[j].geometry.id).toContain("SuperMap.Geometry");
183+
expect(LayerFeatures[j].geometry.x).not.toBeNull();
184+
expect(LayerFeatures[j].geometry.y).not.toBeNull();
185+
}
186+
expect(LayerFeatures[0].geometry.x).toEqual(116.407283);
187+
expect(LayerFeatures[0].geometry.y).toEqual(39.904557);
188+
expect(LayerFeatures[0].data).toEqual(LayerFeatures[0].attributes);
189+
expect(LayerFeatures[0].attributes).toEqual(Object({
190+
CON2009: 22023,
191+
CON2010: 24982,
192+
CON2011: 27760,
193+
CON2012: 30350,
194+
CON2013: 33337,
195+
NAME: "北京市"
196+
}));
197+
var shape1 = graphThemeLayer.getShapesByFeatureID();
198+
var shape2 = graphThemeLayer.getShapesByFeatureID(LayerFeatures[0].id);
199+
expect(shape1.length).toBeGreaterThan(0);
200+
expect(shape2.length).toBeGreaterThan(0);
201+
expect(shape1.length).toBeGreaterThan(shape2.length);
202+
graphThemeLayer.features[0].geometry.x = 39;
203+
var redraw = graphThemeLayer.redraw();
204+
expect(redraw).toBeTruthy();
205+
expect(graphThemeLayer.features[0].geometry.x).toEqual(39);
206+
graphThemeLayer.removeFeatures();
207+
graphThemeLayer.removeAllFeatures();
208+
expect(graphThemeLayer.features.length).toEqual(0);
209+
graphThemeLayer.clear();
210+
});
211+
212+
// 此方法为iclient8的私有方法,不支持leaflet对象,此处测试传入iclient对象的情况
213+
it('isQuadrilateralOverLap, isPointInPoly', function () {
214+
var graphThemeLayer = new mapboxgl.supermap.GraphThemeLayer("GraphThemeLayer", "Bar",
215+
{
216+
map: map,
217+
themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
218+
chartsSetting: {
219+
width: 240,
220+
height: 100,
221+
codomain: [0, 40000]
222+
}
223+
});
224+
var quadrilateral, quadrilateral2;
225+
quadrilateral = [{"x": 1, "y": 1}, {"x": 3, "y": 1}, {"x": 6, "y": 4}, {"x": 2, "y": 10}, {"x": 1, "y": 1}];
226+
quadrilateral2 = [{"x": 1, "y": 1}, {"x": 3, "y": 1}, {"x": 6, "y": 4}, {"x": 2, "y": 10}, {"x": 1, "y": 1}];
227+
var isQuadrilateralOverLap = graphThemeLayer.isQuadrilateralOverLap(quadrilateral, quadrilateral2);
228+
expect(isQuadrilateralOverLap).toBeTruthy();
229+
var point = {"x": 2, "y": 5};
230+
var polygon = [{"x": 1, "y": 1}, {"x": 3, "y": 1}, {"x": 6, "y": 4}, {"x": 2, "y": 10}, {"x": 1, "y": 1}];
231+
var isPointInPoly = graphThemeLayer.isPointInPoly(point, polygon);
232+
expect(isPointInPoly).toBeTruthy();
233+
graphThemeLayer.clear();
234+
235+
});
236+
237+
it('drawCharts', function () {
238+
var graphThemeLayer = new mapboxgl.supermap.GraphThemeLayer("GraphThemeLayer", "Bar", {
239+
map: map,
240+
isOverLay: false,
241+
overlayWeightField:"pop_1991",
242+
themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
243+
chartsSetting: {
244+
width: 240,
245+
height: 100,
246+
codomain: [0, 40000],
247+
barStyle: {fillOpacity: 0.7},
248+
barHoverStyle: {fillOpacity: 1},
249+
xShapeBlank: [10, 10, 10],
250+
axisYTick: 4,
251+
axisYLabels: ["4万", "3万", "2万", "1万", "0"],
252+
axisXLabels: ["09年", "10年", "11年", "12年", "13年"],
253+
backgroundStyle: {fillColor: "#CCE8CF"},
254+
backgroundRadius: [5, 5, 5, 5],
255+
showShadow: true,
256+
barShadowStyle: {
257+
shadowBlur: 8,
258+
shadowOffsetX: 2,
259+
shadowOffsetY: 2,
260+
shadowColor: "rgba(100,100,100,0.8)"
261+
},
262+
barLinearGradient: [["#00FF00", "#00CD00"], ["#00CCFF", "#5E87A2"], ["#00FF66", "#669985"], ["#CCFF00", "#94A25E"], ["#FF9900", "#A2945E"]]
263+
}
264+
});
265+
graphThemeLayer.drawCharts();
266+
expect(graphThemeLayer).not.toBeNull();
267+
graphThemeLayer.clear();
268+
});
269+
270+
it('clearCache', function () {
271+
var graphThemeLayer = new mapboxgl.supermap.GraphThemeLayer("GraphThemeLayer", "Bar", {
272+
map: map,
273+
isOverLay: false,
274+
themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
275+
chartsSetting: {
276+
width: 240,
277+
height: 100,
278+
codomain: [0, 40000]
279+
},
280+
charts: [1, 2, 3],
281+
cache: {'name': 'ONETWO'}
282+
});
283+
expect(graphThemeLayer.charts.length).toEqual(3);
284+
expect(graphThemeLayer.cache).toEqual(Object({
285+
name: "ONETWO"
286+
}));
287+
graphThemeLayer.clearCache();
288+
expect(graphThemeLayer.charts.length).toEqual(0);
289+
expect(graphThemeLayer.cache).toEqual(Object({}));
290+
graphThemeLayer.clear();
291+
});
292+
});

‎test/test-main-mapboxgl.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
require('./mapboxgl/overlay/MapvLayerSpec.js');
33
require('./mapboxgl/overlay/RangeTheme3DLayerSpec.js');
44
require('./mapboxgl/overlay/UniqueTheme3DLayerSpec.js');
5+
require('./mapboxgl/overlay/GraphThemeLayerSpec.js');

0 commit comments

Comments
 (0)