openlayers4 自定义矢量图层的样式

by giser · 2019-04-03

先看一个简单加载GeoJSON格式的矢量数据的方法。例如，现有一份全国各城市的点数据，要求将其以点形式展示在地图上。

文章目录

点样式

var mystyle = new ol.style.Style({
    	image: new ol.style.Circle({
    		radius: 10,
 		    fill: new ol.style.Fill({
            	color: '#ffff00'
        	})
    	})
    });
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
    	url: 'src/data/city.geojson',
    	format: new ol.format.GeoJSON()
    }),
    style: mystyle
});
var view = new ol.View({
    center: [114,34],
    zoom: 5,
    projection: 'EPSG:4326'
});

var controls = new ol.control.defaults();

var map = new ol.Map({
    layers:[vectorLayer],
    view: view,
    controls: controls,
    target: 'map'
})

上面代码中，第1句定义了一个ol.style.Style对象，然后在第2句定义了一个ol.layer.Vector（矢量图层）对象，并将第1句定义的style样式应用到图层上。style样式的应用非常灵活，为了加深记忆及方便使用，下面先简单记录下其用法。

点样式

形状-ol.style.Circle（圆点）

var style = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({
            color: '#ffff00',
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 1
        })
    })
});

图标-ol.style.Icon

var style = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 1],		
        src: '/icon/site1.png',//图标路径
        rotation: 0			//旋转角度
    })
});

标注样式 – ol.style.Text

var style = new ol.style.Text({
    font: '12px serif',	//字体及字体大小
    text: '西安',		//标注文字
    fill: new ol.style.Fill({
        color: '#000'
    })

线样式 – ol.style.Stroke

 var style = new ol.style.Style({
     stroke: new ol.style.Stroke({
         color: '#000000',
         width: 2
     })
 })

面样式 – ol.style.Fill

var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#fff',
        width: 2
    }),
    fill: new ol.style.Fill({
        color:[38,155,0,0.3]	//使用了一个数组，[r,g,b,a]
    })
})

将要素的属性值应用到样式

ol.layer.Vector（矢量图层）对象的style属性，可以接受一个ol.style.Style对象或者sdfdf，也可以接受一个ol.styleFunction函数对象。ol.styleFunction可以将矢量图层的feature作为参数传入函数内部，从而可以获得feature上的属性值并应用到样式中。

function styleFunc(feature){
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: '#ffff00',
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        }),
        text: new ol.style.Text({
            font: '12px serif',
            text: feature.get('AQI').toString(),
            fill: new ol.style.Fill({
                color: '#000'
            })
        })
    });
    return style;
}

完整测试代码如下

js代码：

var baseLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector()
});
var view = new ol.View({
    center: [114,34],
    zoom: 5,
    projection: 'EPSG:4326'
});

var controls = new ol.control.defaults();

var map = new ol.Map({
    layers:[baseLayer,vectorLayer],
    view: view,
    controls: controls,
    target: 'map'
})

/**
 * 点样式
 */
function showPoint(){
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: '#ffff00',
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        })
    });
    $.getJSON('/data/p_province_air_test.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

/**
 * 标注样式
 */
function showPointLabel(){
    function styleFunc(feature){
        var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: '#ffff00',
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 1
                })
            }),
            text: new ol.style.Text({
                font: '12px serif',
                text: feature.get('AQI').toString(),
                fill: new ol.style.Fill({
                    color: '#000'
                })
            })
        });
        return style;
    }

    $.getJSON('/data/p_province_air_test.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(styleFunc);
    })
}

/**
 * 图标样式
 */
function showIcon(){
    //图标列表
    var icons = [];
    for(var i = 1; i < 13;i++){
        icons.push('/icon/level' + i.toString() + '.png');
    }
    function styleFunc(feature){
        var power = feature.get('windpower');
        if(power === 0 || power >12){
            return null;
        }
        var style = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: icons[power - 1],//不同风力图标
                rotation: feature.get('winddirection')
            })
        });
        return style;
    }

    $.getJSON('/data/p_province_air_test.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(styleFunc);
    })
}

/**
 * 边线样式
 */
function showStroke(){
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#000000',
            width: 2
        })
    })

    $.getJSON('/data/r_china.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

/**
 * 填充样式及边线
 */
function showFill(){
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
        }),
        fill: new ol.style.Fill({
            color:[38,155,0,0.3]
        })
    })

    $.getJSON('/data/r_china.geojson',function(data){
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/js/source/ol4/v4.6.5-dist/ol.css" />
    <title>Document</title>  
    <style>
        html,body,#map{
            width: 100%;
            height: 100%;
            border: 0pc;
            background-color: black
        }
    </style>
    <script src="/js/source/jquery/jquery-3.3.1.min.js"></script>
    <script src="/js/source/ol4/v4.6.5-dist/ol.js"></script>
</head>
<body>
    <div>
        <button id = "point" onclick="showPoint()">点</button>
        <button id = "label" onclick="showPointLabel()">标注</button>
        <button id = "label" onclick="showIcon()">图标</button>
        <button id = "line" onclick="showStroke()">线</button>
        <button id = "polygon" onclick="showFill()">面</button>
    </div>
    <div id="map"></div>
    <script src="/js/stydy/ts-style.js"></script>
</body>
</html>

转载自：https://blog.csdn.net/u012413551/article/details/87303530