odf
ol3-draw-features
npm i ol3-draw-features
odf

ol3-draw-features

Plugin OpenLayers 3 for drawing features

by Stéphane Méaudre

1.0.3 (see all)License:MITTypeScript:Not Found
npm i ol3-draw-features
Readme

OpenLayers Drawing Features Plugin

Build Status

Welcome !! DrawFeatures is an OpenLayers 3 plugin for drawing new features, edit or delete feature from map. See usage for demo. In progress: compatibility with NPM and Openlayers 4

Requirements

  • Openlayers 3

Getting started

  • Clone the repository : git clone git@github.com:HamHamFonFon/ol3-drawFeatures.git ol3-drawFeatures
  • Adding script JS and style CSS on your HTML code

Getting started with NPM

  • npm install --save ol3-draw-features

Demo examples

This exemples is showing how to use the plugin with Openlayers 3

Use with NPM : in progress...

API

new ol.control.ControlDrawButtons(vector_layer, opt_options)

vector_layer

Layer you will adding, edit or delete features

var vector_draw = new ol.layer.Vector({
    source: new ol.source.Vector(),
    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'
            })
        })
    })
});

Options parameters

Option nameTypeDescription
style_buttonsStringUse bootstrap glyphicon or default CSS. Values : `glyphicon
local_storageBoolean(in progress) Possibility to record Layer in Local Storage
drawArraySelect buttons to show
- PointBooleanShow point button
- LineStringBooleanShow line button
- SquareBooleanShow square button
- CircleBooleanShow circle button
- PolygonBooleanShow polygon button

Exemple usage with Openlayers 3

var optionsControlDraw = {
    "style_buttons" : (undefined !== typeof style_buttons)? "glyphicon" : "default",
    "local_storage": true,
    "draw": {
        "Point": true,
        "LineString": true,
        "Square": true,
        "Circle": true,
        "Polygon": true
    }
};
var buttonsDrawControls = new ol.control.ControlDrawFeatures(myVectorLayer, optionsControlDraw);

Exemple usage with NPM modules and Openlayers 4

In progress...

Extends

ol.control.Control

Methods

setSelectedLayer()

Set a layer who may be different tha the one in options array

buttonsDrawControls.setSelectedLayer(otherVectorLayer);

Author(s)

Stéphane MÉAUDRE stephane.meaudre@gmail.com smeaudre@kaliop.com

Licence

MIT Licence - 2016

See also

My POC based on Kuzzle : Kurtography

README.md edited by StackEdit

Downloads/wk

10

GitHub Stars

16

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

3

OPEN PRs

0
VersionTagPublished
1.0.3
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial