Skip to content

Commit 407bda8

Browse files
chenxianhuiichenxianhuii
committed
[fix]FGBLayer能通过设置的layerid进行图层移除、事件绑定操作 review by qiw
1 parent 30ae47f commit 407bda8

File tree

9 files changed

+69
-33
lines changed

9 files changed

+69
-33
lines changed

‎examples/mapboxgl/01_mapQueryBySQL_FGB.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h5 class='panel-title text-center' data-i18n="resources.title_queryBySQL"></h5>
3030
</div>
3131
</div>
3232
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query" onclick="query()"/>&nbsp;
33-
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
33+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearLayer()"/>
3434
</div>
3535
</div>
3636
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
@@ -71,7 +71,6 @@ <h5 class='panel-title text-center' data-i18n="resources.title_queryBySQL"></h5>
7171
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
7272

7373
function query() {
74-
clearFeatures();
7574
var sql = document.getElementById("sql").value || "SMID > 0";
7675
var param = new mapboxgl.supermap.QueryBySQLParameters({
7776
queryParams: {
@@ -90,18 +89,15 @@ <h5 class='panel-title text-center' data-i18n="resources.title_queryBySQL"></h5>
9089
'fill-opacity': 0.6 /* 透明度 */
9190
}
9291
});
92+
clearLayer();
9393
map.addLayer(FGBLayer);
9494
});
9595
}
9696

97-
function clearFeatures() {
97+
function clearLayer() {
9898
if (map.getLayer('points')) {
9999
map.removeLayer('points');
100100
}
101-
if(map.getSource('pointsouter')){
102-
map.removeLayer('pointsouter');
103-
map.removeSource('pointsouter');
104-
}
105101
}
106102

107103
</script>

‎examples/mapboxgl/02_getFeatureBySQL_FGB.html

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
4343
</div>
4444
</div>
4545
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query" onclick="query()"/>&nbsp;
46-
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
46+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearLayer()"/>
4747
</div>
4848
</div>
4949
<div id="map"></div>
@@ -87,7 +87,6 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
8787
map.addControl(new mapboxgl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
8888

8989
function query() {
90-
clearFeatures();
9190
var sql = document.getElementById("sql").value || "SMID > 0";
9291
var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
9392
queryParameter: {
@@ -110,13 +109,12 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
110109
'fill-opacity': 0.6 /* 透明度 */
111110
}
112111
});
112+
clearLayer();
113113
map.addLayer(FGBLayer);
114114
map.on('click', 'queryDatas', function (e) {
115115
new mapboxgl.Popup()
116116
.setLngLat(e.lngLat)
117117
.setHTML(
118-
e.features[0].properties.SMID +
119-
'<br>' +
120118
resources.text_country +
121119
'：' +
122120
e.features[0].properties.COUNTRY
@@ -126,14 +124,10 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
126124
});
127125
}
128126

129-
function clearFeatures() {
127+
function clearLayer() {
130128
if (map.getLayer('queryDatas')) {
131129
map.removeLayer('queryDatas');
132130
}
133-
if (map.getLayer('queryDatasouter')) {
134-
map.removeLayer('queryDatasouter');
135-
map.removeSource('queryDatasouter');
136-
}
137131
}
138132
</script>
139133
</body>

‎examples/maplibregl/01_mapQueryBySQL_FGB.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h5 class='panel-title text-center' data-i18n="resources.title_queryBySQL"></h5>
3030
</div>
3131
</div>
3232
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query" onclick="query()"/>&nbsp;
33-
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
33+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearLayer()"/>
3434
</div>
3535
</div>
3636
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
@@ -72,7 +72,6 @@ <h5 class='panel-title text-center' data-i18n="resources.title_queryBySQL"></h5>
7272

7373

7474
function query() {
75-
clearFeatures();
7675
var sql = document.getElementById("sql").value || "SMID > 0";
7776
var param = new maplibregl.supermap.QueryBySQLParameters({
7877
queryParams: {
@@ -91,18 +90,15 @@ <h5 class='panel-title text-center' data-i18n="resources.title_queryBySQL"></h5>
9190
'fill-opacity': 0.6 /* 透明度 */
9291
}
9392
});
93+
clearLayer();
9494
map.addLayer(FGBLayer);
9595
});
9696
}
9797

98-
function clearFeatures() {
98+
function clearLayer() {
9999
if (map.getLayer('points')) {
100100
map.removeLayer('points');
101101
}
102-
if(map.getSource('pointsouter')){
103-
map.removeLayer('pointsouter');
104-
map.removeSource('pointsouter');
105-
}
106102
}
107103

108104
</script>

‎examples/maplibregl/02_getFeatureBySQL_FGB.html

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
4343
</div>
4444
</div>
4545
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query" onclick="query()"/>&nbsp;
46-
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
46+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearLayer()"/>
4747
</div>
4848
</div>
4949
<div id="map"></div>
@@ -87,7 +87,6 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
8787
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
8888

8989
function query() {
90-
clearFeatures();
9190
var sql = document.getElementById("sql").value || "SMID > 0";
9291
var sqlParam = new maplibregl.supermap.GetFeaturesBySQLParameters({
9392
queryParameter: {
@@ -110,13 +109,12 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
110109
'fill-opacity': 0.6 /* 透明度 */
111110
}
112111
});
112+
clearLayer();
113113
map.addLayer(FGBLayer);
114114
map.on('click', 'queryDatas', function (e) {
115115
new maplibregl.Popup()
116116
.setLngLat(e.lngLat)
117117
.setHTML(
118-
e.features[0].properties.SMID +
119-
'<br>' +
120118
resources.text_country +
121119
'：' +
122120
e.features[0].properties.COUNTRY
@@ -126,14 +124,10 @@ <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL">
126124
});
127125
}
128126

129-
function clearFeatures() {
127+
function clearLayer() {
130128
if (map.getLayer('queryDatas')) {
131129
map.removeLayer('queryDatas');
132130
}
133-
if (map.getLayer('queryDatasouter')) {
134-
map.removeLayer('queryDatasouter');
135-
map.removeSource('queryDatasouter');
136-
}
137131
}
138132
</script>
139133
</body>

‎src/common/util/MapExtend.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ export function createMapExtendExtending(product) {
264264
}
265265
layers.forEach(id => {
266266
const overlayLayer = this.overlayLayersManager[id] || {};
267-
if (overlayLayer.interaction && overlayLayer[mode] && overlayLayer.events.includes(type)) {
267+
if (overlayLayer.interaction && overlayLayer[mode] && (overlayLayer.events === 'all' || overlayLayer.events.includes(type))) {
268268
overlayLayer[mode](type, listener || layerId);
269269
}
270270
});

‎src/mapboxgl/overlay/FGBLayer.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ export class FGBLayer {
7373
this.type='custom';
7474
this.renderingMode = '3d';
7575
this._updateFeaturesFn = this._updateFeatures.bind(this);
76+
this.interaction = true;
77+
this.events = 'all';
7678
}
7779

7880
/**
@@ -108,8 +110,29 @@ export class FGBLayer {
108110
* @function FGBLayer.prototype.onRemove
109111
*/
110112
onRemove() {
113+
if (this.map.getLayer(this.layerId)) {
114+
this.map.removeLayer(this.layerId);
115+
}
111116
this.map.off('moveend', this._updateFeaturesFn);
112117
}
118+
/**
119+
* @function FGBLayer.prototype.on
120+
*/
121+
on(type, listener) {
122+
this.map.on(type, this.layerId, listener);
123+
}
124+
/**
125+
* @function FGBLayer.prototype.off
126+
*/
127+
off(type, listener) {
128+
this.map.off(type, this.layerId, listener);
129+
}
130+
/**
131+
* @function FGBLayer.prototype.once
132+
*/
133+
once(type, listener) {
134+
this.map.once(type, this.layerId, listener);
135+
}
113136
/**
114137
* @function FGBLayer.prototype.moveLayer
115138
*/

‎src/maplibregl/overlay/FGBLayer.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ export class FGBLayer {
7272
this.overlay = true;
7373
this.extent = options.extent;
7474
this._updateFeaturesFn = this._updateFeatures.bind(this);
75+
this.interaction = true;
76+
this.events = 'all';
7577
}
7678
/**
7779
* @function FGBLayer.prototype.onAdd
@@ -112,8 +114,29 @@ export class FGBLayer {
112114
* @function FGBLayer.prototype.onRemove
113115
*/
114116
onRemove() {
117+
if (this.map.getLayer(this.layerId)) {
118+
this.map.removeLayer(this.layerId);
119+
}
115120
this.map.off('moveend', this._updateFeaturesFn);
116121
}
122+
/**
123+
* @function FGBLayer.prototype.on
124+
*/
125+
on(type, listener) {
126+
this.map.on(type, this.layerId, listener);
127+
}
128+
/**
129+
* @function FGBLayer.prototype.off
130+
*/
131+
off(type, listener) {
132+
this.map.off(type, this.layerId, listener);
133+
}
134+
/**
135+
* @function FGBLayer.prototype.once
136+
*/
137+
once(type, listener) {
138+
this.map.once(type, this.layerId, listener);
139+
}
117140
/**
118141
* @function FGBLayer.prototype.moveLayer
119142
* @description 设置图层可见性。

‎test/mapboxgl/overlay/FGBLayerSpec.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ describe('mapboxgl_FGBLayer', () => {
109109

110110
it('render moveLayer onRemove setVisibility', (done) => {
111111
var fgblayer = new FGBLayer({
112+
layerID: 'test',
112113
url: fgbUrl,
113114
extent: [0, 0, 21, 21],
114115
featureLoader: function (feature) {
@@ -122,6 +123,10 @@ describe('mapboxgl_FGBLayer', () => {
122123
fgblayer.moveLayer(fgblayer.layerId, 'simple-tiles');
123124
fgblayer.setVisibility(false);
124125
fgblayer.onRemove();
126+
function clickCallback() {}
127+
fgblayer.on('click', 'test', clickCallback);
128+
fgblayer.once('click', 'test', clickCallback);
129+
fgblayer.off('click', 'test', clickCallback);
125130
expect(fgblayer).not.toBeNull();
126131
});
127132

‎test/maplibregl/overlay/FGBLayerSpec.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ describe('maplibregl_FGBLayer', () => {
123123
it('render moveLayer onRemove setVisibility', (done) => {
124124
var count = 0;
125125
fgblayer = new FGBLayer({
126+
layerID: 'test',
126127
url: fgbUrl,
127128
extent: [0, 0, 21, 21],
128129
featureLoader: function (feature) {
@@ -140,6 +141,10 @@ describe('maplibregl_FGBLayer', () => {
140141
fgblayer.moveLayer(fgblayer.layerId);
141142
fgblayer.setVisibility(false);
142143
map.removeLayer(fgblayer.id);
144+
function clickCallback() {}
145+
fgblayer.on('click', 'test', clickCallback);
146+
fgblayer.once('click', 'test', clickCallback);
147+
fgblayer.off('click', 'test', clickCallback);
143148
fgblayer = null;
144149
expect(count).toBe(1);
145150
done();

0 commit comments

Comments
 (0)