meface/55olstyle.md at 9956b0172658ff275d090cdb6ed5dfbd4d99b7a1

8.3 KiB

Raw Blame History

title

date

author

1. 默认样式

当要素Feature没有设置style样式时，会使用一个默认的样式，对几何对象进行渲染。

import {Fill, Stroke, Circle, Style} from 'ol/style';

var fill = new Fill({
    color: 'rgba(255,255,255,0.4)'
});
var stroke = new Stroke({
    color: '#3399CC',
    width: 1.25
});
var styles = [
    new Style({
        image: new Circle({
            fill: fill,
            stroke: stroke,
            radius: 5
        }),
        fill: fill,
        stroke: stroke
    })
];

跟样式一起使用的还有ol.color，用于设置样式的颜色，可以通过数组[r,g,b,a]的形式创建color实例。

2. 构造函数

在创建style实例的时候，可以在构造参数opt_options中添加stroke、fill、text、image样式等或是配置渲染函数renderer。但当其renderer属性被指定时，其fill、image、stroke属性将无效。

opt_options

name	type	Description
fill	ol/style/Fill~Fill	填充样式。
image	ol/style/Image~ImageStyle	图像样式
renderer	ol/style/Style~RenderFunction	渲染函数
stroke	ol/style/Stroke~Stroke	轮廓样式。
text	ol/style/Text~Text	文本样式
geometry	ol/geom/Geometry~Geometry\| ol/style/Style~GeometryFunction	要渲染的几何对象
zIndex	number	Z方向上的索引

注意：

对于点、线要素，如果style中只设置了fill填充样式是显示不出来的
对于点要素，如果style中只设置了stroke轮廓样式是显现不出来的。
对于点对象，使用text文本样式，如果placement设置为'point'则text文本正常显示，但为‘line’则会报错
image图片样式，作为抽象类接受子类实例（ol/style/Icon，ol/style/Circle，ol/style/RegularShape)
Icon图标样式和Circle圆形样式只作用于点要素上，线、面要素是没有效果的。

3. 示例

3.1 Style

所有Feature要素的样式都得是Style的实例，不能是单独的轮廓、填充、图像等。

/** 
 *  1、ol/style/Style ：作为矢量要素渲染器的容器。
 *  所有Feature要素的样式都得是Style的实例，不能是单独的轮廓、填充、图像等。
 *      构造器 options 对象属性：
 *          geometry：要渲染的几何对象；
 *          fill：填充样式；
 *          image：图片样式；
 *          stroke：形状的轮廓样式
 *          text：文本样式
 *          renderer：渲染器
 */

3.2 Stroke

/**
 * 2.'ol/style/Stroke ：轮廓样式
 *  构造器 options 对象属性：
 *          color：轮廓颜色；
 *          width：轮廓厚度；
 *          lineCap：轮廓端点的样式，butt, round, or square.
 *          lineJoin：节点连接的样式，butt, round, or square.
 *          lineDash：用于创建虚线
 *          lineDashOffset：
 *          miterLimit：
 *  注意，对于点要素，如果style中只设置了stroke轮廓样式是显现不出来的。
 */
var strokeStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color:[0,225,0,0.8],
        width:1.25,
        lineDash:[5]
    })
})

3.3 Fill

/**
 * 3、'ol/style/Fill'：填充样式
 *      构造器 options 对象属性：
 *          color：轮廓颜色；
 *  注意：对于点、线要素，如果style中只设置了fill填充样式是显示不出来的
 */
var fillStyle = new ol.style.Style({
    fill: new ol.style.Fill({
        color:[255,0,0,0.6]
    })
})

3.4 Text

/**
 * 4、'ol/style/Text'：文本样式
 * 构造器 options 对象属性：
 *   font：指定文本字体样式，specify a custom font weight, size, and family.如：'bold 48px serif'；
 *   maxAngle：最大旋转角
 *   offsetX，offsetY：水平方向和垂直方向的偏移量
 *   overflow：当几何对象是面或文本位置为'line'时，是否允许文本内容溢出
 *   placement：文本位置，'point'|'line'
 *   text：文本内容
 *   textAlign：文本对齐方式
 *   rotateWithView：是否随View旋转
 *   fill：填充样式，字体颜色
 *   stroke：轮廓样式
 *   backgroundFill：文本背景填充样式，当placement为point有效
 *   padding：文本内边距[top, right, bottom, left].
 *
 * 注意：对于点对象，使用text文本样式，如果placement设置为'point'则text文本正常显示，但为‘line’则会报错
 */
var textStyle = new ol.style.Style({
    text: new ol.style.Text({
        text:"文本注记",
        font:'bold 16px serif',
        padding:[5,15,15,15],
        placement:"line",
        stroke:new ol.style.Stroke({
            color:"#939393",
            width:1
        }),
        overflow:true,
        fill:new ol.style.Fill({color:"#FF6B75"}),
        backgroundFill:new ol.style.Fill({color:"#FF6B75"})
    }),
});

默认样式

placement:"point"

placement:"line"

3.5 Image

/**
 * 5、'ol/style/Image'：图片样式，作为抽象类接受子类实例（多态），
 *   其子类有'ol/style/Icon'，'ol/style/Circle'，'ol/style/RegularShape'
 *      构造器 options 对象常用属性：
 *          opacity：不透明度；
 *          rotateWithView：是否随View旋转
 *          rotation：旋转角度，Math.PI/4
 *          scale
 *          displacement
 *
 * 6、'ol/style/Icon' ：图标样式
 *      构造器 options 对象常用属性：
 *          img ：HTMLImageElement对象
 *          imgSize ：图片大小[width, height],只有当img设置而src没有设置时才需要，并且在Internet
 *					 Explorer 11中用于SVG图像。提供的imgSize需要匹配图像的实际大小。
 *          src ：图片的uri地址
 *          size: Icon的大小（单位：px），可以配合offset设置图标的显示区域
 *  
 *
 * 7、ol/style/Circle ：圆形样式
 *      构造器 options 对象常用属性：
 *          radius：半径；
 *          fill：填充样式；
 *          stroke：形状的轮廓样式
 *          displacement：默认[0,0]
 *
 *	注意：Icon图标样式和Circle圆形样式只作用于点要素上，线、面要素是没有效果的
 */
var IconStyle = new ol.style.Style({
    image:new ol.style.Icon({
        // anchor:[0,0],
        // anchorOrigin:'top-right',
        // anchorXUnits:'fraction',
        // anchorYUnits:'pixels',
        // offsetOrigin:"top-right",
        src:"./img/26.jpg",
        opacity:0.8,
        scale:0.25,
        // size:[32,32],
        // offset:[30,20]
    })
})
var CircleStyle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 10,
        stroke: new ol.style.Stroke({
            color:[0,255,0,0.5],
            width:2
        })
    })
})

8.3 KiB Raw Blame History Unescape Escape