|
구현한 기능 1. 브이월드 지도API 로 지도 생성(버전 : 2D 지도 API 2.0) 2. 지도 위에서 마우스 클릭시 해당 좌표 반환 및 마커 클릭 이벤트 처리 3. 좌표를 주소로 변환(지오코딩) 4. 상권 지도(layer) 및 다음 로드뷰 페이지 연결(브이월드 좌표계에서 다음 지도 좌표계로 변환) 5. 브이월드 검색 API 활용(버전 : 검색 API 2.0) 6. 주소 검색 타입(지번,도로명)에 따라 마커의 팝업창에 다르게 표시 |
[html]
|
1
|
<script type="text/javascript" src="http://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=[인증키]"></script>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div class='title'>
<p>상권 지도</p>
</div>
<article class="at_1">
<div class="search_div">
<span>
<select class='search_type'>
<option value="road">도로명</option>
<option value="parcel" selected>지번</option>
</select>
</span>
<span><input type="text" id="search" placeholder="찾고자하는 것을 입력하세요."></span>
<span><button class="search_btn">검색</button>
</div>
<div class="map_wrap">
<div id='vMap'></div>
<div class="custom_typecontrol radius_border">
<span id="btnRoadmap" class="selected_btn active">지도</span>
<span id="btnSkyview" class="selected_btn">로드뷰</span>
<span id="btnCommercial" class="selected_btn">상권</span>
</div>
</div>
</article>
|
[자바스크립트 - 사용할 변수 및 맵 생성]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var vmap; // 기본 지도를 받을 변수
var markerLayer; // 마커 레이어를 받을 변수
var x,y; // 클릭한 위경도를 받을 변수
var checkRoadView = false;
var key = ""; // 브이월드 인증키
var titleName; // 마커에 표시될 검색방법 타이틀
vw.ol3.CameraPosition.center = [14134490.676941859, 4516889.004840847]; // 기본 지도 시작 중심 좌표 지정(서울역)
vw.ol3.CameraPosition.zoom = 15; // 시작 Zoom 레벨
vw.ol3.MapOptions = { // 기본지도의 옵션
basemapType: vw.ol3.BasemapType.GRAPHIC
, controlDensity: vw.ol3.DensityType.EMPTY
, interactionDensity: vw.ol3.DensityType.BASIC
, controlsAutoArrange: true
, homePosition: vw.ol3.CameraPosition
, initPosition: vw.ol3.CameraPosition
};
vmap = new vw.ol3.Map("vMap", vw.ol3.MapOptions); // 기본 지도 생성
|
[자바스크립트 - 지도 클릭 이벤트]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// 지도 클릭 이벤트
vmap.on('click', function(event) {
var feature = vmap.forEachFeatureAtPixel(event.pixel, function (feature,layer) {// 클릭한 좌표를 첫번째 인자로 주어 해당 위치에 있는 feature를 구하고 두번쨰 인자(함수)로 넘겨준다.
if(layer != null && layer.className == 'vw.ol3.layer.Marker'){ // 해당 좌표에 마커 레이어가 있다면
return feature;
}else{
return false;
}
});
if (!feature) {
var coord = vmap.getCoordinateFromPixel(event.pixel); // 마우스 커서 아래의 좌표값 구하기
x = coord[0];
y = coord[1];
if(checkRoadView){ // 로드뷰 실행
var tansform = ol.proj.transform([x,y], 'EPSG:3857', 'EPSG:4326') // 브이월드 좌표계에서 다음 지도 좌표계로 변환 EPSG:3857=>EPSG:4326
location.href="https://map.kakao.com/link/roadview/"+tansform[1]+","+tansform[0]; // 로드뷰 불러오기
}else{
addMarker(x, y); // addMarker함수에 위경도 변수 넘기고 실행
}
}
});
|
[자바스크립트 - 마커 생성 및 좌표를 주소로 변환]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
// 머커 생성 및 좌표를 지번 주소로 변환
function addMarker(lon ,lat) {
vmap.removeLayer(markerLayer); // 기존의 마커가 있다면 제거
markerLayer = new vw.ol3.layer.Marker(vmap); // 마커 객체 상성
var typeName = $('.search_type option:selected').val(); // 선택한 검색 종류 값
if(typeName == "road"){titleName = "도로명 주소";}
else if(typeName == "parcel"){titleName = "지번 주소";}
// (비동기)좌표를 주소로 변환하는 api, 도로명주소 검색의 경우 건물의 geometry 기반으로 도로명 주소값을 가지고 오기 때문에
// 건물 외의 것을 클릭하면 값이 없을 수 있습니다.
// 브이월드 지도서비스에서 행정 주제도중 도로명주소건물 주제도에 해당 좌표값이 들어와야만 도로명 주소값을 리턴 받을 수 있습니다.
$.ajax({
type: 'GET',
url: 'http://api.vworld.kr/req/address?',
dataType : "jsonp", // CORS 문제로 인해 브이월드에선 jsonp를 사용한다고 함
data: {
service: "address",
version: "2.0",
request: "getaddress",
format: "json", // 결과 포멧으로 xml 또는 json 타입으로 받아볼 수 있다.
key: key, // 브이월드 인증키
type: typeName, // 검색 타입으로 '도로명:road' 또는 '지번:parcel' 또는 '둘다:both' 중 선택
crs: "epsg:3857", // 브이월드 기본 좌표계
point: lon+","+lat, // 좌표
zipcode: true, // 우편번호 여부
simple: false // 간략 결과 여부
},
success: function(json_data){
if(json_data.response.status == "NOT_FOUND"){
text = "검색 결과가 없습니다.";
}else{
text = json_data.response.result[0].text; // 받아온 json데이터에서 주소를 추출
}
vw.ol3.markerOption = { // 마커 옵션 설정
x : lon,
y : lat,
epsg : "EPSG:3857",
title : titleName,
contents : text,
iconUrl : 'http://map.vworld.kr/images/ol3/marker_blue.png'
};
markerLayer.addMarker(vw.ol3.markerOption); // 마커 옵션을 마커에 적용
vmap.addLayer(markerLayer); // 마커를 vmap에 등록
},
error: function(xtr,status,error){
alert(xtr +" : "+status+" : "+error);
}
});
};
|
[자바스크립트 - 검색]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
// 지도 검색
$('.search_btn').on('click',function(){
vmap.removeLayer(markerLayer); // 기존의 마커 제거
markerLayer = new vw.ol3.layer.Marker(vmap); // 마커 객체 상성
var contents_data;
var typeName = $('.search_type option:selected').val(); // 선택한 검색 종류 값
$.ajax({
type: "get",
url: "http://api.vworld.kr/req/search",
data : {
page: 1,
type: 'address', // 주소 검색방법
category: typeName, // 도로명 : road, 지번 : parcel
request: 'search',
apiKey: key, // 브이월드 지도 인증기
domain: '본인의 map을 보여주는 도메인 ex) http://111.111.111.111/map.html',
crs : 'EPSG:3857', // 브이월드 좌표계
query : $('#search').val() // 사용자가 입력한 text
},
dataType: 'jsonp',
async: false,
success: function(data) {
if(data.response.status =="NOT_FOUND"){
alert("검색결과가 없습니다.");
}else{
for(var o in data.response.result.items){
if(o==0){
move(data.response.result.items[o].point.x*1,data.response.result.items[o].point.y*1);
if(typeName == "road"){
titleName = "도로명 주소";
contents_data = data.response.result.items[o].address.road;
}
else if(typeName == "parcel"){
titleName = "지번 주소";
contents_data = data.response.result.items[o].address.parcel;
}
}
vw.ol3.markerOption = { // 마커 옵션 설정
x : data.response.result.items[o].point.x,
y : data.response.result.items[o].point.y,
epsg : "EPSG:3857",
title : titleName,
contents : contents_data,
iconUrl : 'http://map.vworld.kr/images/ol3/marker_blue.png'
};
markerLayer.addMarker(vw.ol3.markerOption); // 마커 옵션을 마커에 적용
}
}
},
complete:function(){
vmap.addLayer(markerLayer) // 마커를 vmap에 등록
},
error: function(xhr, status, error) {
console.log(xhr, status, error);
}
});
var move = function(x,y){
vmap.getView().setCenter([ x, y ]); // 지도 이동
vmap.getView().setZoom(15); // 줌레벨 설정
}
});
|
[자바스크립트 - WMS(상권 지도)]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
// 상권 Layer
function Commercial(){
var wms_title = '상권지역';
var wms_val = 'lt_c_dgmainbiz'; // 상권지도에 해당하는 코드
vmap.removeLayer(vmap.getLayerByName("wms_theme")) // 기존결과 삭제
var layer_tile = new ol.layer.Tile({
title: wms_title,
id: wms_val,
name: "wms_theme", // vmap 올린 레이어를 삭제하거나 수정,변경할때 접근할 name 속성
projection: "EPSG:3857", // 좌표계 설정 (기본값)
extent: vmap.getView().getProjection().getExtent(), //[-20037508.34, -20037508.34, 20037508.34, 20037508.34]
maxZoom: 18,
minZoom: 10,
tilePixelRatio: 1,
tileSize: [512, 512],
source: new ol.source.TileWMS({
url: "http://api.vworld.kr/req/wms?",
params: {
LAYERS: wms_val,
STYLES: wms_val,
CRS: "EPSG:3857",
apikey: key,
DOMAIN:"http://192.168.0.2:80",
title: wms_title,
FORMAT: "image/png",
domain: "http://192.168.0.2",
WIDTH:512,
HEIGHT:512,
EXCEPTIONS: "text/xml",
//bgcolor: '0xFF00FF' // 안먹힘...분홍색
}
})
});
layer_tile.setZIndex(5);
vmap.addLayer(layer_tile);
};
|
 |
 |
 |
 |
* 도로명주소 검색의 경우 건물의 geometry 기반으로 도로명 주소값을 가지고 오기 때문에 마우스로 건물 외의 것을 클릭하면 값이 없을 수 있습니다.
  클릭한 곳의 좌표를 다음 지도 좌표계로 변환한뒤 다음 로드뷰api로 보낸다. |
 |
 |
 |
'웹 프로그래밍 > HTML,CSS,JS' 카테고리의 다른 글
| 크롬의 alert창 따라하기 (feat. dialog) (0) | 2020.04.02 |
|---|---|
| openlayers 5 기본기(지도 생성, 마커/팝업 생성) (1) | 2019.07.23 |
| 동적으로 생성된 파일첨부 데이터 ajax로 보내기 + php (0) | 2019.07.08 |
| 동적으로 생성된 요소에 이벤트 바인딩 (0) | 2019.06.26 |
| +버튼 클릭시 파일첨부 폼 동적 생성하기 (0) | 2019.06.26 |