[OpenLayers] Feature Drag and Drop

이전 글 [OpenLayers] Custom Icon Feature 추가 에서 추가된 Icon Feature를 Drag and Drop 하는 예제입니다.

Script

ol.interaction.Modify 을 이용해서 Drag and Drop 기능을 구현합니다.

modifystart, modifyend 이벤트를 등록하여 Icon을 선택하거나 이동 시 커서가 변경되도록 하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
const styles = {
icon: new ol.style.Style({
image: new ol.style.Icon({
opacity: 1,
src: 'images/icon.png',
}),
}),
};

// 지도 정보
const mapInfo = {
map: null,
extent: null,
projection: null,
setProjection: function (w, h) {
this.extent = [0, 0, w, h];
this.projection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: this.extent,
});
},
init: function (imageName) {
const view = new ol.View({
projection: this.projection,
center: ol.extent.getCenter(this.extent),
zoom: 2,
maxZoom: 8,
});

const imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'images/' + imageName,
imageSize: [this.extent[2], this.extent[3]],
projection: this.projection,
imageExtent: this.extent,
}),
});

this.map = new ol.Map({
target: 'map',
layers: [imageLayer],
view: view,
});

this.zoomFit();
},
zoomFit: function () {
this.map.getView().fit(this.extent, { duration: 200 });
},
addVectorLayer: function (x, y) {
const iconFeature = new ol.Feature({
geometry: new ol.geom.Point([x, y]),
type: 'icon',
name: 'icon',
});

const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [iconFeature],
wrapX: false,
}),
style: function (feature) {
return styles[feature.get('type')];
},
});

this.map.addLayer(vectorLayer);

///////////////////////////////////////////////////////
// 추가된 부분
///////////////////////////////////////////////////////
var dragInteraction = new ol.interaction.Modify({
features: new ol.Collection([iconFeature]),
});

const target = document.getElementById('map');

dragInteraction.on('modifystart', function (event) {
target.style.cursor = 'grabbing';
});

dragInteraction.on('modifyend', function (event) {
target.style.cursor = 'pointer';
event.features.forEach(function (feature) {
const name = feature.get('name');
console.log(name);
// Drop 완료 시 프로세스 진행
});
}, iconFeature);

const overlaySource = dragInteraction.getOverlay().getSource();
overlaySource.on(['addfeature', 'removefeature'], function (evt) {
target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
});

this.addInteraction(dragInteraction);
///////////////////////////////////////////////////////
},
};

// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function () {
const width = 500;
const height = 500;
const imageName = 'image.png';

mapInfo.setProjection(width, height);
mapInfo.init(imageName);

mapInfo.addVectorLayer(100, 100);
});

Drop 이 되었을 때 feature.get() 함수를 이용해서 설정한 값을 가져와 다음 프로세스를 처리합니다.

참고

Share