美文网首页
Openlayers API-Draw

Openlayers API-Draw

作者: 写前端的大叔 | 来源:发表于2020-02-15 21:21 被阅读0次

    绘制功能在Openlayers中比较常用,平时我们需要手动绘制一些线多边形等图形,Openlayers为我们提供了相关的API,主要API都在ol/interaction/Draw里面,绘制的API使用起来也比较简单,首先创建一个Draw对象,然后再使用MapaddInteraction方法添加该对象,就可以进行绘制了,如下面的伪代码所示:

    var draw = new ol.interaction.Draw({
                source:sourse,
                type:type,
                geometryFunction:geometryFunction
          })
    map.addInteraction(draw);
    

    模式

    Draw的绘制模式主要有以下四种:

    • Point:点
    • LineString:线
    • Polygon:面
    • Circle:圆

    属性

    创建Draw对象时,可以在构造函数中传递一些参数,具体的属性如下所示:

    • type:绘制的几何类型,包括PointLineStringPolygonCircle四种类型。
    • features:表示绘制的图形将添加在指定的要素上。
    • source:绘制时指定的数据来源。表示绘制的图形将添加在指定的图层上。
    • stopClick:绘制时停止为地图添加的click, singleclick, doubleclick 事件。
    • maxPoints:最多可以绘制多少个点,比如设置成5,在绘制多边形时,如果超过了5个点就不能绘制了。
    • minPoints:在完成多边形环或线时,必须指定绘制的点数。多边形的默认值为3,线段的默认值为2
    • finishCondition:指定一个函数,在绘制完成后调用,返回一个true将完成绘制。
    • style:指定绘制图形的样式。
    • geometryFunction:用于指定geometry,包括两参数,分别是coordinatesgeometry,返回geometry。通过该方法可以重新构建图形,比如将圆形构造成五角星。
    • geometryName:几何对象的名称。
    • condition:在绘制时监听点击事件,返回一个布尔值表示是否处理该点击事件。
    • freehand:手绘线、面等图形。
    • freehandCondition:指定一个函数,绘制的时候当鼠标移动时将调用该函数。

    方法

    • createBox:当typeCircle时将geometryFunction设置成该方法,可以绘制矩形。
    • createRegularPolygon:当typeCircle时将geometryFunction设置成该方法,可以正多边形。
    • appendCoordinates:当在绘制完线或者多边形后,还可以通过该方法往图形中添加坐标。
    • extend:扩展图片,可以往图形上再添加一个图形,仅限于线条。
    • finishDrawing:结束绘制。
    • removeLastPoint:删除最后一个坐标点。

    事件

    • drawend:绘制结束时触发。如draw.on('drawend',function() {})
    • drawstart:绘制开始时触发。如draw.on('drawstart',function() {})
      个人博客

    相关文章

      网友评论

          本文标题:Openlayers API-Draw

          本文链接:https://www.haomeiwen.com/subject/odoyfhtx.html