ol-touch-draw
A simplified touch-friendly drawing interaction for OpenLayers 6
Getting started
All-in-one example
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-touch-draw/dist/ol-touch-draw.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-touch-draw/dist/ol-touch-draw.css" type="text/css">
<title>OpenLayers ol-touch-draw example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(new ol.Feature(
new ol.geom.LineString([
[-20, 0],
[20, 0],
])
));
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: vectorSource
}),
],
view: new ol.View({
center: [0, 0],
zoom: 20
})
});
map.addInteraction(new olTouchDraw.default({ source: vectorSource }));
</script>
</body>
</html>Via NPM
npm i ol-touch-drawimport TouchDraw from 'ol-touch-draw';
...
map.addInteraction(new TouchDraw({ source: vectorSource }));API
Table of Contents
- TouchDrawOptions
- DefaultTouchDrawUnitConversions
- TouchDraw
- constructor
- TouchDrawEventType
- TouchDrawEvent#drawstart
- TouchDrawEvent#drawend
- TouchDrawEvent#drawabort
- TouchDrawEvent
TouchDrawOptions
Type: Object
Properties
-
sourceVectorSource? Source used as both a reference and destination. If this options is provided, the referenceSource and destinationSource options should not be. -
referenceSourceVectorSource? Reference source used to calculate proposed drawing handles. -
destinationSourceVectorSource? Destination source for the drawn features.
DefaultTouchDrawUnitConversions
Default units and their meter conversions for touch draw dimensions.
TouchDraw
Extends PointerInteraction
Parameters
-
opt_optionsTouchDrawOptions? TouchDrawOptions.
setMap
Parameters
-
mapol.PluggableMap Map.
changed
Type: PointerInteraction.Options
constructor
Parameters
-
opt_optionsObject? Control options.
TouchDrawEventType
Type: string
TouchDrawEvent#drawstart
Triggered upon feature draw start
TouchDrawEvent#drawend
Triggered upon feature draw end
TouchDrawEvent#drawabort
Triggered upon feature draw abortion
TouchDrawEvent
Extends Event
Parameters
-
typeTouchDrawEventType Type. -
featureFeature The feature drawn.
feature
The feature being drawn.
Type: Feature