「OpenLayers5」を利用してなんちゃってフィルターの作成

「OpenLayers5」を利用してなんちゃってフィルターを作成しました。

「OpenLayers」では、過去のバージョン（ver2）までルールとフィルター機能があり、
フィルターに任意の条件を指定して、スタイルを変更するという機能が提供されていました。

ところが、最新版(ver5.1.3)では、これらの機能がなくなっています。ネットで検索してみると
（ver3）の時点でなくなっていたとの記述を見ました。

とにかく、最新版では、フィルター機能がないので、なんちゃってフィルターを作成してみました。
今回のフィルター機能は、スタイルの設定を全てjsonファイルに記述しています。

各レイヤでは、このjsonファイルを読み込んで、スタイルの設定を行います。

手順は以下の通り

①スタイルを定義したjsonファイルの準備
↓
②Styleオブジェクトを格納するjavascriptを作成
↓
③レイヤから上記javascriptを呼び出す。

１．スタイルを定義したjsonファイルの準備

jsonファイルの定義は、基本スタイルクラスに合わせています。

FileSystemData.cs

[{
    filter: {
        type: "==",
        property: "f20",
        value: "官公庁施設"
    },
    image: {
        opacity: 1,
        src: "../Content/Images/symbol/s_goffice_32x32.png"
    },
    text: {
        font : '12px sans-serif',
        offsetY : 32,
        property: "f17"
    },
    zIndex: 1
},{
    filter: {
        type: "==",
        property: "f20",
        value: "文教厚生施設"
    },
    image: {
        opacity: 1,
        src: '../Content/Images/symbol/s_police_32x32.png'
    },
    text: {
        font : '14px sans-serif',
        offsetY : 32,
        rotation : 15,
        property: 'f17'
    },
    zIndex: 2
}]

[{

filter: {

type: "==",

property: "f20",

value: "官公庁施設"

image: {

opacity: 1,

src: "../Content/Images/symbol/s_goffice_32x32.png"

text: {

font : '12px sans-serif',

offsetY : 32,

property: "f17"

zIndex: 1

},{

filter: {

type: "==",

property: "f20",

value: "文教厚生施設"

image: {

opacity: 1,

src: '../Content/Images/symbol/s_police_32x32.png'

text: {

font : '14px sans-serif',

offsetY : 32,

rotation : 15,

property: 'f17'

zIndex: 2

}]

２．Styleオブジェクトを格納するjavascriptを作成

jsonファイルのデータからStyleオブジェクトを格納するjavascriptを作成します。
なんちゃってフィルターはべた書きしているので、条件を増やしたい場合は
obj.typeらへんのソースに適宜追記してください。

StyleMap.js

var Filter = function(enable) {
    this.enable = enable;
}

var styleMap = {
    fill: function (obj) {
        if (typeof obj == 'string' || Array.isArray(obj)) {
            obj = { color: obj };
        }
        return new ol.style.Fill(obj);
    },
    stroke: function (obj) {
        if (typeof obj == 'string' || Array.isArray(obj)) {
            obj = { color: obj };
        } else if (typeof obj == 'number') {
            obj = { width: obj };
        }
        return new ol.style.Stroke(obj);
    },
    text: function (obj, feature, resolution) {
        if (typeof obj == 'string') {
            obj = { text: obj };
        }
        if (obj.fill) {
            obj.fill = styleMap.fill(obj.fill);
        }
        if (obj.stroke) {
            obj.stroke = styleMap.stroke(obj.stroke);
        }
        if (obj.rotation) {
            obj.rotation = (Math.PI / (180 / obj.rotation));
        }
        if (obj.property) {
            obj.text = feature.get(obj.property);
        }
        return new ol.style.Text(obj);
    },
    circle: function (obj) {
        if (obj.fill) {
            obj.fill = styleMap.fill(obj.fill);
        }
        if (obj.stroke) {
            obj.stroke = styleMap.stroke(obj.stroke);
        }
        return new ol.style.Circle(obj);
    },
    icon: function (obj) {
        return new ol.style.Icon(obj);
    },
    image: function (obj) {
        if (typeof obj.radius !== 'undefined') {
            return styleMap.circle(obj);
        }
        return styleMap.icon(obj);
    },
    filter: function (obj, feature, resolution) {
        var ret = false;
        if (obj.type) {
            obj.type = obj.type;
        }
        if (obj.property) {
            obj.property = obj.property;
        }
        if (obj.value) {
            obj.value = obj.value;
        }

        if (obj.type == "==") {
            if(feature.get(obj.property) === obj.value)
            {
                ret = true;
            }
        }

        return new Boolean(ret);
    }
};

function makeStyle(styleSpec, feature, resolution) {
    if (Array.isArray(styleSpec)) {
        var styles = [];
        styleSpec.forEach(function (oneSpec, index, a) {
            var style = makeStyle(oneSpec, feature, resolution);
            if (style.getZIndex() > 0) {
                styles.push(style);
            }
        });

        return styles;
    }

    var obj = {};
    Object.keys(styleSpec).forEach(function (key) {
        var val = styleSpec[key];
        if (styleMap[key]) {
            obj[key] = new styleMap[key](val, feature, resolution);
        } else {
            obj[key] = val;
        }
    });

    var style = new ol.style.Style(obj);
    if (obj["filter"] == false) {
        style.setZIndex(-1);
    }

    return style;
}

100

101

102

103

104

105

106

107

108

var Filter = function(enable) {

this.enable = enable;

}

var styleMap = {

fill: function (obj) {

if (typeof obj == 'string' || Array.isArray(obj)) {

obj = { color: obj };

}

return new ol.style.Fill(obj);

stroke: function (obj) {

if (typeof obj == 'string' || Array.isArray(obj)) {

obj = { color: obj };

} else if (typeof obj == 'number') {

obj = { width: obj };

}

return new ol.style.Stroke(obj);

text: function (obj, feature, resolution) {

if (typeof obj == 'string') {

obj = { text: obj };

}

if (obj.fill) {

obj.fill = styleMap.fill(obj.fill);

}

if (obj.stroke) {

obj.stroke = styleMap.stroke(obj.stroke);

}

if (obj.rotation) {

obj.rotation = (Math.PI / (180 / obj.rotation));

}

if (obj.property) {

obj.text = feature.get(obj.property);

}

return new ol.style.Text(obj);

circle: function (obj) {

if (obj.fill) {

obj.fill = styleMap.fill(obj.fill);

}

if (obj.stroke) {

obj.stroke = styleMap.stroke(obj.stroke);

}

return new ol.style.Circle(obj);

icon: function (obj) {

return new ol.style.Icon(obj);

image: function (obj) {

if (typeof obj.radius !== 'undefined') {

return styleMap.circle(obj);

}

return styleMap.icon(obj);

filter: function (obj, feature, resolution) {

var ret = false;

if (obj.type) {

obj.type = obj.type;

}

if (obj.property) {

obj.property = obj.property;

}

if (obj.value) {

obj.value = obj.value;

}

if (obj.type == "==") {

if(feature.get(obj.property) === obj.value)

{

ret = true;

}

return new Boolean(ret);

}

};

function makeStyle(styleSpec, feature, resolution) {

if (Array.isArray(styleSpec)) {

var styles = [];

styleSpec.forEach(function (oneSpec, index, a) {

var style = makeStyle(oneSpec, feature, resolution);

if (style.getZIndex() > 0) {

styles.push(style);

}

});

return styles;

}

var obj = {};

Object.keys(styleSpec).forEach(function (key) {

var val = styleSpec[key];

if (styleMap[key]) {

obj[key] = new styleMap[key](val, feature, resolution);

} else {

obj[key] = val;

}

});

var style = new ol.style.Style(obj);

if (obj["filter"] == false) {

style.setZIndex(-1);

}

return style;

}

３．レイヤから上記javascriptを呼び出す

レイヤから上記javascriptを呼び出し、jsonファイルから読み込んだjsonデータを引数に渡します。

WebMap.js

    var ts = new Date().getTime();
    if (node.text == "公共施設") {
        var source = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: 'GeoJson.aspx?table_name=u_public&ts=' + ts
        });

        var json = readJson("GET", '../Content/styles/public.json?ts=1');

        var layer = new ol.layer.Vector({
            name: node.text,
            source: source,
            json: json,
            style: function (feature, resolution) {

                var style = makeStyle(json, feature, resolution);
                return style;
            }
        })

        map.addLayer(layer);
    }