Skip to content

Commit 9f87860

Browse files
MyShallowTimeMyShallowTime
committed
[feature] 扩展map的on、off、once事件支持symbol图层
[update] map.addLayer接口判断是否已经添加过组合图层 review by zhaoq
1 parent c1c89fd commit 9f87860

File tree

4 files changed

+140
-5
lines changed

4 files changed

+140
-5
lines changed

‎src/mapboxgl/overlay/symbol/CompositeSymbolRender.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class CompositeSymbolRender {
2323
*/
2424
addLayer(layer, symbol, before) {
2525
symbol.forEach((style) => {
26-
const id = Util.createUniqueID(`${layer.id}_`);
26+
const id = Util.createUniqueID(`${layer.id}_compositeLayer_`);
2727
this.singleSymbol.addLayer({ ...layer, id }, style, before);
2828
this.addLayerId(layer.id, id);
2929
})

‎src/mapboxgl/overlay/symbol/MapExtendSymbol.js‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,15 @@ function MapExtendSymbol(){
2626
if (mapboxgl.Map.prototype.addLayerBySymbolBak === undefined) {
2727
mapboxgl.Map.prototype.addLayerBySymbolBak = mapboxgl.Map.prototype.addLayer;
2828
mapboxgl.Map.prototype.addLayer = function (layer, before) {
29+
const symbolHandler = getSymbolHandler(this);
30+
if(symbolHandler.getLayerIds(layer.id).length > 0) {
31+
this.fire('error', {
32+
error: new Error('A layer with this id already exists.')
33+
});
34+
return;
35+
}
2936
if (layer.symbol) {
30-
getSymbolHandler(this).addLayer(layer, before);
37+
symbolHandler.addLayer(layer, before);
3138
return this;
3239
}
3340
this.addLayerBySymbolBak(layer, before);
@@ -253,6 +260,42 @@ function MapExtendSymbol(){
253260
}
254261
return getSymbolHandler(this).getLayoutProperty(layerId, name);
255262
};
263+
264+
if (mapboxgl.Map.prototype.onBak === undefined) {
265+
mapboxgl.Map.prototype.onBak = mapboxgl.Map.prototype.on;
266+
mapboxgl.Map.prototype.on = function (type, layerId, listener) {
267+
if (listener === undefined || this.style.getLayer(layerId)) {
268+
return this.onBak(type, layerId, listener);
269+
}
270+
const layerIds = getSymbolHandler(this).getLayerIds(layerId);
271+
layerIds.forEach(id => this.onBak(type, id, listener));
272+
return this;
273+
};
274+
}
275+
276+
if (mapboxgl.Map.prototype.onceBak === undefined) {
277+
mapboxgl.Map.prototype.onceBak = mapboxgl.Map.prototype.once;
278+
mapboxgl.Map.prototype.once = function (type, layerId, listener) {
279+
if (listener === undefined || this.style.getLayer(layerId)) {
280+
return this.onceBak(type, layerId, listener);
281+
}
282+
const layerIds = getSymbolHandler(this).getLayerIds(layerId);
283+
layerIds.forEach(id => this.onceBak(type, id, listener));
284+
return this;
285+
};
286+
}
287+
288+
if (mapboxgl.Map.prototype.offBak === undefined) {
289+
mapboxgl.Map.prototype.offBak = mapboxgl.Map.prototype.off;
290+
mapboxgl.Map.prototype.off = function (type, layerId, listener) {
291+
if (listener === undefined || this.style.getLayer(layerId)) {
292+
return this.offBak(type, layerId, listener);
293+
}
294+
const layerIds = getSymbolHandler(this).getLayerIds(layerId);
295+
layerIds.forEach(id => this.offBak(type, id, listener));
296+
return this;
297+
};
298+
}
256299

257300
/**
258301
* @function WebSymbol.prototype.getSymbol

‎src/mapboxgl/overlay/symbol/SymbolHandler.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ class SymbolHandler {
8585
if (layer.filter) {
8686
filter.push(layer.filter);
8787
}
88+
const defaultFilter = [];
8889
const expression = layer.symbol.slice(2);
8990
expression.forEach((r, index) => {
9091
if (index % 2 === 1) {
@@ -98,8 +99,16 @@ class SymbolHandler {
9899
]
99100
], symbol: r
100101
});
102+
defaultFilter.push([
103+
"!=",
104+
layer.symbol[1][1],
105+
expression[index - 1]
106+
]);
101107
} else if (index === expression.length - 1) {
102-
layers.unshift({ ...layer, symbol: r });
108+
layers.unshift({ ...layer, "filter": [
109+
...filter,
110+
...defaultFilter
111+
], symbol: r });
103112
}
104113
});
105114
return layers;
@@ -116,6 +125,7 @@ class SymbolHandler {
116125
if (layer.filter) {
117126
filter.push(layer.filter);
118127
}
128+
const defaultFilter = [];
119129
const expression = layer.symbol.slice(1);
120130
expression.forEach((r, index) => {
121131
if (index % 2 === 1) {
@@ -125,8 +135,12 @@ class SymbolHandler {
125135
expression[index - 1]
126136
], symbol: r
127137
});
138+
defaultFilter.push(['!', expression[index - 1]])
128139
} else if (index === expression.length - 1) {
129-
layers.unshift({ ...layer, symbol: r });
140+
layers.unshift({ ...layer, "filter": [
141+
...filter,
142+
...defaultFilter
143+
], symbol: r });
130144
}
131145
});
132146
return layers;
@@ -153,7 +167,7 @@ class SymbolHandler {
153167
});
154168
}
155169
layers.forEach((l) => {
156-
l.id = Util.createUniqueID(`${layer.id}_`);
170+
l.id = Util.createUniqueID(`${layer.id}_compositeLayer_`);
157171
this.compositeSymbolRender.addLayerId(layer.id, l.id);
158172
this.addLayer(l, before);
159173
});

‎test/mapboxgl/overlay/symbol/MapExtendSymbolSpec.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,23 @@ describe('MapExtendSymbol', () => {
208208
expect(layer).not.toBeNull();
209209
});
210210

211+
it('map.addLayer exists layerID', () => {
212+
spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
213+
spyOn(map.symbolHandler, 'addLayer');
214+
spyOn(map, 'addLayerBySymbolBak');
215+
const mylayer = {
216+
"id": "PopDensity_P@Population",
217+
"source": "全国人口密度空间分布图",
218+
"source-layer": "PopDensity_R@Population",
219+
"type": "symbol",
220+
"symbol": "start"
221+
};
222+
map.addLayer(mylayer);
223+
expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
224+
expect(map.symbolHandler.addLayer).not.toHaveBeenCalled();
225+
expect(map.addLayerBySymbolBak).not.toHaveBeenCalled();
226+
});
227+
211228
it('setFilter', () => {
212229
spyOn(map.style, 'setFilter');
213230
spyOn(map.style, 'getFilter')
@@ -281,4 +298,65 @@ describe('MapExtendSymbol', () => {
281298
expect(map.symbolHandler.getSymbol).toHaveBeenCalled();
282299
expect(value.paint["icon-color"]).toBe("red");
283300
});
301+
it('map.on', () => {
302+
spyOn(map, 'onBak');
303+
spyOn(map.style, 'getLayer').and.returnValue({
304+
id: "point"
305+
});
306+
spyOn(map.symbolHandler, 'getLayerIds').and.returnValue([]);
307+
const listnener = () => {};
308+
map.on("click", "point", listnener);
309+
expect(map.onBak).toHaveBeenCalled();
310+
expect(map.style.getLayer).toHaveBeenCalled();
311+
expect(map.symbolHandler.getLayerIds).not.toHaveBeenCalled();
312+
});
313+
it('map.on getLayerIds', () => {
314+
spyOn(map, 'onBak');
315+
spyOn(map.style, 'getLayer').and.returnValue(undefined);
316+
spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
317+
map.on("click", "point", () => {});
318+
expect(map.onBak).toHaveBeenCalled();
319+
expect(map.style.getLayer).toHaveBeenCalled();
320+
expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
321+
});
322+
it('map.once', () => {
323+
spyOn(map, 'onceBak');
324+
spyOn(map.style, 'getLayer').and.returnValue({
325+
id: "point"
326+
});
327+
spyOn(map.symbolHandler, 'getLayerIds').and.returnValue([]);
328+
map.once("click", "point", () => {});
329+
expect(map.onceBak).toHaveBeenCalled();
330+
expect(map.style.getLayer).toHaveBeenCalled();
331+
expect(map.symbolHandler.getLayerIds).not.toHaveBeenCalled();
332+
});
333+
it('map.once getLayerIds', () => {
334+
spyOn(map, 'onceBak');
335+
spyOn(map.style, 'getLayer').and.returnValue(undefined);
336+
spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
337+
map.once("click", "point", () => {});
338+
expect(map.onceBak).toHaveBeenCalled();
339+
expect(map.style.getLayer).toHaveBeenCalled();
340+
expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
341+
});
342+
it('map.off', () => {
343+
spyOn(map, 'offBak');
344+
spyOn(map.style, 'getLayer').and.returnValue({
345+
id: "point"
346+
});
347+
spyOn(map.symbolHandler, 'getLayerIds').and.returnValue([]);
348+
map.off("click", "point", () => {});
349+
expect(map.offBak).toHaveBeenCalled();
350+
expect(map.style.getLayer).toHaveBeenCalled();
351+
expect(map.symbolHandler.getLayerIds).not.toHaveBeenCalled();
352+
});
353+
it('map.off getLayerIds', () => {
354+
spyOn(map, 'offBak');
355+
spyOn(map.style, 'getLayer').and.returnValue(undefined);
356+
spyOn(map.symbolHandler, 'getLayerIds').and.returnValue(["point-1", "point-2"]);
357+
map.off("click", "point", () => {});
358+
expect(map.offBak).toHaveBeenCalled();
359+
expect(map.style.getLayer).toHaveBeenCalled();
360+
expect(map.symbolHandler.getLayerIds).toHaveBeenCalled();
361+
});
284362
});

0 commit comments

Comments
 (0)