OpenLayersを利用して、属性値に応じて、ラベルのフォントサイズや傾きを設定

はじめに

住宅地図などのラベルは、フォントや傾きが固定値ではなく、属性値に応じて変更する必要がある。そこで、OpenLayersを使って、属性値に応じて、ラベルのスタイルを設定する際のメモ。

style.json

ラベル表示用のstyle.jsonを準備する

{
    "layer_name": "g_zmap_24203_06",
    "rule": [
        {
            "name": "0",
            "title": "一般名称",
            "style": {
                "text": {
                    "font": "normal normal 10px Segoe UI",
                    "property": "text",
                    "fill": {
                        "color": [51,51,51,1]
                    },
                    "textAlign": "center",
                    "textBaseline": "middle",
                    "placement": "point",
                    "units": "pixel"
                },
                "zIndex": 2
            },
            "min_scale": null,
            "max_scale": "5000"
        }
    ]
}

{

"layer_name": "g_zmap_24203_06",

"rule": [

{

"name": "0",

"title": "一般名称",

"style": {

"text": {

"font": "normal normal 10px Segoe UI",

"property": "text",

"fill": {

"color": [51,51,51,1]

"textAlign": "center",

"textBaseline": "middle",

"placement": "point",

"units": "pixel"

"zIndex": 2

"min_scale": null,

"max_scale": "5000"

}

]

}

style.js

属性値に応じてstyleを変更する。フォントのサイズは、そのまま設定するのではなく縮尺に応じて変化させる。
※ただし、Openlayersで縦書きの設定方法が不明だったため、傾きを90度追加した。

    var styleJson = LoadJson("style.json");
    var obj = styleJson.rule.style;
    var openlayer = new ol.layer.Vector({
        name: layerjson.LayerId,
        source: vectorSource,
        visible: layerjson.Visible,
        opacity: layerjson.Opacity,
        style: function (feature, resolution) {
            var style = null;
            if (feature.get('fontsize')) {
                var obj2 = { font: obj.font };
                ol.obj.assign(obj2, obj);
                var font = ol.css.getFontParameters(obj.font);
                var fontsize = Math.round(feature.get('fontsize') / resolution);
                obj2.font = font.style + ' ' + font.variant + ' ' + font.weight + ' ' + fontsize + 'px ' + font.family;
                var rotation = (Math.PI / (180 / feature.get('angle')));
                var direction = feature.get('direction');
                if (direction == 32) {
                    rotation += (Math.PI / (180 / 90));
                }
                obj2.rotation = rotation;
                style = new ol.style.Text(obj2);
            } else {
                obj.offsetY = 12;
                style = new ol.style.Text(obj);
            }
            return style;
        }
    });