OpenLayers预选中Feature后无法正常取消选中的问题
问题描述
我基于OpenLayers 9.1开发应用,未引入其他UI库。需求是通过查询字符串指定Feature,在地图加载完成时将其设为唯一选中项。我的实现方式是监听地图的loadend事件,在事件回调中给Select交互派发select事件,传入包含目标Feature的选中集合和空的取消选中集合,以此完成预选中。
目前出现的异常情况:
- 预选中操作能成功选中目标Feature,但后续点击地图无Feature的空白区域时,选中状态无法清除,起始Feature仍保持选中,且Select交互的
select事件处理函数完全不触发。 - 点击任意其他Feature后,再点击空白区域就能正常清除选中状态。
- 如果加载应用时没有查询字符串(即无起始Feature),所有选择行为均符合预期。
相关代码片段
/* Map Setup */ const map = new Map({ target: 'map', layers: [ baseLayer, casLayer, clientsLayer, pathsLayer ], view: new View({ projection: MAP_PROJECTION, center: CAS_POINT.getCoordinates(), zoom: 9 }) }); /* End Map Setup */ /* Selection Interaction Setup */ const selected = {}; let preSelected; const actSelect = new Select({ layers: [clientsLayer, casLayer] }); actSelect.on('select', function (evt) { if (preSelected && !evt.selected.includes(preSelected)) { evt.deselected.push(preSelected); preSelected = null; } evt.selected.forEach((feature) => { feature.set('isSelected', true); feature.setStyle(featureStyleFn); selected['C' + feature.get('companyId')] = feature; }); evt.deselected.forEach((feature) => { feature.set('isSelected', false); feature.setStyle(featureStyleFn); delete selected['C' + feature.get('companyId')]; }); displayInfobox(selected); displayPath(selected); }); map.addInteraction(actSelect); /* End Selection Interaction Setup */ /* Select Starting Feature */ if (params && params.get('fid')) { const startFeatureID = params.get('fid'); map.once('loadend', (event) => { console.log(map.getInteractions()); const startFeature = clientsLayer.getSource().forEachFeature((feature) => { if ('C' + feature.get('companyId') === startFeatureID) return feature; }); if (startFeature) { actSelect.dispatchEvent({ type: 'select', selected: new Collection([startFeature]), deselected: new Collection() }); const centerCoords = olExtent.getCenter(startFeature.getGeometry().getExtent()); map.getView().setCenter(centerCoords); map.getView().setZoom(17); preSelected = startFeature; } }); } /* End Select Starting Feature */
内容的提问来源于stack exchange,提问作者TheNicestGuy
相关产品推荐
相关产品推荐

