我正在使用填充-挤出层,其中有3D建筑物,并添加了一个Mapbox弹出窗口,当我将鼠标悬停在建筑物层上时会显示该弹出窗口。有时,弹出窗口会在左上角显示一会儿,然后显示光标所在的位置,有人知道为什么会发生这种情况吗?这是我的“ mousemove”事件监听器:
map.on('mousemove', this.buildingLayerId, async event => {
let asset = this.viewer.queryRenderedFeatures(event.point);
let buildingId: Number = asset[0].id;
if (this.initialAssetIdHovered !== buildingId) {
this.initialAssetIdHovered = buildingId;
let assetData: any = await request(REQUEST_TYPES.GET, '/app/buildings?id=' + buildingId);
if (assetData && Object.keys(assetData).length > 0) {
this.viewer.getCanvas().style.cursor = 'pointer';
this.buildingHoverbuildingName = await assetData.info['Building Name'];
this.buildingHoverdirectAvailableArea = await assetData.info['Direct Available Area'];
this.buildingHoverDescription = await
`<b style='display: block; margin: 0 auto; margin-bottom: 0; color: #708895;'>${this.buildingHoverbuildingName}</b>
<p style='margin-top: 0; margin-bottom: 0.2rem; color: #708895'>Direct Available Area: <b style='color: #28466E;'>${this.buildingHoverdirectAvailableArea}</b></p>`;
}
else {
hoverPopup.remove();
this.viewer.getCanvas().style.cursor = 'grab';
this.buildingHoverbuildingName = null;
this.buildingHoverdirectAvailableArea = null;
this.buildingHoverDescription = null;
}
}
if (this.buildingHoverbuildingName !== null && this.buildingHoverdirectAvailableArea !== null) {
this.viewer.getCanvas().style.cursor = 'pointer';
hoverPopup
.setHTML(this.buildingHoverDescription)
.addTo(this.viewer)
.trackPointer();
}
})