사용한 API : https://www.vworld.kr/dev/v4dv_baseguide_s001.do
공간정보 오픈플랫폼 오픈API
배경지도API 1.0 레퍼런스 배경지도API 1.0 레퍼런스입니다. 소개 오픈플랫폼이 제공하는 배경지도 및 영상지도, 하이브리드 지도를 제공합니다. 요청URL을 인증받은 키값과 함께 사용자 클라이언
www.vworld.kr
참고로 vworld의 API를 사용하기 위해선 회원가입 및 인증키를 발급받아야한다.
발급할때 URL은 경로를 다 적어야한다. 만약 아래처럼 localhost:3000을 통해 웹 서버를 실행할 경우
URL은 localhost:3000 까지 적어주면 된다.
통신할 수 있는 웹 서버를 만들어놓는다. 참고로 http 프로토콜을 사용해야 하므로 단순하게 html 파일을 열고 file:// 로 시작하는 경로를 URL에 작성하면 지도는 열리지 않는다.
var http = require('http');
var fs = require('fs');
var url = require('url');
http.createServer(function(request,response){
response.writeHead(200);
fs.readFile('map.html', (err, data) => { //map.html은 open api 데이터가 들어가 있다.
if (err) {
return console.error(err);
}
response.end(data, 'utf-8');
});
}).listen(3000,function(){
console.log('서버 실행 중');
});c
긁어온 API를 html 파일로 만들고 인증키 발급을 통해 발급받은 인증키를 "사용자 키 값" 부분에 붙여넣기 한다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2DMap</title>
<script src="https://map.vworld.kr/js/map/OpenLayers-2.13/OpenLayers-2.13.js" type="text/javascript"></script>
<script type="text/javascript" src="https://map.vworld.kr/js/apis.do?type=Base&apiKey=사용자 키 값"></script>
<script type="text/javascript">
var map;
var mapBounds = new OpenLayers.Bounds(123 , 32, 134 , 43);
var mapMinZoom = 7;
var mapMaxZoom = 19;
// avoid pink tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init(){
var options = {
controls: [],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
controls : [],
numZoomLevels:21,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
};
map = new OpenLayers.Map('map', options);
var osm = new OpenLayers.Layer.OSM();
var options = {serviceVersion : "",
layername: "",
isBaseLayer: false,
opacity : 1,
type: 'png',
transitionEffect: 'resize',
tileSize: new OpenLayers.Size(256,256),
min_level : 7,
max_level : 18,
buffer:0};
//======================================
//1. 배경지도 추가하기
vBase = new vworld.Layers.Base('VBASE');
if (vBase != null){map.addLayer(vBase);}
//2. 영상지도 추가하기
vSAT = new vworld.Layers.Satellite('VSAT');
if (vSAT != null) {map.addLayer(vSAT);};
//3. 하이브리드지도 추가하기
vHybrid = new vworld.Layers.Hybrid('VHYBRID');
if (vHybrid != null) {map.addLayer(vHybrid);}
//4. Gray지도 추가하기
vGray = new vworld.Layers.Gray('VGRAY');
if (vGray != null){map.addLayer(vGray);}
//5. Midnight지도 추가하기
vMidnight = new vworld.Layers.Midnight('VMIDNIGHT');
if (vMidnight != null){map.addLayer(vMidnight);}
//===========================================
map.addLayers([osm]);
var switcherControl = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcherControl);
switcherControl.maximizeControl();
map.zoomToExtent( mapBounds.transform(map.displayProjection, map.projection ) );
map.zoomTo(11);
map.addControl(new OpenLayers.Control.PanZoomBar());
//map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.Navigation());
//map.addControl(new OpenLayers.Control.MouseDefaults()); //2.12 No Support
map.addControl(new OpenLayers.Control.Attribution({separator:" "}))
}
function deleteLayerByName(name){
for (var i=0, len=map.layers.length; i<len; i++) {
var layer = map.layers[i];
if (layer.name == name) {
map.removeLayer(layer);
//return layer;
break;
}
}
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:600px;"></div>
<div >
<button type="button" onclick="javascript:deleteLayerByName('VHYBRID');" name="rpg_1" >레이어삭제하기</button>
</div>
</body>
</html>'Programming > JavaScript' 카테고리의 다른 글
| 클로저(Closeure) (0) | 2023.11.08 |
|---|---|
| Node.js 웹서버 구축 (0) | 2021.08.08 |
| JSON이란? (0) | 2021.08.04 |
댓글