OpenLayers Nota 2: punto, línea, superficie función personalizada procesador de vectores

Al crear un nuevo ol.layer.Vector capa de vector, puede hacer que el mapa de A definido vectores de características patrón mediante el uso de ol.style;

ol.style general

El valor predeterminado puede estar dispuesto en los elementos ol.style incluyen:
el Relleno: rellenando el módulo correspondiente ol.style.Fill;
la geometría: atributos geográficos, módulo correspondiente para ol.style.Style, el uso de elementos de localización proporcionado GeometryFunction, atributos geométricos;
imagen: patrón de imagen correspondiente módulo ol.style.Image, y que comprende además ol.style.Circle ol.style.Icon dos submódulos;
el renderizador: renderer de encargo, el módulo correspondiente es ol.style .style, el uso RenderFunction de elementos de un pixel por pixel de representación;
la carrera: la frontera del estilo, correspondiente módulo ol.style.Stroke;
el texto: estilos de texto, el módulo correspondiente es ol.style.Text;
la zIndex: jerarquía de capas para números enteros para establecer una jerarquía;
Además de los elementos anteriores, el módulo de ol.style comprende además un sub-clase ol.style.RegularShape, que se utiliza para definir la forma poligonal.
Descripción de los detalles visibles Openlayers API oficial .

Convencional punto representación, línea, característica de la superficie vector

Las entidades de puntos

La representación de entidad de puntos de dos maneras ol.style.Circle y ol.style.Icon.
las características de punto ol.style.Circle es hacer como un anillo, el radio del anillo se puede proporcionar, estilo de relleno, estilo de borde y el cambio (desplazamiento).
Por ejemplo:

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
    })
}),

ol.style.Icon punto de característica es un icono de estilo, el icono puede proporcionarse ancla fuente, el tamaño, la transparencia, ángulo de rotación y similares;
por ejemplo:

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

características de la línea

Rendering la entidad de línea primaria utilizada ol.style.Stroke, para establecer el color de la anchura de línea, estilo del casquillo, estilo de línea, etc. conexiones.
Por ejemplo:

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

Las entidades poligonales

Haciendo que las principales características de la línea y el uso ol.style.Fill ol.style.Stroke, para establecer el color de relleno y elementos de superficie estilo de borde. (Nota: La transparencia se proporciona generalmente como un vector propiedades de capa, el estilo en el mismo nivel.)
Por ejemplo:

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
        })
    }),
});

Distinguir entre diferentes individuos de las mismas características en una capa de la prestación

Para lograr los mismos elementos en una capa de diferentes individuos distinguidos rendering requieren para styleFunction (), el estilo de formato: función (función, resolución) {}.
Puede ser distinguido de acuerdo con las diferentes propiedades de los diferentes individuos y diferentes individuos de representación;
puede proporcionarse como un elemento de acuerdo con diferente resolución del mapa de representación, patrones del elemento de cambio dinámico en diferente resolución del mapa.
Por ejemplo:

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];
    }
});