Skip to content

Commit e1ceb7c

Browse files
danji90danji90
danji90
and
danji90
authored
fix(DrawControl): add drawInteractionOptions for DrawControl (#239)
* fix(DrawControl): add drawInteractionOptions for DrawControl Co-authored-by: danji90 <[email protected]>
1 parent 02e7247 commit e1ceb7c

File tree

3 files changed

+40
-39
lines changed

3 files changed

+40
-39
lines changed

‎index.html

+30-31
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
type="text/css"
88
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v6.4.3/css/ol.css"
99
/>
10-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/mapbox-gl.css">
10+
<link
11+
rel="stylesheet"
12+
href="https://unpkg.com/[email protected]/dist/mapbox-gl.css"
13+
/>
1114
<meta charset="utf-8" />
1215
</head>
1316
<body>
@@ -32,32 +35,31 @@
3235
<div id="promo-text">Join the team!</div>
3336
</a>
3437
</div>
35-
<div id="copyrightDiv">
36-
© OpenStreetMap contributors © Mapbox
37-
</div>
38+
<div id="copyrightDiv">© OpenStreetMap contributors © Mapbox</div>
3839
</div>
3940
<script type="text/javascript">
40-
4141
var editLayer = new ol.layer.Vector({
4242
source: new ol.source.Vector({
43-
wrapX: false
44-
})
43+
wrapX: false,
44+
}),
4545
});
4646

4747
// Code taken from https://openlayers.org/en/latest/examples/mapbox-layer.html
4848
var mbMap = new mapboxgl.Map({
4949
container: 'map',
50-
center: ol.proj.toLonLat([873708.375917, 6105425.847789]),
50+
center: ol.proj.toLonLat([873708.375917, 6105425.847789]),
5151
attributionControl: false,
5252
interactive: false,
5353
});
54-
54+
5555
// Get the public api key
5656
fetch('https://backend.developer.geops.io/publickey')
5757
.then((response) => response.json())
58-
.then(function(data = {}) {
59-
mbMap.setStyle('https://maps.geops.io/styles/travic_v2/style.json?key=' + data.key)
60-
});
58+
.then(function (data = {}) {
59+
mbMap.setStyle(
60+
'https://maps.geops.io/styles/travic_v2/style.json?key=' + data.key,
61+
);
62+
});
6163

6264
// Code taken from https://openlayers.org/en/latest/examples/mapbox-layer.html
6365
var mbLayer = new ol.layer.Layer({
@@ -87,60 +89,57 @@
8789
});
8890

8991
var map = new ol.Map({
90-
layers: [
91-
mbLayer,
92-
editLayer,
93-
],
94-
target: "map",
92+
layers: [mbLayer, editLayer],
93+
target: 'map',
9594
view: new ol.View({
9695
center: [873708.375917, 6105425.847789],
97-
zoom: 15
96+
zoom: 15,
9897
}),
99-
keyboardEventTarget: document
98+
keyboardEventTarget: document,
10099
});
101100

102101
var editor = new ole.Editor(map);
103102

104103
var cad = new ole.control.CAD({
105-
source: editLayer.getSource()
104+
source: editLayer.getSource(),
106105
});
107106

108107
var draw = new ole.control.Draw({
109-
source: editLayer.getSource()
108+
source: editLayer.getSource(),
110109
});
111110

112111
var drawLine = new ole.control.Draw({
113-
type: "LineString",
114-
source: editLayer.getSource()
112+
type: 'LineString',
113+
source: editLayer.getSource(),
115114
});
116115

117116
var rotate = new ole.control.Rotate({
118-
source: editLayer.getSource()
117+
source: editLayer.getSource(),
119118
});
120119

121120
var drawPoly = new ole.control.Draw({
122-
type: "Polygon",
123-
source: editLayer.getSource()
121+
type: 'Polygon',
122+
source: editLayer.getSource(),
124123
});
125124

126125
var modify = new ole.control.Modify({
127126
source: editLayer.getSource(),
128127
});
129128

130129
var buffer = new ole.control.Buffer({
131-
source: editLayer.getSource()
130+
source: editLayer.getSource(),
132131
});
133132

134133
var union = new ole.control.Union({
135-
source: editLayer.getSource()
134+
source: editLayer.getSource(),
136135
});
137136

138137
var intersection = new ole.control.Intersection({
139-
source: editLayer.getSource()
138+
source: editLayer.getSource(),
140139
});
141140

142141
var difference = new ole.control.Difference({
143-
source: editLayer.getSource()
142+
source: editLayer.getSource(),
144143
});
145144

146145
editor.addControls([
@@ -153,7 +152,7 @@
153152
buffer,
154153
union,
155154
intersection,
156-
difference
155+
difference,
157156
]);
158157

159158
var ls = new ole.service.LocalStorage();

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "ole",
33
"license": "BSD-2-Clause",
44
"description": "OpenLayers Editor",
5-
"version": "2.1.1",
5+
"version": "2.1.2-beta.1",
66
"main": "build/index.js",
77
"peerDependencies": {
88
"jsts": "^2",

‎src/control/draw.js

+9-7
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ class DrawControl extends Control {
1515
* @param {string} [options.type] Geometry type ('Point', 'LineString', 'Polygon',
1616
* 'MultiPoint', 'MultiLineString', 'MultiPolygon' or 'Circle').
1717
* Default is 'Point'.
18+
* @param {Object} [options.drawInteractionOptions] Options for the Draw interaction (ol/interaction/Draw).
1819
* @param {ol.style.Style.StyleLike} [options.style] Style used for the draw interaction.
1920
*/
2021
constructor(options) {
2122
let image = null;
2223

23-
switch (options.type) {
24+
switch (options?.type) {
2425
case 'Polygon':
2526
image = drawPolygonSVG;
2627
break;
@@ -32,22 +33,23 @@ class DrawControl extends Control {
3233
}
3334

3435
super({
35-
title: `Draw ${options.type || 'Point'}`,
36+
title: `Draw ${options?.type || 'Point'}`,
3637
className: 'ole-control-draw',
3738
image,
38-
...options,
39+
...(options || {}),
3940
});
4041

4142
/**
4243
* @type {ol.interaction.Draw}
4344
* @private
4445
*/
4546
this.drawInteraction = new Draw({
46-
type: options.type || 'Point',
47-
features: options.features,
48-
source: options.source,
49-
style: options.style,
47+
type: options?.type || 'Point',
48+
features: options?.features,
49+
source: options?.source,
50+
style: options?.style,
5051
stopClick: true,
52+
...(options?.drawInteractionOptions || {}),
5153
});
5254

5355
this.drawInteraction.on('drawstart', (evt) => {

0 commit comments

Comments
 (0)