A simplified touch-friendly drawing interaction for OpenLayers 6
<!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>npm i ol-touch-drawimport TouchDraw from 'ol-touch-draw';
...
map.addInteraction(new TouchDraw({ source: vectorSource }));- TouchDrawOptions
- DefaultTouchDrawUnitConversions
- TouchDraw
- constructor
- TouchDrawEventType
- TouchDrawEvent#drawstart
- TouchDrawEvent#drawend
- TouchDrawEvent#drawabort
- TouchDrawEvent
Type: Object
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.
Default units and their meter conversions for touch draw dimensions.
Extends PointerInteraction
opt_optionsTouchDrawOptions? TouchDrawOptions.
mapol.PluggableMap Map.
Type: PointerInteraction.Options
opt_optionsObject? Control options.
Type: string
Triggered upon feature draw start
Triggered upon feature draw end
Triggered upon feature draw abortion
Extends Event
typeTouchDrawEventType Type.featureFeature The feature drawn.
The feature being drawn.
Type: Feature