Convert EPSG:4326 to EPSG:3857 in OpenLayers and React
Is there a way to convert coordinates from EPSG:4326 to EPSG:3857 in OpenLayers. Or does any one have a method that does this in Javascript?
gis.stackexchange.com
Vworld Map 예제 출처 : 공간정보 오픈플랫폼 오픈API (vworld.kr)
공간정보 오픈플랫폼 오픈API
2D지도 API 2.0 레퍼런스 2D지도 API 2.0 레퍼런스를 제공합니다.
www.vworld.kr
vw.ol3 객체의 경우 지도 위치 설정을 EPSG:3857 좌표계값으로 설정 해야 하므로 변환이 필요 합니다.
변환 함수 - convertCoordinates(lon,lat);
vmap.getView().setCenter([x,y]);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title></title>
</head>
<body>
<div id="vmap" style="width:100%;height:370px;left:0px;top:0px"></div>
<script type="text/javascript" src="http://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=발급받은키"></script>
<script>
var vmap;
var selectMarker;
var markerLayer;
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
//, projection : "EPSG:4326"
};
vmap = new vw.ol3.Map("vmap", vw.ol3.MapOptions);
$(document).ready(function () {
markerLayer = new vw.ol3.layer.Marker(vmap);
vmap.addLayer(markerLayer);
alert(convertCoordinates(126.24,37.4) );
// vw.ol3 의 경우 지도 위치 설정을 EPSG:3857 로 설정 해야 하므로 변환 한다.
vmap.getView().setCenter(convertCoordinates(126.24,37.4));
vmap.getView().setZoom(9);
vw.ol3.markerOption = {
x : 126.24,
y : 37.4,
epsg : "EPSG:4326",
title : '테스트마커1',
contents : '테스트마커1 본문내용',
iconUrl : 'http://map.vworld.kr/images/ol3/marker_blue.png',
text : {
offsetX: 0.5, //위치설정
offsetY: 20, //위치설정
font: '12px Calibri,sans-serif',
fill: {color: '#000'},
stroke: {color: '#fff', width: 2},
text: '테스트마커1'
},
attr: {"id":"maker01","name":"속성명1"}
};
markerLayer.addMarker(vw.ol3.markerOption);
});
// EPSG 4326 경위도 값을 EPSG 3857 좌표계로 변환 함.
function convertCoordinates(lon, lat) {
var x = (lon * 20037508.34) / 180;
var y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360)) / (Math.PI / 180);
y = (y * 20037508.34) / 180;
return [x, y];
}
</script>
</body>
</html>
'JAVASCRIPT' 카테고리의 다른 글
| [HTML5 FILE API] 첨부 파일 URL 경로 획득 하기 (0) | 2022.07.28 |
|---|---|
| [JavaScript] async , await 키워드를 이용한 비동기 , 동기 메서드 호출 예제 (0) | 2022.03.29 |
| showModalDialog 오픈 후 onload 이벤트에서 창 사이즈 조정 (0) | 2016.02.03 |
| [JavaScript] Splice 메서드를 이용하여 배열 초기화 (0) | 2015.10.12 |
| DateTime의 형식 JSON 데이터 날짜,시간 형식으로 보여주기 예제 (0) | 2015.03.05 |
