rlayers/examples/style.ts

React Components for OpenLayers

import {FeatureLike} from 'ol/Feature';
import {Style, Text, Fill, Stroke, Circle} from 'ol/style';

export function styleTown(size: number, feature: FeatureLike): Style {
    let width: number;
    let font: string;
    switch (size) {
        case 0:
            width = 6;
            font = '2em';
            break;
        case 1:
            width = 5;
            font = '1.2em';
            break;
        case 2:
            width = 3;
            font = '0.8em';
            break;
        default:
            width = 1;
            font = '0.5em';
            break;
    }
    font += ' helvetica, sans-serif';
    const color1 = '#00007f';
    const color2 = '#ffffff';

    const style = new Style({
        image: new Circle({
            fill: new Fill({
                color: color1
            }),
            radius: width,
            stroke: new Stroke({
                color: color1,
                width: width
            })
        }),
        text: new Text({
            font: font,
            text: feature.get('n'),
            fill: new Fill({
                color: color2
            }),
            stroke: new Stroke({
                color: color1,
                width: 2
            })
        })
    });
    return style;
}

export const styleBorder = new Style({
    stroke: new Stroke({
        color: 'blue',
        width: 2
    })
});

// Styles inspired from https://openlayers.org/en/latest/examples/osm-vector-tiles.html
const roadStyleCache: Record<string, Style> = {};
const roadColor: Record<string, string> = {
    motorway: '#776',
    trunk: '#ccb',
    highway: '#f39'
};
export const buildingStyle = new Style({
    fill: new Fill({
        color: '#666'
    }),
    stroke: new Stroke({
        color: '#444',
        width: 1
    })
});
export const waterStyle = new Style({
    fill: new Fill({
        color: '#9db9e8'
    })
});
export const boundaryStyle = new Style({
    stroke: new Stroke({
        color: '#8B008B',
        width: 2
    })
});
export const roadStyle = function (feature: FeatureLike) {
    const kind = feature.get('class');
    const railway = feature.get('railway');
    const sort_key = feature.get('sort_key');
    const styleKey = kind + '/' + railway + '/' + sort_key;
    let style = roadStyleCache[styleKey];
    if (!style) {
        let color, width;
        if (railway) {
            color = '#7de';
            width = 1;
        } else {
            color = roadColor[kind];
            width = kind == 'highway' ? 1.5 : 1;
        }
        style = new Style({
            stroke: new Stroke({
                color: color,
                width: width
            }),
            zIndex: sort_key
        });
        roadStyleCache[styleKey] = style;
    }
    return style;
};
const placeBase = new Style({
    image: new Circle({
        radius: 5,
        fill: new Fill({
            color: '#000080'
        })
    })
});
const textStroke = new Stroke({
    color: 'white',
    width: 2
});
export const placeStyle = function (feature: FeatureLike): Style {
    if (feature.get('class') == 'country') return null as unknown as Style;
    if (feature.get('name')) {
        const style = placeBase.clone();
        style.setText(
            new Text({
                text: feature.get('name'),
                offsetY: -5,
                font: 'bold 16px sans-serif',
                stroke: textStroke
            })
        );
        return style;
    }
    return null as unknown as Style;
};