Openlayers API-Style

Posted 2023-04-06

参考技术A Style 用于矢量图层的渲染，在添加矢量图层的时候，可以给图层中的几何体设置样式。样式类型包括 Circle ， Fill ， Icon ， Image ， RegularShape ， Stroke ， Text ， TextPlacement 等。在创建 Style 的对象的时候，可以在构造函数中设置相关的属性参数来设置具体的样式。在渲染适量图层的时候，如果没有指定 Style ，将使用框架默认的样式信息，如下所示：

用于为几何体设置规则的样式，如果有指定一个半径，将设置为正多边形，如果指定了两个半径，将设置为星星的形状。

CircleStyle 可以为几何体设置圆形样式，比如给单个点可以设置一个圆形的样式。继承于 RegularShape 。

没什么新的方法，都是 RegularShape 继承下来的方法。

用于给图标设置样式。

用于设置边框的颜色，如果没指定时将使用默认的样式。

一个抽象类，主要用于创建子类，子类包括 RegularShape ， CircleStyle ， Icon 。

用于设置文本的样式。

方法主要是对属性值进行 get 和 set 的操作。
个人博客

openlayers绘制多边形

参考技术A import VectorLayer from 'ol/layer/Vector'

import VectorSource from 'ol/source/Vector'

import Draw from 'ol/interaction/Draw';

const drawSource = new VectorSource();

const drawLayer = new VectorLayer(

    source: drawSource

);

map.addLayer(drawLayer);

var draw;

// 开始绘制多边形

drawPolygon (type)

    draw = new Draw(

        source: drawSource,

        type: type

    )

    map.addInteraction(draw);

    draw.on('drawend', ()  =>

        console.log('绘制完成');

    );



// 结束绘制

endDraw ()

    map.removeInteraction(draw);



// Point  LineString  Polygon  Circle

drawPolygon('Polygon');