Skip to content

Commit c5981b4

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
2 parents 512bbb7 + 967e16b commit c5981b4

File tree

6 files changed

+221
-38
lines changed

6 files changed

+221
-38
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: 54 additions & 3 deletions
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);
@@ -108,7 +115,7 @@ function MapExtendSymbol(){
108115
*/
109116
mapboxgl.Map.prototype.loadSymbol = async function (id, callback) {
110117
if (typeof id === 'string') {
111-
let symbolInfo = getSymbolHandler(this).getSymbolInfo(id);
118+
let symbolInfo = this.getSymbol(id);
112119
if (!symbolInfo) {
113120
const symbolResult = await getSymbol(id, this);
114121
if (!symbolResult) {
@@ -138,6 +145,14 @@ function MapExtendSymbol(){
138145
getSymbolHandler(this).addSymbol(id, symbol);
139146
};
140147

148+
/**
149+
* 获取符号信息
150+
* @param {string} id
151+
*/
152+
mapboxgl.Map.prototype.getSymbol = function (id) {
153+
return getSymbolHandler(this).getSymbol(id);
154+
};
155+
141156
/**
142157
* 判断符号是否存在
143158
* @param {string} id
@@ -150,7 +165,7 @@ function MapExtendSymbol(){
150165
return false;
151166
}
152167

153-
return !!getSymbolHandler(this).getSymbolInfo(id);
168+
return !!this.getSymbol(id);
154169
};
155170

156171
/**
@@ -245,6 +260,42 @@ function MapExtendSymbol(){
245260
}
246261
return getSymbolHandler(this).getLayoutProperty(layerId, name);
247262
};
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+
}
248299

249300
/**
250301
* @function WebSymbol.prototype.getSymbol

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

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ class SymbolHandler {
3636
if (typeof layer.symbol === 'string') {
3737
const id = layer.symbol;
3838
if (id) {
39-
const symbol = this.symbolManager.getSymbol(id);
39+
const symbol = this.getSymbol(id);
4040
if (!symbol) {
4141
return this.map.fire('error', {
4242
error: new Error(`Symbol "${id}" could not be loaded. Please make sure you have added the symbol with map.addSymbol().`)
@@ -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
});
@@ -190,7 +204,7 @@ class SymbolHandler {
190204
* @param {object} symbol
191205
*/
192206
addSymbol(id, symbol) {
193-
if (this.symbolManager.getSymbol(id)) {
207+
if (this.getSymbol(id)) {
194208
return this.map.fire('error', {
195209
error: new Error('An symbol with this name already exists.')
196210
});
@@ -218,7 +232,7 @@ class SymbolHandler {
218232
* @param {string} layerId
219233
* @return {string | array} symbol
220234
*/
221-
getSymbol(layerId) {
235+
getLayerSymbol(layerId) {
222236
return this._layerSymbols[layerId];
223237
}
224238

@@ -242,7 +256,7 @@ class SymbolHandler {
242256
* 通过symbolId获取symbol内容
243257
* @param {string} symbolId
244258
*/
245-
getSymbolInfo(symbolId) {
259+
getSymbol(symbolId) {
246260
return this.symbolManager.getSymbol(symbolId);
247261
}
248262

@@ -280,7 +294,7 @@ class SymbolHandler {
280294
*/
281295
getLayer(layerId) {
282296
const layer = this.map.getLayerBySymbolBak(layerId);
283-
const symbol = this.getSymbol(layerId);
297+
const symbol = this.getLayerSymbol(layerId);
284298
if (layer) {
285299
return symbol ? { ...layer, symbol } : layer;
286300
} else {
@@ -316,9 +330,9 @@ class SymbolHandler {
316330
style.layers = style.layers.reduce((pre, layer) => {
317331
const compositeId = this.getLayerId(layer.id);
318332
if (compositeId) {
319-
!pre.find(l => l.id === compositeId) && pre.push({ ...layer, symbol: this.getSymbol(compositeId), id: compositeId })
320-
} else if (this.getSymbol(layer.id)) {
321-
pre.push({ ...layer, symbol: this.getSymbol(layer.id) })
333+
!pre.find(l => l.id === compositeId) && pre.push({ ...layer, symbol: this.getLayerSymbol(compositeId), id: compositeId })
334+
} else if (this.getLayerSymbol(layer.id)) {
335+
pre.push({ ...layer, symbol: this.getLayerSymbol(layer.id) })
322336
} else {
323337
pre.push(layer);
324338
}
@@ -361,12 +375,12 @@ class SymbolHandler {
361375
* @param {object} options
362376
*/
363377
setFilter(layerId, filter, options) {
364-
const symbol = this.getSymbol(layerId);
378+
const symbol = this.getLayerSymbol(layerId);
365379
if (isMapboxExpression(symbol)) {
366380
// 如果 symbol 是数据驱动，filter需要重新计算
367381
const realLayerId = this.getFirstLayerId(layerId);
368382
this.map.style.setFilter(realLayerId, filter, options);
369-
const symbol = this.getSymbol(layerId);
383+
const symbol = this.getLayerSymbol(layerId);
370384
this.setSymbol(layerId, symbol);
371385
return;
372386
}
@@ -479,7 +493,7 @@ class SymbolHandler {
479493
*/
480494
updateSymbol(symbolId, symbol) {
481495
// symbol不存在
482-
if (!this.symbolManager.getSymbol(symbolId)) {
496+
if (!this.getSymbol(symbolId)) {
483497
return this.map.fire('error', {
484498
error: new Error(`Symbol "${symbolId}" could not be loaded. Please make sure you have added the symbol with map.addSymbol().`)
485499
});
@@ -503,7 +517,7 @@ class SymbolHandler {
503517
* @param {any} value
504518
*/
505519
setSymbolProperty(symbolId, symbolIndex, name, value) {
506-
const symbol = this.symbolManager.getSymbol(symbolId);
520+
const symbol = this.getSymbol(symbolId);
507521
// symbol不存在
508522
if (!symbol) {
509523
return this.map.fire('error', {
@@ -547,7 +561,7 @@ class SymbolHandler {
547561
* @returns {any}
548562
*/
549563
getSymbolProperty(symbolId, symbolIndex, name) {
550-
const symbol = this.symbolManager.getSymbol(symbolId);
564+
const symbol = this.getSymbol(symbolId);
551565
// symbol不存在
552566
if (!symbol) {
553567
this.map.fire('error', {

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

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ import MapExtendSymbol from './MapExtendSymbol';
4242
* |id |string |符号ID |||
4343
* |symbol |object |由Mapbox Layers中的[paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)、[layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）组成的符号对象|||
4444
* | | |参数名称 |类型 |描述 |
45-
* | | |paint |object |Mapbox Layers [paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)|
46-
* | | |layout |object |Mapbox Layers [layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）|
45+
* | | |paint |object |可选，Mapbox Layers [paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)|
46+
* | | |layout |object |可选，Mapbox Layers [layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）|
4747
*
4848
* **Example**
4949
* ```
@@ -81,6 +81,12 @@ import MapExtendSymbol from './MapExtendSymbol';
8181
* :---- |:--- |:---
8282
* id |string |符号ID
8383
*
84+
*
85+
* **Returns**
86+
* 类型 |描述
87+
* :--- |:---
88+
* boolean |符号是否存在
89+
*
8490
* **Example**
8591
* ```
8692
* const pointExists = map.hasSymbol('point-1');
@@ -103,27 +109,46 @@ import MapExtendSymbol from './MapExtendSymbol';
103109
* ## mapboxgl.Map.prototype.updateSymbol
104110
* 更新指定 ID 的符号。
105111
*
106-
* 参数名称 |类型 |描述
107-
* :---- |:--- |:---
108-
* id |string |已经添加的符号ID
112+
* |参数名称 |类型 |描述 | ||
113+
* |---- |--- |--- |---|---|
114+
* id |string |已经添加的符号ID|||
109115
* |symbol |object |由Mapbox Layers中的[paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)、[layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）组成的符号对象|||
110116
* | | |参数名称 |类型 |描述 |
111-
* | | |paint |object |Mapbox Layers [paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)|
112-
* | | |layout |object |Mapbox Layers [layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）|
117+
* | | |paint |object |可选，Mapbox Layers [paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)|
118+
* | | |layout |object |可选，Mapbox Layers [layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）|
113119
*
114120
* **Example**
115121
* ```
116122
* map.updateSymbol('point-1', symbol);
117123
* ```
118124
*
119125
*
126+
* ## mapboxgl.Map.prototype.getSymbol
127+
* 获取指定 ID 的符号信息。
128+
*
129+
* 参数名称 |类型 |描述
130+
* :---- |:--- |:---
131+
* id |string |符号ID
132+
*
133+
* **Returns**
134+
* 类型 |描述
135+
* :--- |:---
136+
* object |由Mapbox Layers中的[paint](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-property)、[layout](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-property)（visibility 属性除外）组成的符号对象
137+
*
138+
*
139+
* **Example**
140+
* ```
141+
* const point1 = map.getSymbol('point-1');
142+
* ```
143+
*
144+
*
120145
* ## mapboxgl.Map.prototype.setSymbolProperty
121146
* 设置指定ID符号的属性值。
122147
*
123148
* 参数名称 |类型 |描述
124149
* :---- |:--- |:---
125150
* id |string |符号ID
126-
* index |number |符号数组的index， 符号不是数组的设置为null
151+
* index |number、null |符号数组的index， 符号不是数组的设置为null
127152
* name |string |属性名称
128153
* value |any |属性值
129154
*
@@ -140,8 +165,13 @@ import MapExtendSymbol from './MapExtendSymbol';
140165
* 参数名称 |类型 |描述
141166
* :---- |:--- |:---
142167
* id |string |符号ID
143-
* index |number |符号数组的index， 符号不是数组的设置为null
144-
* name |string |属性名称
168+
* index |number、null |符号数组的index， 符号不是数组的设置为null
169+
* name |string |可选，属性名称
170+
*
171+
* **Returns**
172+
* 类型 |描述
173+
* :--- |:---
174+
* any |属性值
145175
*
146176
* **Example**
147177
* ```

0 commit comments

Comments
 (0)