728x90
반응형
* map.jsp (일부분만 추출)
<body>
<c:import url="./header.jsp" />
<nav id="otherArea">
<div class="outerButtonArea" style="right: 55px;">
<span class="selectMapBtn on" map_type="BASE" title="일반지도"> <img
alt="일반지도" src="/resources/images/menu/base_map_new.png">
</span> <span class="selectMapBtn" map_type="HYBRID" title="위성지도"> <img
alt="위성지도" src="/resources/images/menu/hybrid_map_new.png">
</span> <span class="selectMapBtn" map_type="SHADE" title="지형도"> <img
alt="지형도" src="/resources/images/menu/shade_map_new.png">
</span>
</div>
</nav>
<div id="map"></div>
<body>* map.js
var wktFormat = new ol.format.WKT(); // WKT 텍스트 소스에서 단일 지오메트리를 읽습니다.
var map = null;
var view = null;
var mapProjection = "EPSG:3857";
var dataProjection = "EPSG:4326";
var sggLayerName = "sggLayer";
var emdLayerName = "emdLayer";
var array = null;
var sggLayer = null;
var emdLayer = null;
var baseLayer = null;
var satelliteLayer = null;
var hybridLayer = null;
var grayLayer = null;
var SIG_FEATURES = {};
var EMD_FEATURES = {};
// 모든 include 되는 프레임들과 object들, 이미지까지 로드된 이후에 실행됩니다.
$(window).load(function() {
//첫 map 셋팅
initMap();
//layer 변경
jQuery(".selectMapBtn").click(function(){
var boolean = jQuery(this).is(".on"); //.on 클래스로 버튼이 선택된 것을 구분
//.selectMapBtn Class에 있는 .on 클래스를 전부 다 삭제후 선택된 것만 addClass를 사용하여
//.on Class를 추가한다.
if(!boolean){
var type = jQuery(this).attr("map_type");
jQuery(".selectMapBtn").removeClass("on");
jQuery(this).addClass("on");
if(type === "BASE"){
grayLayer.setVisible(false);
satelliteLayer.setVisible(false);
hybridLayer.setVisible(false);
baseLayer.setVisible(true);
}else if(type === "HYBRID"){ // HYBRID일 경우에는 satelliteLayer, hybridLayer 표출
baseLayer.setVisible(false);
grayLayer.setVisible(false);
satelliteLayer.setVisible(true);
hybridLayer.setVisible(true);
}else{
baseLayer.setVisible(false);
hybridLayer.setVisible(false);
satelliteLayer.setVisible(false);
grayLayer.setVisible(true);
}
}
});
});
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({
name : "baseLayer",
source : new ol.source.XYZ({
url : 'http://api.vworld.kr/req/wmts/1.0.0/{apikey}/Base/{z}/{y}/{x}.png'
})
}),
new ol.layer.Tile({
name : "satelliteLayer",
source : new ol.source.XYZ({// Vworld Tile 변경 : Satellite : 항공사진 레이어 타일
url: 'http://api.vworld.kr/req/wmts/1.0.0/{apikey}/Satellite/{z}/{y}/{x}.jpeg'
})
}),
new ol.layer.Tile({
name : "hybridLayer",
source : new ol.source.XYZ({// Vworld Tile 변경 : HYBRID : 문자 타일 레이어
url: 'http://api.vworld.kr/req/wmts/1.0.0/{apikey}/Hybrid/{z}/{y}/{x}.png'
})
}),
new ol.layer.Tile({
name : "grayLayer",
source : new ol.source.XYZ({// Vworld Tile 변경 : 회색지도 (SHADE)
url: 'http://api.vworld.kr/req/wmts/1.0.0/{apikey}/gray/{z}/{y}/{x}.png'
})
})],
view : new ol.View({
projection : mapProjection,
center : center.getCoordinates(), // coordinates : 좌표 //center의 좌표 반환
zoom : 9
}),
});
map.getView().setMinZoom(9); // 최소 줌 설정
var sggFeatures = [];
// WKT 지오메트리 형태를 openlayers에서 인식할 수 있는 지오메트리 형태로 변경 시켜준다.
for (var key in _SIG_WKT) {
var geom = wktFormat.readGeometry(_SIG_WKT[key].GEOM);
geom.transform(dataProjection, mapProjection);
var feature = new ol.Feature({
geometry : geom,
sgg_code : key,
name : _SIG_WKT[key].NAME,
perc : 0
});
SIG_FEATURES[key] = feature;
// feature.setStyle(style);
// feature에 style을 줄 경우 하드코딩으로 박혀 나중에 style을 change 하지 못한다.
// 그래서 layer에서 style 주는 경우가 많다.
sggFeatures.push(feature);
}
var sggVectorSource = new ol.source.Vector({
features : sggFeatures
});
var sggVectorLayer = new ol.layer.Vector({
name : sggLayerName,
source : sggVectorSource,
style : function(feature) { //layer에 style 적용
return sggEmdStyleFuncion(feature);
}
});
map.addLayer(sggVectorLayer);
// 읍면동 feature 생성
var emdFeatures = [];
for (var key in _EMD_WKT) {
var geom = wktFormat.readGeometry(_EMD_WKT[key].GEOM);
geom.transform(dataProjection, mapProjection);
var feature = new ol.Feature({
geometry : geom,
emd_code : key,
name : _EMD_WKT[key].NAME,
perc : 0
})
EMD_FEATURES[key] = feature;
emdFeatures.push(feature);
}
var emdVectorSource = new ol.source.Vector({
features : emdFeatures
})
var emdStyle = new ol.style.Style({
stroke : new ol.style.Stroke({
color : '#0000000', // '#3399CC'
width : 1.5
})
})
var emdVectorLayer = new ol.layer.Vector({
name : emdLayerName,
source : emdVectorSource,
style : function(feature){
return sggEmdStyleFuncion(feature);
}
})
map.addLayer(emdVectorLayer);
//-------------------------------------------
//미리 전역변수에 layer를 담아 놓는다.
view = map.getView();
array = map.getLayers().getArray();
baseLayer = array[0];
satelliteLayer = array[1];
hybridLayer = array[2];
grayLayer = array[3];
sggLayer = array[4];
emdLayer = array[5];
//setVisible로 false(노출되지 않게 설정) 해 놓지 않으면 모든 layer가 다 노출된다.
//표출하고 싶은 레이어를 제외한 나머지는 미노출 시킴
satelliteLayer.setVisible(false);
hybridLayer.setVisible(false);
grayLayer.setVisible(false);
}
function sggEmdStyleFuncion(feature) {
var style = new ol.style.Style({
stroke : new ol.style.Stroke({
color : '#000000',
width : 2
}),
text : new ol.style.Text({
stroke : new ol.style.Stroke({})
}),
fill : new ol.style.Fill({
color : "rgba(255, 255, 255, 0)"
})
})
return style;
}
* 실행화면
1. 일반지도 : BASE
2. 위성지도 : HYBRID, SATELLITE
3. 지형지도 : GRAY (지형지도는 geoserver를 이용하여 할 예정, 현재는 GRAYLayer로 대체)
728x90
반응형
'IT 개발 > OpenLayers' 카테고리의 다른 글
| OpenLayers (GeoServer SQL View - parameteric SQL View) (0) | 2020.02.12 |
|---|---|
| OpenLayers (GeoServer Layer 지도 등록) (0) | 2020.02.04 |
| OpenLayers (Vworld API 활용 - 지도 변환하기) - 1. API 발급 받기 (0) | 2020.01.29 |
| OpenLayers (Mask Layer) (0) | 2020.01.17 |
| OpenLayers 기본 (0) | 2020.01.16 |
