ol.Interaction 몇가지

<ol.Interaction>
 1.Modify : 벡터 피처를 수정. 기존의 점, 선, 면과 같은 기하 도형의 위치나 형태를 변경 (+alt키 누르고 클릭시 꼭지점 없앨 수 있음.)
 2.Translate : 객체를 한 위치에서 다른 위치로 이동
 3.Draw : 새로운 벡터 피처(점, 선, 면 등)를 그리는 데 사용
 4.Snap : 피처를 그리거나(draw) 수정할 때(modify) 다른 피처에 자동으로 '붙도록' 하는 기능을 제공. 정확한 위치에 피처를 배치하고자 할 때 유용

/**
 * 
<ol.Interaction>
 1.Modify : 벡터 피처를 수정. 기존의 점, 선, 면과 같은 기하 도형의 위치나 형태를 변경 (+alt키 누르고 클릭시 꼭지점 없앨 수 있음.)			
 2.Translate : 객체를 한 위치에서 다른 위치로 이동
 3.Draw : 새로운 벡터 피처(점, 선, 면 등)를 그리는 데 사용
 4.Snap : 피처를 그리거나(draw) 수정할 때(modify) 다른 피처에 자동으로 '붙도록' 하는 기능을 제공. 정확한 위치에 피처를 배치하고자 할 때 유용
 */
 
const testSelect = new ol.interaction.Select();
const translate = new ol.interaction.Translate({
	features:testSelect.getFeatures(),
});

map.addInteraction(testSelect);
 
 //저압전선 lvLineLayer.getSource()
 const testSource = new ol.source.Vector();
 const testLayer = new ol.layer.Vector({
	source : testSource,
	style:{
		'fill-color': 'rgba(255, 255, 255, 0.2)',
	    'stroke-color': '#ffcc33',
	    'stroke-width': 2,
	    'circle-radius': 15,
	    'circle-fill-color': '#ffcc33',
	}
})
map.addLayer(testLayer)

const modify = new ol.interaction.Modify({source:testSource});
map.addInteraction(modify);

//기존에 선언된 draw 존재
let testDraw, snap;
let type = 'LineString'//Point, LineString, Polygon, Circle

function addInteractions(){
	testDraw = new ol.interaction.Draw({
		source: testSource,
		type: type,
		active: false
	});
	snap = new ol.interaction.Snap({
		source: testSource
	});
	map.addInteraction(testDraw);
	map.addInteraction(snap);
}
addInteractions();

//2.translate
////기존에 선언된 select 존재

//map.addInteraction(translate);

function changeDrawType(drawType){
	type = drawType//Point, LineString, Polygon, Circle
	map.removeInteraction(testDraw);
	map.removeInteraction(snap);
	addInteractions();
}


//testSelect.getFeatures().on('add', e=>{
//	const selectedF = e.element
//	testSource.addFeatures(selectedF)
//})
//
//testSelect.getFeatures().on('remove', e=>{
//	testSource.clear()
//})

 

 

지금 수정 중이라 코드가 좀 엉망이긴 함.

 

 

https://openlayers.org/en/latest/examples/modify-features.html

Modify Features

 

https://openlayers.org/en/latest/examples/snap.html

Snap Interaction

.

https://openlayers.org/en/latest/examples/translate-features.html

Translate Features