使用OpenLayer 4在地图上添加文本图层

Question

当用户在地图中点击文字图层时，我想在单点上添加文字图层。这是我的代码

            var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');           
            var icon = new ol.Feature({
                geometry: new ol.geom.Point(GeoCoordinates(lonlat)),
            });
            var textStyle = new ol.style.Style({
                text: new ol.style.Text({
                    font: 'normal 24px FontAwesome',
                    placement: 'line',
                    text: 'ddsadsad',
                    textBaseline: 'Bottom',
                    fill: new ol.style.Fill({
                        color: '#003366',
                    },            
                })
            });

            icon.setStyle(textStyle);

            debugger
            var vectorSource = new ol.source.Vector({
                features: icon
            });

            var vectorLayer = new ol.layer.Vector({
                source: vectorSource
            });
            this.addLayer(vectorLayer);

        })

问题是openlayer api在点击地图上的任何一点时都没有显示任何错误或文字图层。但是，它适用于图像，线条或圆圈或图标等其他图层，它们将显示在除文本图层外的地图。