OpenLayers笔记2：点、线、面矢量要素的自定义渲染_openlayers style geometry

新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式；

ol.style概述

在ol.style中默认可以配置的要素包括：
Fill：填充的样式，对应的模块为ol.style.Fill；
Geometry：地理属性，对应模块为ol.style.Style，使用GeometryFunction设置要素的地理位置、几何属性等；
Image：图像的样式，对应的模块为ol.style.Image，还包括ol.style.Circle和ol.style.Icon两个子模块；
Renderer：自定义渲染器，对应模块为ol.style.Style，使用RenderFunction对要素进行逐像素渲染；
Stroke：边界的样式，对应的模块为ol.style.Stroke；
Text：文本的样式，对应模块为ol.style.Text；
zIndex：层叠的层次，以整型的数字来设置层次；
除上述要素之外，ol.style还包括一个子类模块ol.style.RegularShape，用于定义多边形形状。
详情说明可见 Openlayers官方API。

点、线、面矢量要素的常规渲染方式

点要素

点要素的渲染有两种方式ol.style.Circle和ol.style.Icon。
ol.style.Circle是将点要素作为一个圆环来进行渲染，可设置圆环的半径、填充样式、边界样式和移位（displacement）。
例如：

style:new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,//半径
        fill: new ol.style.Fill({//填充样式
        color: '#ff6688',
    }),
    stroke: new ol.style.Stroke({//边界样式
        color: '#555555',
        width: 1
    })
}),
1
2
3
4
5
6
7
8
9
10
11

ol.style.Icon是将图标作为点要素的样式，可设置图标的来源、锚点、大小、透明度、旋转角等等；
例如：

style:new ol.style.Style({
    image: new ol.style.Icon({
        src: 'where.png',//图标路径
        anchor: [0.5, 1],//锚点
        scale: 0.2,//大小
        rotation: 0	//旋转角度
    })
}),
1
2
3
4
5
6
7
8

线要素

线要素的渲染主要用到ol.style.Stroke，来设置线条的颜色、宽度、笔帽样式、线条连接处样式等等。
例如：

style:new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#ff6688',//颜色
        width: 3,//宽度
        lineCap: 'round',//线帽样式
//butt：末端添加平直边缘；round：末端添加圆形线帽；square：末端添加方形线帽；
        lineJoin: 'round'//线条连接处样式
//bevel：创建斜角；round：创建圆角；square：创建尖角；
     })
}),
1
2
3
4
5
6
7
8
9
10

面要素

线要素的渲染主要使用ol.style.Fill 和ol.style.Stroke，来设置面要素的填充颜色和边界样式。（注：透明度一般是作为矢量图层属性来设置，与style处于同一级。）
例如：

var layer = new ol.layer.Vector({
    source: vectorSource,
    opacity: 0.5,//透明度，作为图层属性进行设置
    style: new ol.style.Style({             
        fill: new ol.style.Fill({//填充样式
            color: "#ff6688",
        }),
        stroke: new ol.style.Stroke({//边界样式
            color: "555555",
            width: 3
        })
    }),
});
1
2
3
4
5
6
7
8
9
10
11
12
13

对同一要素图层中不同个体的区别渲染

要实现对同一要素图层中的不同个体进行区别渲染，需用到StyleFunction()，格式为style: function (feature, resolution) {}。
可根据不同个体的不同属性来区分个体并进行不同的渲染；
也可根据地图分辨率为要素设置不同的渲染，实现要素样式在不同地图分辨率下的动态变化。
例如：

var layer = new ol.layer.Vector({
    opacity: 0.8,//透明度
    style: function (feature, resolution) {
    var id = feature.get("subFeature");//获取各个个体编号
    var thisText = feature.get("name");//获取各个个体的名字
    var style = null;
    var colors = new Array("#ffff66", "#ff66ff", "#66ffff", "66ff00", "#0066ff");
    if(id<=4){
        style = new ol.style.Style({
            fill: new ol.style.Fill({
                color: colors[id],
            }),
            stroke: new ol.style.Stroke({
                color: "#555555",
                width: 1
            }),
            text: new ol.style.Text({
                text: thisText,//文本
                ont: '20px SimHei',	//字体大小和字体            
                fill: new ol.style.Fill({//文字填充颜色
                    color: '#000000'
                })
            })
        });
    }
    return [style];
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28