Mapbox弹出窗口显示在左上角

时间:2020-05-15 17:25:13

标签: javascript mapbox mapbox-gl-js

我正在使用填充-挤出层,其中有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();
            }

        })

0 个答案:

没有答案