2D지도 API 2.0 레퍼런스 - Map 코드샘플 ( 위치 바로가기 링크 설정됨 )
| 1 | Map 지도 생성 | vw.ol3.Map 클래스를 이용해서 지도를 생성 |
| 2 | 지도 타입 변경 | 지도타입 - vw.ol3.BasemapType.GRAPHIC : 2D배경지도 - vw.ol3.BasemapType.GRAPHIC_WHITE : 2D백지도 - vw.ol3.BasemapType.GRAPHIC_NIGHT: 2D야간지도 - vw.ol3.BasemapType.PHOTO : 2D영상지도 - vw.ol3.BasemapType.PHOTO_HYBRID : 2D영상하이브리드 |
| 3 | 지도 이동 | 지정된 좌표로 지도를 이동 및 줌레벨을 설정 |
| 4 | MapController 지도생성 | vw.MapController 클래스를 이용해서 지도를 생성 |
2D지도 API 2.0 레퍼런스 - Map ( 위치 바로가기 링크 설정됨 )
| 1 | vw.ol3.BasemapType | vw.ol3.Map에서 사용하는 배경지도의 종류를 선언하는 열거형 |
| 2 | vw.ol3.Map | 가장 기본적인 클래스로 오픈 API 진입점 역할을 하는 핵심 클래스 (레이어, 컨트롤, 인터랙션 등을 포함하고 관리) |
| 3 | vw.ol3.MapOptions | vw.ol3.Map 클래스에서 사용 하는 옵션을 정의 |
| 4 | vw.ol3.DensityType | Map 구성 요소인 control, interaction을 초기에 어느 정도 구성할지 설정 |
| 5 | vw.ol3.CameraPosition | 카메라의 위치를 나타내는 객체 |
| 6 | vw.MapController | 2D, 3D 지도를 함께 제어할 수 있는 통합 환경을 제공 구체적인 맵 제어는 2D, 3D Map 프로퍼티를 통해 수행 |
| 7 | vw.MapControllerOption | vw.MapController 클래스 초기화에 사용되는 옵션을 정의 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>api2.0_maptest</title>
<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=@{apikey}"></script>
</head>
<body>
<div id="vmap" style="width:100%;height:370px;left:0px;top:0px"></div>
<script type="text/javascript">
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);
</script>
</body>
</html>
관련 레퍼런스
| vw.ol3.BasemapType | vw.ol3.MapOptions |
!! 아래 클릭 !! 실행결과 웹페이지 보기
glass_api2.0_maptest
bongbongsam.github.io
△△ 2D지도 API 2.0 레퍼런스 - Map 코드샘플로 이동 △△
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>glass_api2.0_maptest</title>
<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=@{apikey}"></script>
</head>
<body>
<div id="vmap" style="width:100%;height:350px;left:0px;top:0px"></div>
<div id="buttons">
<button type="button" onclick="javascript:setMode(vw.ol3.BasemapType.GRAPHIC);" >배경지도</button>
<button type="button" onclick="javascript:setMode(vw.ol3.BasemapType.GRAPHIC_WHITE);" >백지도</button>
<button type="button" onclick="javascript:setMode(vw.ol3.BasemapType.GRAPHIC_NIGHT);">야간지도</button>
<button type="button" onclick="javascript:setMode(vw.ol3.BasemapType.PHOTO);" >항공사진</button>
<button type="button" onclick="javascript:setMode(vw.ol3.BasemapType.PHOTO_HYBRID);" >하이브리드</button>
</div>
<script type="text/javascript">
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
};
var vmap = new vw.ol3.Map("vmap", vw.ol3.MapOptions);
function setMode(basemapType) {
vmap.setBasemapType(basemapType);
}
</script>
</body>
</html>관련 레퍼런스
| vw.ol3.BasemapType | vw.ol3.Map | vw.ol3.MapOptions |
!! 아래 클릭 !! 실행결과 웹페이지 보기
glass_api2.0_maptest
배경지도 백지도 야간지도 항공사진 하이브리드
bongbongsam.github.io
△△ 2D지도 API 2.0 레퍼런스 - Map 코드샘플로 이동 △△
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>glass_api2.0_maptest</title>
<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=@{apikey}"></script>
</head>
<body>
<div id="vmap" style="width:100%;height:350px;left:0px;top:0px"></div>
<div id="buttons">
<button type="button" onclick="javascript:move(14129709.590359,4512313.7639686,15);" >여의도</button>
<button type="button" onclick="javascript:move(14679304.585522275, 4472545.1240446,14);" >독도</button>
</div>
<script type="text/javascript">
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
};
var vmap = new vw.ol3.Map("vmap", vw.ol3.MapOptions);
function move(x,y,z){
var _center = [ x, y ];
var z = z;
var pan = ol.animation.pan({
duration : 2000,
source : (vmap.getView().getCenter())
});
vmap.beforeRender(pan);
vmap.getView().setCenter(_center);
setTimeout("fnMoveZoom()", 3000);
}
function fnMoveZoom() {
zoom = vmap.getView().getZoom();
if (16 > zoom) {
vmap.getView().setZoom(14);
}
};
</script>
</body>
</html>
!! 아래 클릭 !! 실행결과 웹페이지 보기
glass_api2.0_maptest
bongbongsam.github.io
△△ 2D지도 API 2.0 레퍼런스 - Map 코드샘플로 이동 △△
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>glass_api2.0_maptest</title>
<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=@{apikey}"></script>
</head>
<body>
<div id="vmap" style="width:100%;height:500px;left:0px;top:0px"></div>
<select id="setMode" onchange="mapController.setMode(this.value)">
<option value="2d-map">2d-map</option>
<option value="3d-map">3d-map</option>
</select>
<script type="text/javascript">
vw.MapControllerOption = {
container : "vmap",
mapMode : "2d-map",
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,
};
mapController = new vw.MapController(vw.MapControllerOption);
</script>
</body>
</html>
관련 레퍼런스
!! 아래 클릭 !! 실행결과 웹페이지 보기
glass_api2.0_maptest
bongbongsam.github.io
△△ 2D지도 API 2.0 레퍼런스 - Map 코드샘플로 이동 △△
vw.ol3.Map에서 사용하는 배경지도의 종류를 선언하는 열거형
Constructor - 없음
Method-없음
Static Method -없음
Property
| string GRAPHIC : 도로맵 |  |
| string GRAPHIC_NIGHT : 야간지도 |  |
| string GRAPHIC_WHITE : 백지도 |  |
| string PHOTO : 항공사진 |  |
| string PHOTO_HYBRID : 항공사진에 주기표시 |  |
Static Property -없음
△△ 2D지도 API 2.0 레퍼런스 - Map 으로 이동△△
가장 기본적인 클래스로 오픈 API 진입점 역할을 하는 핵심 클래스
(레이어, 컨트롤, 인터랙션 등을 포함하고 관리)
Constructor
new vw.ol3.Map(container, opt) 맵 클래스 생성자
Parameters
container : 지도가 그려지는 node 엘리먼트의 id
opt: vw.ol3.MapOptions - 맵 클래스 생성옵션
Returns
Method
1. addKMLLayer
ol.layer.layer addKMLLayer(url, styleFunction, epsg, kmlStyle) - kml 파일을 호출하여 맵에 표시하는 맵 레이어를 반환
Parameters
url : 요청 URL
styleFunction : kml데이터를 읽어 맵에 표시하는 도형 등을 정의하는 함수
epsg : KML데이터 좌표계 (기본값 : EPSG:900913)
kmlStyle : KML에서 스타일 추출여부(기본값 : false)
Returns
2. addNamedLayer
ol.layer.layer addNamedLayer(name, layerName) - 브이월드 내부 레이어 추가
Parameters
name : 추가 할 레이어 name,
layerName : 레이어명 (ex)LP_PA_CBND_BUBUN
Returns
3. addTileCacheLayer
ol.layer.layer addTileCacheLayer(name, layerName, option) - 타일 맵 레이어를 반환
Parameters
name : 레이어이름
layerName : 파라미터로 넘기는 레이어명option ? maxZoom : 최대 줌. minZoom : 최소 줌
option ? maxZoom : 최대 줌. minZoom : 최소 줌
Returns
4. addWMSBoundaryLayer
ol.layer.layer addWMSBoundaryLayer(name, layerName, year) - 행정경계구역 맵 레이어를 반환
Parameters
name : 레이어이름
layerName : 요청 레이어 명
year : 기준연도. (ex) 2012
Returns
5. clear
clear() - 지도에 그려진 측정결과, 마커, 팝업 그래픽 객체를 모두 삭제
Parameters
N/A
Returns
5. hideAllThemeLayers
hideAllThemeLayers() - 모든 주제도 레이어 숨김
Parameters
N/A
Returns
6. isEventExists
boolean isEventExists(type, listener) - 지도에 설정 된 이벤트 존재 유무를 반환
Parameters
type : ol.MapEvent 이벤트 이름
listener : 리스너 함수 (option)
Returns
7. showHiddenThemeLayers
showHiddenThemeLayers()
hideAllThemeLayer()에 의해 숨겨진 주제도 레이어 보기
Parameters
N/A
Returns
Static Method -없음
Property -없음
Static Property -없음
△△ 2D지도 API 2.0 레퍼런스 - Map 으로 이동△△
vw.ol3.Map 클래스에서 사용 하는 옵션을 정의
Constructor - 없음
Method-없음
Static Method -없음
Property
| vw.ol3.BasemapType basemapType |
2D 지도의 경우 화면에 표현할 지도 유형 GRAPHIC(D) :도로맵 GRAPHIC_WHITE : 백지도 GRAPHIC_NIGHT : 야간지도 PHOTO : 항공사진 PHOTO_HYBRID : 항공사진에 주기표시 |
| boolean controlsAutoArrange | (D)true, 맵의 크기에 따라 배치와 visiblility를 자동으로 조절 |
| vw.ol3.DensityType controlsDensity |
지도 툴바 설정 EMPTY :툴바 없음 (D) BASIC : 기본 툴바 제공 FULL : 모든 툴바 제공 |
| vw.ol3.CameraPosition homePosition |
홈 카메라 위치 |
| vw.ol3.CameraPosition initPosition |
초기 카메라 위치 설정 좌표계는 메카르도(EPSG:3857) 좌표계를 사용 vw.ol3.CameraPosition.center = [14321697.310319025, 4383887.613187535]; vw.ol3.CameraPosition.zoom = 15; |
| vw.ol3.DensityType interactionDensity |
지도 인터액션 설정 EMPTY :인터액션 없음 (D)BASIC : 기본 인터액션 제공 FULL : 모든 인터액션 |
Static Property -없음
△△ 2D지도 API 2.0 레퍼런스 - Map 으로 이동△△
Map 구성 요소인 control, interaction을 초기에 어느 정도 구성할지 설정
Constructor - 없음
Method-없음
Static Method -없음
Property
| string BASIC | 맵을 생성할 때, Control, Interaction을 많이 사용하는 표준적인 형태로 미리 생성 |
| string EMPTY | 맵을 생성할 때, Contol, Interaction을 하나도 생성하지 않는다. 개발자가 필요한 것을 직접 추가하여 사용 |
| string FULL | 맵을 생성할 때, Control, Interaction을 최대로 생성 |
Static Property -없음
△△ 2D지도 API 2.0 레퍼런스 - Map 으로 이동△△
카메라의 위치를 나타내는 객체
Constructor - 없음
Method-없음
Static Method -없음
Property
| ol.Coordinate center | 카메라가 바라보는 중심 지점 |
| float rotation | 맵의 회전 각도(degree) |
| integer zoom | 맵의 줌레벨 |
Static Property -없음
△△ 2D지도 API 2.0 레퍼런스 - Map 으로 이동△△
2D, 3D 지도를 함께 제어할 수 있는 통합 환경을 제공
구체적인 맵 제어는 2D, 3D Map 프로퍼티를 통해 수행
Constructor
MapController(opt)
MapController 생성자
Method
1. onMapModeChange
onMapModeChange(oldValue, newValue) - 지도모드가 변경될 때 발생하는 이벤트
Parameters
oldValue : mapMode, 이전 지도 모드
newValue : mapMode, 변경 지도 모드
Returns
2. setMode
setMode(mode) - 2D 지도 및 3D 지도의 변환 기능을 담당한다
Parameters
(D) 2d-map : 2D 지도
3d-map : 3D 지도
Returns
Static Method -없음
Property
| vw.ol3.Map Map2D | 2D Map 객체의 Reference |
| vw.Map Map3D | 3D Map 객체의 Reference |
| string mapMode | 화면에 표현할 지도 유형 (D)2d-map: 2D 지도 3d-map: 3D 지도 |
Static Property -없음
△△ 2D지도 API 2.0 레퍼런스 - Map 으로 이동△△
vw.MapController 클래스 초기화에 사용되는 옵션을 정의
Constructor - 없음
Method-없음
Static Method -없음
Property
| vw.ol3.BasemapType basemapType |
2D 지도의 경우 화면에 표현할 지도 유형 GRAPHIC(D) :도로맵 GRAPHIC_WHITE : 백지도 GRAPHIC_NIGHT : 야간지도 PHOTO : 항공사진 PHOTO_HYBRID : 항공사진에 주기표시 |
| string container | 지도가 그려지는 node 엘리먼트의 id |
| boolean controlsAutoArrange | (D)true, 맵의 크기에 따라 배치와 visiblility를 자동으로 조절 |
| vw.ol3.DensityType controlsDensity |
지도 툴바 설정 EMPTY :툴바 없음 (D)BASIC : 기본 툴바 제공 FULL : 모든 툴바 제공 |
| vw.ol3.CameraPosition homePosition |
홈 카메라 위치 |
| vw.ol3.CameraPosition initPosition |
초기 카메라 위치 vw.ol3.CameraPosition.center = [126.935933970442, 37.5195189561987]; vw.ol3.CameraPosition.zoom = 16; 좌표계는 위경도(EPSG:4326)을 이용 |
| vw.ol3.DensityType interactionDensity |
지도 인터액션 설정 . EMPTY :인터액션 없음 (D)BASIC : 기본 인터액션 제공 FULL : 모든 인터액션 제공 |
| string mapMode | 화면에 표현할 지도 유형 (D)2d-map : 2D 지도 3d-map : 3D 지도 |
Static Property -없음
'Wep Map > 2D지도 API 레퍼런스' 카테고리의 다른 글
| 2D지도 API 2.0 레퍼런스 - vw.ol3.Map (0) | 2023.05.15 |
|---|---|
| 2D지도 API 2.0 레퍼런스 - vw.ol3.MapOptions (0) | 2023.05.15 |
