OpenLayers의 클릭 이벤트

1967 단어 OpenLayers클릭이벤트
OpenLayers의 클릭 이벤트는 전체ol에 추가됩니다.Map 객체의:
var selectSingleClick = new ol.interaction.Select();
map.addInteraction(selectSingleClick);
selectSingleClick.on('select', function(e) {
	var features = e.target.getFeatures().getArray();
	if(features.length > 0) {
		console.log(features[0].values_);
	}
});

클릭 이벤트는 구체적인 Feature를 클릭하면 터치되며 밑그림을 클릭하면 클릭 이벤트가 터치되지 않습니다.
이벤트를 터치하면 위의 리셋 함수를 실행합니다.콜백 함수에서 필요한 작업을 수행할 수 있습니다.
그러나 이 사건은 전체ol을 겨냥한 것이다.Map 객체그래서 서로 다른 Feature에 대해 위에서 같은 리듬을 촉발한다.그러면 서로 다른 Feature가 필요로 하는 리셋 논리가 다르면 조건 처리를 해야 한다.
예를 들어 한 개의 점, 탄창 제시점의 위치를 클릭하면원을 클릭하면 탄창이 원의 반경을 알려줍니다.
따라서 위의if조건에서 switch를 추가하여 현재 클릭한 것이 점인지 원(예를 들어 id를 통해 판단)인지 판단하고 대응하는 처리를 할 수 있다.
이렇게 처리하는 것이 가장 직관적이지만 번거롭고 작업량이 많다.구별 도형은 id를 사용하면 만 개의 도형이 있고 switch에는 만 개의 조건이 필요합니다.따라서 클릭한 도형의 리셋과 파라미터를 전송할 수 있는지, 어떤 Feature를 클릭하면 이 Feature의 리셋을 촉발할 수 있는지를 고려한다.
리셋 매개 변수 e에 속성values 이 있습니다.이 속성은 Feature를 정의할 때 전달되는 매개변수입니다.
예를 들어, 점 Feature를 정의합니다.
new ol.Feature({
	geometry: new ol.geom.Point(coordinate)
})

클릭 이벤트의values 인쇄속성:
console.log(features[0].values_);

콘솔 출력:
{
	geometry: {...}
}

즉, Feature 생성 시 매개 변수가values속성따라서 Feature 생성 시 데이터 매개 변수를 첨부합니다.
new ol.Feature({
	geometry: new ol.geom.Point(coordinate),
	data: {
		callback: function(params) {
			console.log(params);
		},
		callbackParams: {}
	}
})

클릭 이벤트의values 인쇄속성:
{
	geometry: {...},
	data: {
		callback: function(params) {
			console.log(params);
		},
		callbackParams: {}
	}
}

따라서 Map의 클릭을 처리할 때:
selectSingleClick.on('select', function(e) {
	var features = e.target.getFeatures().getArray();
	if(features.length > 0) {
		var data = features[0].values_.data;
		if(data.callback) {
			data.callback(e, data.callbackParams);
		}
	}
});

그러면 Feature 자체 콜백 함수가 실행됩니다.
인풋[type="checkbox"]과 인풋[type="radio"]을 남용해 JS의 출전 기회를 줄여보자.
JACOCO가 가져온 필드 일치 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage