StationLayer.ts

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style';
import MapProperties from './MapProperties';

export default class StationLayer{

    private layer: any;
    private mapProperties: MapProperties;

    constructor(mapProperties: MapProperties){
        this.mapProperties = mapProperties;

        this.layer = new VectorLayer({
            source: new VectorSource({
                url: "http://localhost/germanStation.geojson",
                format: new GeoJSON(),
            }),
            style: (feature)=>{return this.stationStyle(feature)}
        })
    }

    public getLayer(): any{
        return this.layer;
    }

    protected stationStyle(feature){

        console.log(feature.getProperties());
        let fontSize = 15
        let label = '\u272A';
        if(this.mapProperties.getZoomLevel()>=8){
            label += "\n"+feature.get("id");
        }
        
        return new Style({
            text: new Text({
                font: fontSize+'px Helvetica,bold',
                overflow: true,
                fill: new Fill({
                    color: 'rgba(0,0,0,1)'
                }),
                offsetY: 0,
                text: label
            })
        });
    }

}