OpenLayers 3 之绘制图形（ol.interaction.Draw）详解

最新推荐文章于 2025-05-24 16:01:32 发布

原创

最新推荐文章于 2025-05-24 16:01:32 发布 · 置顶 · 3.9w 阅读

61 ·

CC 4.0 BY-SA版权

文章标签：

#OpenLayers #WebGIS #地图编辑 #矢量图形 #地图

在地图上绘制各种各样的矢量图形，很多应用场景都需要用到，比如可以实现在客户端勾绘矢量图形并将结果保存到数据库以待后续编辑和可视化等等很多有用的功能。这次我们看看怎么利用 OpenLayers 3 绘制各种各样的图形，并添加到图层显示。在 OpenLayers 3 中负责绘制任务的是 ol.interaction.Draw 类，下面介绍这个类和功能的用法。

ol.interaction.Draw

OpenLayers 中负责勾绘交互的是 interaction 中的 draw interaction，默认支持绘制的图形类型包含 Point（点）、LineString（线）、Polygon（面）和Circle（圆）。

触发的事件包含 drawstart和drawend，分别在勾绘开始时候（单击鼠标）和结束时候触发（双击鼠标），利用 OpenLayers 给一个 Web 地图添加勾绘交互很简单，在地图初始化的时候添加这个交互或者后续追加：

初始化 map 时添加 draw interaction：

var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
    source: source
});
var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.Draw({
            source: source,
            type: 'Polygon',
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })