OpenLayers (다중 마커 띄우기)

다중 마커 띄우기

//map을 보여주는 곳
function viewMap(data){
	
	jQuery("#totViewMap").html("");

	var vectorSource = new ol.source.Vector();
	var markerVectorLayer = new ol.layer.Vector({
		source : vectorSource,
	});	
		
	var map = new ol.Map({
		layers : [ new ol.layer.Tile({source : new ol.source.OSM()}), markerVectorLayer],
		target : document.getElementById('totViewMap'),
		view : new ol.View({
			projection: 'EPSG:4326',
			center : [127, 38],
			zoom : 7.5
		})
	});
	
	for(var i =0; i<data.lists.length; i++){
			
		var datalists = data.lists[i];
		
		var marker = new ol.Feature({
			geometry : new ol.geom.Point([data.lists[i].wgs84_lon,data.lists[i].wgs84_lat]),
			name : datalists,
			population : 4000,
			rainfall : 500
		});
		
		var iconStyle = new ol.style.Style({
			image : new ol.style.Icon(({
				anchor: [0.5, 0.96],
				scale : 0.02,
				src : '/resources/image/marker-1140068_1920.png'
			}))
		});
		
		marker.setStyle(iconStyle);	
		vectorSource.addFeature(marker);
	
	}
	
	map.on('click', function (evt) {
	    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
	    	return feature;
	    });   
	        
	    if (feature) {
	    	
	        var data = feature.get('name');
	        
	        detailData(data);
	    }
	});
}

전체 수위 관측소 마커 표시

해당 시군의 수위관측소만 표시

---

Vworld에서 다중 마커 띄우기

function initMap() {
	var center = new ol.geom.Point([ 127.01499999999999, 37.53 ]).
  		  transform(dataProjection, mapProjection);

	map = new ol.Map({
		target : 'map',
		/*
		 * 기본 layers : [ new ol.layer.Tile({ source : new
		 * ol.source.OSM() }) ],
		 */

		layers : [ // 강제로 WKT형식의 Vworld로 변경하면 지도의 이미지가 눌린다. ㅠ
			new ol.layer.Tile({
			source : new ol.source.XYZ(	{// Vworld Tile 변경
				url : 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
				})
			}) ],
			view : new ol.View({
				projection : mapProjection,
				center : center.getCoordinates(), // coordinates : 좌표 //
				// center의 좌표 반환
				zoom : 9
			}),
		});

	map.getView().setMinZoom(9); // 최소 줌 설정
        
    
    //marker : 다중 마커 생성 
	jQuery.ajax({	
		type : "POST",
		url : "/centerMapIconFeature.do",
		dataType : "JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨
		success : function(data) {
			
			var list = data.LIST;
			if (list != null) {
					
				var vectorSource = new ol.source.Vector();
				var markerVectorLayer = new ol.layer.Vector({
					name : "iconMakerLayer",
					source : vectorSource,
				});	

				for(var i =0; i<list.length; i++){
						
					var datalist = list[i];
					
					//vworld가 3857좌표계를 사용해서 쿼리문에서 3857로 변환 후 가져옴
					var lon = datalist.lon;
					var lat = datalist.lat;
					
					var marker = new ol.Feature({
						geometry : new ol.geom.Point([lon,lat]),
						name : datalist.name,
						population : 4000,
						rainfall : 500
					});
					
					var iconStyle = new ol.style.Style({
						image : new ol.style.Icon(({
							anchor: [0.5, 0.96],
							scale : 0.1,
							src : _contextPath + 'resources/img/marker.png'
						}))
					});
					
					marker.setStyle(iconStyle);	
					vectorSource.addFeature(marker);
				}
				
				map.addLayer(markerVectorLayer);	
			}
		}
	});
} 

mapper.xml

<select id="centerMapIconFeature" parameterType="java.util.HashMap" resultType="java.util.HashMap">
		SELECT 
			SIG_CD, 
			SIG_KOR_NM, 
			ST_X(ST_CENTROID(ST_TRANSFORM(GEOM, 3857))) AS LON, 
			ST_Y(ST_Centroid(ST_TRANSFORM(GEOM, 3857))) AS LAT
		from 
			(
			SELECT 
				SIG_CD, 
				SIG_KOR_NM, 
				ST_GEOMFROMEWKT(GEOM) AS GEOM
			FROM
				GIS.TL_SCCO_SIG
			WHERE 
				SIG_CD LIKE '41%0'
			ORDER BY 
				SIG_KOR_NM
			) AS A
	</select>
    

ST_X : point의 X 좌표를 가져옴.

ST_Y : point의 Y 좌표를 가져옴.

ST_CENTROID : 중심좌표를 가져옴

ST_TRANSFORM(GEOMETRIC, 좌표계))) : geometric의 좌표를 원하는 좌표계로 변환

- ex) ST_X(ST_CENTROID(ST_TRANSFORM(GEOM, 3857))) : 3857좌표계로 변환

 

시에 마커 표시

* 참고자료

다중 marker.txt

0.00MB