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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy