Skip to content

Commit 25a01b1

Browse files
hechangqunhechangqun
committed
fix maplibregl & mapboxgl overlay UT; review by qiw
1 parent 171f975 commit 25a01b1

File tree

7 files changed

+135
-130
lines changed

7 files changed

+135
-130
lines changed

‎examples/mapboxgl/fgb_all_load.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>";
3434
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
3535
var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}';
36-
var fgbUrl = 'https://iclient.supermap.io/minio/fgb/waterways.fgb';
36+
var fgbUrl = 'https://iclient.supermap.io/minio/fgb/roads.fgb';
3737

3838
var map = new mapboxgl.Map({
3939
container: 'map',

‎examples/maplibregl/fgb_all_load.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>";
3434
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
3535
var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}';
36-
var fgbUrl = 'https://iclient.supermap.io/minio/fgb/waterways.fgb';
36+
var fgbUrl = 'https://iclient.supermap.io/minio/fgb/roads.fgb';
3737

3838
var map = new maplibregl.Map({
3939
container: 'map',

‎src/common/overlay/fgb/FGBLayerRenderer.js‎

Lines changed: 121 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,134 @@
1-
// /* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
2-
// * This program are made available under the terms of the Apache License, Version 2.0
3-
// * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
1+
/* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
2+
* This program are made available under the terms of the Apache License, Version 2.0
3+
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
44

5-
// import { Util as CommonUtil } from '../../commontypes/Util';
6-
// import { FetchRequest } from '@supermap/iclient-common/util/FetchRequest';
7-
// import { deserialize } from 'flatgeobuf/lib/mjs/geojson';
8-
// import RBush from 'rbush';
5+
import { Util as CommonUtil } from '../../commontypes/Util';
6+
import { FetchRequest } from '@supermap/iclient-common/util/FetchRequest';
7+
import { deserialize } from 'flatgeobuf/lib/mjs/geojson';
8+
import RBush from 'rbush';
99

10-
// /**
11-
// * @class FGBLayer
12-
// * @category Visualization FGB
13-
// * @classdesc FGB。
14-
// * @version 11.1.0
15-
// * @param {Object} options - 参数。
16-
// * @param {string} [options.layerID] - 图层 ID。默认使用 CommonUtil.createUniqueID("FGBlayer_") 创建图层 ID。
17-
// * @param {boolean} [options.strategy='bbox'] - 指定加载策略，可选值为 all，bbox。 all为全量加载， bbox为当前可见范围加载。
18-
// * @param {Array} [options.extent] - 加载范围, 参数规范为: [minX, minY, maxX, maxY], 传递此参数后, 图层将使用局部加载。
19-
// * @param {function} [options.featureLoader] - 要素自定义方法，接收要素作为参数，需返回要素。
20-
// * @param {Object} [options.paint] - 参数内容详见: {@link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property}
21-
// * @param {Object} [options.layout] - 参数内容详见: {@link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property}
22-
// * @param {Object} [options.sourceOptions] - 参数内容详见: {@link mapboxgl.source}
23-
// * @usage
24-
// */
10+
/**
11+
* @class FGBLayer
12+
* @category Visualization FGB
13+
* @classdesc FGB。
14+
* @version 11.1.0
15+
* @param {Object} options - 参数。
16+
* @param {string} [options.layerID] - 图层 ID。默认使用 CommonUtil.createUniqueID("FGBlayer_") 创建图层 ID。
17+
* @param {boolean} [options.strategy='bbox'] - 指定加载策略，可选值为 all，bbox。 all为全量加载， bbox为当前可见范围加载。
18+
* @param {Array} [options.extent] - 加载范围, 参数规范为: [minX, minY, maxX, maxY], 传递此参数后, 图层将使用局部加载。
19+
* @param {function} [options.featureLoader] - 要素自定义方法，接收要素作为参数，需返回要素。
20+
* @param {Object} [options.paint] - 参数内容详见: {@link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property}
21+
* @param {Object} [options.layout] - 参数内容详见: {@link https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property}
22+
* @param {Object} [options.sourceOptions] - 参数内容详见: {@link mapboxgl.source}
23+
* @usage
24+
*/
2525

26-
// const GEOMETRY_TYPE_MAP = {
27-
// 1: 'circle',
28-
// 2: 'line',
29-
// 3: 'fill',
30-
// 5: 'line',
31-
// 4: 'circle',
32-
// 6: 'fill',
33-
// 'MultiPolygon': 'fill',
34-
// 'Point': 'circle',
35-
// 'MultiLineString': 'line',
36-
// 'MultiPoint': 'circle',
37-
// 'LineString': 'line',
38-
// 'Polygon': 'fill'
39-
// };
26+
const GEOMETRY_TYPE_MAP = {
27+
1: 'circle',
28+
2: 'line',
29+
3: 'fill',
30+
5: 'line',
31+
4: 'circle',
32+
6: 'fill',
33+
'MultiPolygon': 'fill',
34+
'Point': 'circle',
35+
'MultiLineString': 'line',
36+
'MultiPoint': 'circle',
37+
'LineString': 'line',
38+
'Polygon': 'fill'
39+
};
4040

41-
// export class FGBLayerRenderer {
42-
// constructor(options = {}) {
43-
// this.id = options.layerID ? options.layerID : CommonUtil.createUniqueID('FGBLayer_');
44-
// this.layerId = this.id + 'outer';
45-
// this.sourceId = this.layerId;
46-
// this.options = options;
47-
// this.strategy = options.strategy || 'bbox';
48-
// this.url = options.url;
49-
// this.layerType = '';
50-
// this.extent = options.extent;
51-
// this.init();
52-
// }
41+
export class FGBLayerRenderer {
42+
constructor(options = {}) {
43+
this.id = options.layerID ? options.layerID : CommonUtil.createUniqueID('FGBLayer_');
44+
this.layerId = this.id + 'outer';
45+
this.sourceId = this.layerId;
46+
this.options = options;
47+
this.strategy = options.strategy || 'bbox';
48+
this.url = options.url;
49+
this.layerType = '';
50+
this.extent = options.extent;
51+
this.init();
52+
}
5353

54-
// init() {
55-
// if (this.strategy === 'bbox') {
56-
// this.loadedExtentsRtree_ = new RBush();
57-
// }
58-
// }
54+
init() {
55+
if (this.strategy === 'bbox') {
56+
this.loadedExtentsRtree_ = new RBush();
57+
}
58+
}
5959

60-
// async iterateFeatures(iterator) {
61-
// const features = {
62-
// type: 'FeatureCollection',
63-
// features: []
64-
// };
65-
// for await (let feature of iterator) {
66-
// if (this.options.featureLoader && typeof this.options.featureLoader === 'function') {
67-
// feature = this.options.featureLoader(feature);
68-
// }
69-
// if (!this.layerType) {
70-
// this.layerType = GEOMETRY_TYPE_MAP[feature.geometry.type]
71-
// }
72-
// features.features.push(feature);
73-
// }
74-
// return features;
75-
// }
60+
async iterateFeatures(iterator) {
61+
const features = {
62+
type: 'FeatureCollection',
63+
features: []
64+
};
65+
for await (let feature of iterator) {
66+
if (this.options.featureLoader && typeof this.options.featureLoader === 'function') {
67+
feature = this.options.featureLoader(feature);
68+
}
69+
if (!this.layerType) {
70+
this.layerType = GEOMETRY_TYPE_MAP[feature.geometry.type]
71+
}
72+
features.features.push(feature);
73+
}
74+
return features;
75+
}
7676

77-
// async _loadData(bounds) {
78-
// let fgbStream;
79-
// let rect = {
80-
// minX: bounds[0],
81-
// minY: bounds[1],
82-
// maxX: bounds[2],
83-
// maxY: bounds[3]
84-
// };
85-
// if (!bounds.length) {
86-
// fgbStream = await this._getStream(this.url);
87-
// } else {
88-
// rect.value = { extent: bounds.slice() };
89-
// this.loadedExtentsRtree_.insert(rect);
90-
// }
77+
async _loadData(bounds) {
78+
let fgbStream;
79+
let rect = {
80+
minX: bounds[0],
81+
minY: bounds[1],
82+
maxX: bounds[2],
83+
maxY: bounds[3]
84+
};
85+
if (!bounds.length) {
86+
fgbStream = await this._getStream(this.url);
87+
} else {
88+
rect.value = { extent: bounds.slice() };
89+
this.loadedExtentsRtree_.insert(rect);
90+
}
9191

92-
// return await deserialize((fgbStream && fgbStream.body) || this.url, rect, (headerMeta) => {
93-
// this.layerType = GEOMETRY_TYPE_MAP[headerMeta.geometryType];
94-
// });
95-
// }
92+
return await deserialize((fgbStream && fgbStream.body) || this.url, rect, (headerMeta) => {
93+
this.layerType = GEOMETRY_TYPE_MAP[headerMeta.geometryType];
94+
});
95+
}
9696

97-
// async _getStream(url) {
98-
// return await FetchRequest.get(url, {}, { withoutFormatSuffix: true }).then(function (response) {
99-
// return response;
100-
// });
101-
// }
97+
async _getStream(url) {
98+
return await FetchRequest.get(url, {}, { withoutFormatSuffix: true }).then(function (response) {
99+
return response;
100+
});
101+
}
102102

103-
// _containsExtent(extent1, extent2) {
104-
// return extent1[0] <= extent2[0] && extent2[2] <= extent1[2] && extent1[1] <= extent2[1] && extent2[3] <= extent1[3];
105-
// }
103+
_containsExtent(extent1, extent2) {
104+
return extent1[0] <= extent2[0] && extent2[2] <= extent1[2] && extent1[1] <= extent2[1] && extent2[3] <= extent1[3];
105+
}
106106

107-
// _getInExtent(extent) {
108-
// const bbox = {
109-
// minX: extent[0],
110-
// minY: extent[1],
111-
// maxX: extent[2],
112-
// maxY: extent[3]
113-
// };
114-
// const items = this.loadedExtentsRtree_.search(bbox);
115-
// return items.map(function (item) {
116-
// return item.value;
117-
// });
118-
// }
107+
_getInExtent(extent) {
108+
const bbox = {
109+
minX: extent[0],
110+
minY: extent[1],
111+
maxX: extent[2],
112+
maxY: extent[3]
113+
};
114+
const items = this.loadedExtentsRtree_.search(bbox);
115+
return items.map(function (item) {
116+
return item.value;
117+
});
118+
}
119119

120-
// _forEachInExtent(extent, callback) {
121-
// return this._forEach(this._getInExtent(extent), callback);
122-
// }
120+
_forEachInExtent(extent, callback) {
121+
return this._forEach(this._getInExtent(extent), callback);
122+
}
123123

124-
// _forEach(values, callback) {
125-
// let result;
126-
// for (let i = 0, l = values.length; i < l; i++) {
127-
// result = callback(values[i]);
128-
// if (result) {
129-
// return result;
130-
// }
131-
// }
132-
// return result;
133-
// }
134-
// }
124+
_forEach(values, callback) {
125+
let result;
126+
for (let i = 0, l = values.length; i < l; i++) {
127+
result = callback(values[i]);
128+
if (result) {
129+
return result;
130+
}
131+
}
132+
return result;
133+
}
134+
}

‎src/mapboxgl/overlay/GraticuleLayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export class GraticuleLayer {
104104
this.renderer = new GraticuleLayerRenderer(this.map, this.options, {
105105
getMapStateByKey: this.getMapStateByKey,
106106
getDefaultExtent: this.getDefaultExtent,
107-
updateGraticuleLayer: this._updateGraticuleLayer.bind(this),
107+
_updateGraticuleLayer: this._updateGraticuleLayer.bind(this),
108108
setVisibility: this.setVisibility.bind(this)
109109
}, {
110110
mapCanvas: this.map.getCanvas(),

‎src/mapboxgl/overlay/HeatMapLayer.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export class HeatMapLayer extends mapboxgl.Evented {
3131
super();
3232

3333
var _options = options ? options : {};
34+
this.options = _options;
3435
/**
3536
* @member {string} HeatMapLayer.prototype.name
3637
* @description 图层名字。
@@ -81,24 +82,28 @@ export class HeatMapLayer extends mapboxgl.Evented {
8182
this.map = map;
8283
const mapContainer = this.map.getCanvasContainer();
8384
const mapCanvas = this.map.getCanvas();
84-
this.renderer = new HeatMapLayerRenderer({ id: this.id, ...this.options, convertLatlonToPixel: this._convertLatlonToPixel, mapContainer, mapCanvas });
85+
this.renderer = new HeatMapLayerRenderer({ id: this.id, ...this.options, convertLatlonToPixel: this._convertLatlonToPixel.bind(this), mapContainer, mapCanvas });
8586
if (this.features.features && this.features.features.length) {
86-
this.renderer.setExtent(this.map.getBounds());
87-
this.renderer.addFeatures(this.features);
87+
this.renderer.setExtent(this.map.getBounds());
88+
this.renderer.addFeatures(this.features);
8889
}
8990
}
9091

9192
/**
9293
* @function HeatMapLayer.prototype.removeFromMap
9394
* @description 删除该图层。
9495
*/
95-
removeFromMap() {
96+
onRemove() {
9697
this.removeAllFeatures();
9798
this.renderer.removeFromMap();
9899
this.features = {};
99100
this.renderer = null;
100101
}
101102

103+
render() {
104+
this.refresh();
105+
}
106+
102107
/**
103108
* @function HeatMapLayer.prototype.addFeatures
104109
* @description 添加热点信息。

‎src/maplibregl/overlay/HeatMapLayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export class HeatMapLayer extends maplibregl.Evented {
8282
this.map = map;
8383
const mapContainer = this.map.getCanvasContainer();
8484
const mapCanvas = this.map.getCanvas();
85-
this.renderer = new HeatMapLayerRenderer({ id: this.id, ...this.options, convertLatlonToPixel: this._convertLatlonToPixel, mapContainer, mapCanvas });
85+
this.renderer = new HeatMapLayerRenderer({ id: this.id, ...this.options, convertLatlonToPixel: this._convertLatlonToPixel.bind(this), mapContainer, mapCanvas });
8686
if (this.features.features && this.features.features.length) {
8787
this.renderer.setExtent(this.map.getBounds());
8888
this.renderer.addFeatures(this.features);

‎test/mapboxgl/overlay/HeatMapLayerSpec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ describe('mapboxgl_HeatMapLayer', () => {
234234
expect(heatMapLayerIndexBefore).toEqual(heatMapLayerIndexAfter);
235235
heatLayer.moveTo('heatmap_2', false);
236236
for (var i = 0; i < children.length; i++) {
237-
if (heatLayer.rootCanvas === children[i]) {
237+
if (rootCanvas === children[i]) {
238238
heatMapLayerIndexAfter = i;
239239
}
240240
}

0 commit comments

Comments
 (0)