Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

클러스터를 사용중이고 아이콘 클릭 시 마커 이미지 변경하는 방법을 알고 싶습니다.

#1

클러스트를 사중이고 아이콘이 보이는 레벨 까지 확대를 한다음 아이콘을 클릭했을때
아이콘을 변경하는 방법을 알고 싶습니다.

소스 일부 입니다.

function initTmap() {

    var markers = new Tmap.Layer.Markers( "MarkerLayer" ); // 마커 레이어
    markers.clearMarkers(); // 기존 마커 삭제

	//지도생성
    $("#mapDiv").html("");
    makeRightInfo('');

// $("#mapDiv").remove();
var map = new Tmap.Map({div:‘mapDiv’, width : “100%”, height : “640px”,});

	map.events.clearMouseCache(); //캐시 데이터삭제
	//map.setCenter(new Tmap.LonLat("126.986072", "37.570028").transform("EPSG:4326", "EPSG:3857"), 15);	//map 중심 좌표 설정
	var icon = "";

	var params = {
	};
	
	var k = 0;
			 
	$.ajax({
		url : "/pq/dash/ajax/selectDashBoardMapData.do",
		type : "POST",
		dataType : "json",
		data : params,
		success : function(data) {
	        var markers = [];

// vector_layer.destroyFeatures();//벡터레이어에 도형 제거

			if(data.result != null) {
				
				for(var i=0;i<data.result.length;i++) {
					//위/경도가 있는 데이터만 처리
					if(data.result[i].LONGTITUDE != null && data.result[i].LONGTITUDE != "") {
						if(k == 0) { makeRightInfo(data.result[i]); k++; }
						var point = new Tmap.LonLat(data.result[i].LONGTITUDE , data.result[i].LATITUDE).transform("EPSG:4326", "EPSG:3857");
						
						if(data.result[i].CURRENT_ENERGY > 0)
							icon = "/images/quality/poi1.png";
						else
							icon = "/images/quality/poi2.png";
							
		                var marker = new Tmap.Cluster.Marker(point, {
		                    icon: icon, // 마커 이미지 url
		                    width: 20, // 마커 사이즈
		                    data: data.result[i],
		                    clickHandler: function (e) { // 클릭 이벤트 핸들러
		                    	//모든 팝업 제거
		                    	map.removeAllPopup();
		                    	
		                    	var poleData = e.data;
		                    	
		                    	$("#dtlLink").attr("href", "javascript:fn_goLinkURL(\"/pq/moni/powerQuilityMonitoringCurrentUnbalance.do\",\"MN000384\",\"" + (typeof poleData.POLE_NO !== 'undefined' ? poleData.POLE_NO : "-") + "\")")
		                    	
		                    	var sHtml = '';
								  $("#left_info").html(sHtml);

		                		sHtml += "<div class='info_list'>";
		                		sHtml += "</div>";

								$("#left_info").html(sHtml);
								
								$("#leftCurrUnbal").html((typeof poleData.A_IMBALANCE !== 'undefined' ? poleData.A_IMBALANCE : "-")); // 전류불평형률
								initCurrentUnbalance((typeof poleData.A_IMBALANCE !== 'undefined' ? poleData.A_IMBALANCE : 0));
								
								onClickMarker(this);
								
		                    }
		                });
		                
		                markers.push(marker);
					} //if End
				} //for End
				
				
				var icons = [];
                icons.push(new Tmap.Cluster.Icon("http://topopentile1.tmap.co.kr/tmapicon/map/clusterbg1.png", { width: 20, fontColor: "#333333", fontSize: 15 }));
                icons.push(new Tmap.Cluster.Icon("http://topopentile1.tmap.co.kr/tmapicon/map/clusterbg2.png", { width: 25, fontColor: "#333333", fontSize: 15 }));
                icons.push(new Tmap.Cluster.Icon("http://topopentile1.tmap.co.kr/tmapicon/map/clusterbg3.png", { width: 30, fontColor: "#333333", fontSize: 15 }));

                // 마커클러스터 등록
                // gap : 값이 10이면 10개단위로 icon 변경
                // distance : 클러스터링 할 픽셀 거리
                var markerCluster = new Tmap.Cluster.Layer(map, { markers: markers, icon: icons, gap: 30, distance: 70 });
			}
			
		},
		error : function(e){
			console.log(e)	
		}
	});
} 

0 Likes

#2

안녕하세요.
T map API 운영담당자 입니다.

보내주신 내용에서 marker 생성 후 아래의 예시처럼 진행하시면 marker 클릭시, marker 이미지 변경이 가능합니다.

자세한 내용은 아래 링크들을 참고하시면 도움이 되실 겁니다.

---------------- http://tmapapi.sktelecom.com/main.html#web/docs/WebDocs.Tmap_Events http://tmapapi.sktelecom.com/main.html#web/sample/webSample31 ----------------

감사합니다.

0 Likes

#3

안녕하세요. 보내주신 답변 감사합니다.

또하나 궁금한 점이 있는데.

예제에서는 결국 마커 하나하나를 마커레이어 라는 곳에 따로 담아두고
클릭한 마커레이어를 지우고 같은값에 아이콘을 변경하여 다시 넣은다음 그리는 작업을 하고 있는데

현재 클러스터를 사용중인데
클러스터에 들어가 있는 값을 빼는 방법과 넣는방법
그리고 다시 그리는 방법을 알고 싶습니다.

감사합니다.

0 Likes

#4

안녕하세요.
T map API 운영담당자입니다.

1. 현재 클러스터 사용 시 특정 마커를 선택하여 아이콘을 변경하는 기능은 별도로 제공해 드리고 있지 않습니다.

2. Tmap.Cluster의 clear 함수를 사용하시면 됩니다. clear 함수는 Tmap.Cluster.Layer 객체를 초기화 할 수 있는 기능을 가진 함수입니다.

초기화 관련해서는 첫번째 링크, 클러스터 생성은 두번째 링크를 참고하시면 도움이 되실 겁니다.


< clear >
http://tmapapi.sktelecom.com/main.html#web/docs/WebDocs.Cluster_Clear


< Tmap.Cluster >
http://tmapapi.sktelecom.com/main.html#web/docs/WebDocs.Tmap_Cluster

감사합니다.

0 Likes