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, Icon} from 'ol/style';
import MapProperties from './MapProperties';
import colormap from 'colormap';

export interface TemperatureSeries{
    date: number;
    value: number;
}

export default class StationLayer{
    public static readonly layerName: string = "StationLayer";
    private allTemperatureBounds: {min: number, max: number} = {min: 0, max: 0}; //min/max of all station temperature, expect for colormap
    private layer: VectorLayer;
    private mapProperties: MapProperties;
    private year: number = 2000;

    
    private colorMap: string[];

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

        this.colorMap = colormap({colormap:'RdBu', nshades: 20, format: 'hex', alpha: 1});

        this.layer = new VectorLayer({
            className: StationLayer.layerName,
            source: new VectorSource({
                url: "http://localhost:42000/",
                format: new GeoJSON(),
            }),
            style: (feature)=>{return this.stationStyle(feature)}
        });
        
        
        var b = this.layer.on('change', ()=>{
            if(this.allTemperatureBounds.max==0){
                this.layer.getSource().getFeatures().forEach(feature => {
                    feature.getKeys().forEach(element => {
                        
                        if(!isNaN(element) && Number.parseInt(element)>=1800 && feature.get(element)!=null){
                            if(feature.get(element)<this.allTemperatureBounds.min && feature.get(element)>=-10){
                                this.allTemperatureBounds.min = feature.get(element);
                            }else if(feature.get(element)>this.allTemperatureBounds.max){
                                this.allTemperatureBounds.max = feature.get(element) + 2;
                            }
                        }

                    });
                });

                this.mapProperties.setTemperatureBound(this.allTemperatureBounds);
            }
                       
        });

        

    }

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

    protected stationStyle(feature){

        let fontSize = 15
        let label = '';
        if(this.mapProperties.getZoomLevel()>=8){
            label += feature.get("station_id");
        }
        
        let iconColor = "none";

        if(feature.get(this.year)){
            let temperature = feature.get(this.year);
            let temperaturePos = (temperature - this.allTemperatureBounds.min) / (Math.abs(this.allTemperatureBounds.min)+this.allTemperatureBounds.max));
            let colorPos = Math.round(this.colorMap.length * temperaturePos) - 1;
            iconColor = this.colorMap[colorPos];
        }

        return new Style({
            text: new Text({
                font: fontSize+'px Helvetica,bold',
                overflow: true,
                fill: new Fill({
                    color: 'rgba(0,0,0,1)'
                }),
                offsetY: 24,
                text: label
            }),
            image: new Icon({
                crossOrigin: 'anonymous',
                imgSize: [24, 24],
                scale: this.mapProperties.getZoomLevel() * 0.15,
                src: this.mapProperties.getTemperatureIcon(iconColor)
              })
        });
    }

    public getTemperatureSeriesFromFeature(feature: any): TemperatureSeries[]{
        let series: TemperatureSeries[] = new Array<TemperatureSeries>();
        
        feature.getKeys().forEach(element => {
            if(!isNaN(element) && Number.parseInt(element)>=1800 && feature.get(element)!=null){
                series.push({date: Number.parseInt(element), value: feature.get(element)});
            }
        });
        return series;
    }

    public newYear(year: number ):void{
        this.year = year;
        this.layer.changed();
    }

    public getColorMap(){

    }

}