openlayers根据级别进行动态符号化

功能说明

根据不同级别做不同的符号化，比如到指定级别才显示文字标注

效果图

实例详解

下面是一个矢量图层，到了指定级别显示了文字标注。判断resolution动态设置渲染style

var spotLayer = new ol.layer.Vector({
    source: new ol.source.Vector({}),
    style: function (f, r) {
        var pro = f.getProperties();
        var status = pro.status;
        var imgSrc = '../img/' + (pro.index).toString() + '-1.png';
        switch (status) {
            case 1:
                imgSrc = '../img/' + (pro.index).toString() + '-2.png';
                break;
        }
        if (r <= 0.5971642834779395) {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    src: imgSrc,
                    anchor: [0.5, 1]
                }),
                text: new ol.style.Text({
                    font: '12px 微软雅黑',
                    text: pro.name,
                    fill: new ol.style.Fill({
                        color: '#2631FB'
                    }),
                    backgroundStroke: new ol.style.Stroke({
                        color: '#FFFFFF',
                        width: 1
                    }),
                    backgroundFill: new ol.style.Fill({
                        color: 'rgba(255,255,255,0.5'
                    }),
                    padding: [1, 1, 1, 1],
                    offsetY: -42
                })
            });
        } else {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    src: imgSrc,
                    anchor: [0.5, 1]
                })
            });
        }
    },
    name: 'spotLayer'
});