OL的常见类

Snake8859 12/24/2022

# Feature

一个要素（Feature）包含一个几何对象（Geometry）来表述物体的空间几何信息和属性（Attributes）来描述物体的其他信息。

我们把现实世界中实体，如：道路、行政边界、电线杆等等，抽象为要素（Feature）。

ol中ol.Feature作为一个矢量对象存储矢量数据，包含几何对象（geometry）和其他自定义的属性信息，即 {k:v}，其中有个geometry的key，其他都是自定义的key。

Feature中常用的方法：

setStyle(style):为要素渲染样式,style可以是单个也可以是数组；
getGeometry()：获取要素中的几何对象；
setGeometryName()：当要素在创建时的对象中有多个value值是几何对象时，可以通过该方法指定要渲染的几何对象。默认是key为geometry的几何对象。

var feature = new Feature({
  geometry: new Polygon(polyCoords),
  labelPoint: new Point(labelCoords),
  name: 'My Polygon'
});

// get the polygon geometry
var poly = feature.getGeometry();

// Render the feature as a point using the coordinates from labelPoint
feature.setGeometryName('labelPoint');

// get the point geometry
var point = feature.getGeometry();

1
2
3
4
5
6
7
8
9
10
11
12
13
14

创建Feature实例除了使用构造器以外，针对一些特殊格式（XML、WKT、TopoJSON、KML、GML等）的数据可以使用format解析器创建。

方式一：使用 Feature 构造器创建

var pointFeature = new ol.Feature({
    geometry: new ol.geom.Point([12703928.421,2575539.521]),
    name: '点要素'
});

1
2
3
4

方式二：使用 format 解析器创建，针对一些特殊格式的数据

var wktString = "POLYGON((12724298.889 2576595.308,12721929.341 2568340.109,12716960.934 2564900.445,12724298.889 2576595.308))";
//创建解析wkt格式的解析器对象
var wktformat = new ol.format.WKT();
//读取wkt文本
var wtkFeature = wktformat.readFeature(wktString,{dataProject:'EPSG:3857',featureProject:'EPSG:3857'});

1
2
3
4
5

# Style

在ol中样式的由Style类管理。Style作为矢量要素渲染样式的容器，包含渲染要素边界（border）的stroke轮廓样式、内部填充的fill样式、用于标记的text文本样式等。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

注意：

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

OL的常见功能实现