지도를 생성하는 기본적인 예제입니다.
sop.map 함수로 맵 객체를 생성하고, setView 함수에 센터좌표와 줌 레벨을 설정하여 맵을 생성합니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
맵의 지도 이동을 컨트롤하는 예제입니다.
페이지 내에서 생성한 맵 객체를 setView 함수를 이용하여 센터좌표와 줌 레벨을 설정하면 해당 중심좌표로 지도가 이동합니다.
이동 시, setView 함수 내의 animate 옵션으로 애니메이션 효과를 지정할 수 있습니다.
var map = sop.map('map');
map.mapMove = function (center, zoom, animate) {
if (animate == null) {
animate = true; //false로 설정할경우 애니메이트 효과 끔
}
if (center != null) {
this.center = map.center;
if (zoom != null) {
this.zoom = zoom;
this.setView(sop.utmk(center[0], center[1]), zoom, {
animate : animate
});
}
else {
this.setView(sop.utmk(center[0], center[1]), {
animate : animate
});
}
}
}
map.setView(sop.utmk(953820, 1953437), 9);
map.mapMove([953810,1953437],7);
function mapMove(direction){
var center = map.getCenter();
var x = center.x;
var y = center.y;
switch(direction){
case "top" :
y = y+2000;
break;
case "bottom" :
y = y-2000;
break;
case "right" :
x = x+2000;
break;
case "left" :
x = x-2000;
break;
}
map.mapMove([x,y],7,true);
}
지도의 줌 레벨을 변경하는 예제입니다.
지도의 줌 레벨을 변경하기 위해서는 setZoom 함수를 사용합니다.
다음은 지도의 줌 레벨을 10으로 변경하는 코드입니다.
지도의 줌 레벨을 현단계에서 한단계씩 확대 시키려면 zoomIn 함수를 사용하고 축소 시키려면 zoomOut 함수를 사용합니다.
이 함수들은 현재 줌 레벨에서 한 단계씩 확대하거나 축소되며, 특정 줌 레벨로 바로 이동 시에는 setZoom 함수를 사용합니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 1);
map.zoomIn();
map.zoomOut();
function zoomIn(){
map.zoomIn(); // 줌 레벨 한단계 확대
}
function zoomOut(){
map.zoomOut(); // 줌 레벨 한단계 축소
}
function setZoom(val){
map.setZoom(val);
}
지도 생성에 관련한 정보를 호출하는 예제입니다.
생성된 맵 객체에 대한 center 정보, 줌 레벨 정보, 바운더리 정보 등을 가져올수 있습니다.
getCenter 함수는 현재 지도의 중심좌표를 반환하며, getZoom 함수는 현재 지도의 줌 레벨을 반환합니다.
getBounds 함수는 현재 화면상의 지도 바운더리 정보을 반환합니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
var center = map.getCenter();
var level = map.getZoom();
var bounds = map.getBounds();
var swLatLng = bounds.getSouthWest();
var neLatLng = bounds.getNorthEast();
var html = "센터 : "+center.x+","+center.y+"
";
html +="줌 레벨 : "+level+"
";
html +="swLatLng : "+swLatLng+"
";
html +="neLatLng : "+neLatLng+"
";
$("#divCon").html(html);
지도 타입을 변경하는 예제입니다.
sop.map으로 생성한 지도의 타일 형식을 위성지도로 변경 할수 있습니다.
현재 위성지도는 외부 TMS 와 연계하여 제공하는 것으로, 해당 위성지도에 대한 좌표체계,
바운더리정보, resolution, 옵션정보 등을 이용하여
타일레이어를 생성하여 제공됩니다.
위처럼 외부 TMS 에서 제공되는 타일의 정보를 알 수 있다면, 얼마든지 외부 타일을 표출할 수 있습니다.
var map = sop.map('map');
var mapMode = "normal";
var zoomMargin, crs ,baseTileLayer, targetTileLayer;
function changeMode(type){
if (type == "settlite") {
mapMode = "settlite";
crs = createSatelliteCRS();
baseTileLayer = createSatelliteTileLayer();
targetTileLayer = map.statisticTileLayer;
zoomMargin = baseTileLayer.options.minZoom - targetTileLayer.options.minZoom;
createTileLayer(map, crs, baseTileLayer, targetTileLayer, zoomMargin);
}else {
mapMode = "normal";
targetTileLayer = baseTileLayer;
baseTileLayer = map.statisticTileLayer;
zoomMargin = baseTileLayer.options.minZoom - targetTileLayer.options.minZoom;
createTileLayer(map, sop.CRS.UTMK, baseTileLayer, targetTileLayer, zoomMargin);
}
}
function changeMap(){
if(mapMode == "settlite"){
changeMode("normal");
}else{
changeMode("settlite");
}
}
/**
*
* @name : createSatelliteCRS
* @description : 위성지도에 사용하는 좌표체계 생성
*/
function createSatelliteCRS(){
var code = 'EPSG:900913';
var def = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs';
var options = {
resolutions: [
156543.0339,
78271.51695,
39135.758475,
19567.8792375,
9783.93961875,
4891.969809375,
2445.9849046875,
1222.99245234375,
611.496226171875,
305.7481130859375,
152.87405654296876,
76.43702827148438,
38.21851413574219,
19.109257067871095,
9.554628533935547,
4.777314266967774,
2.388657133483887,
1.1943285667419434,
0.5971642833709717,
0.29858214168548586,
0.14929107084274293
],
origin: [-20037508.34, 20037508.34]
};
// 새로 정의한 CRS 객체 생성.
var crs = new sop.CRS.Proj(code, def, options);
// projection 영역 설정.
crs.projection.bounds = sop.bounds(
[13232210.28055642, 3584827.864295762],
[15238748.249933105, 5575460.5658249445]
);
return crs;
}
/**
*
* @name : createTileLayer
* @description : 타일레이어 토글버튼 생성
*/
function createTileLayer(map, crs, baseLayer, targetLayer, zoomMargin) {
if(arguments.length < 5) {
throw new Error('Fail check arguments length. current = ' + arguments.length);
}
if(map.hasLayer(baseLayer)){
return;
}
var center = map.getCenter();
var zoom = map.zoom;
map.removeLayer(targetLayer);
map.options.crs = crs;
baseLayer.addTo(map);
//좌표 초기화
map.setView(sop.utmk(953820, 1953437), 9);
}
/**
*
* @name : createSatelliteTileLayer
* @description : 위성 타일레이어 생성
*/
function createSatelliteTileLayer(){
var satTileURL = "https://xdworld.vworld.kr/2d/Satellite/service/{z}/{x}/{y}.jpeg";
var satTileOptions = {
maxZoom: 18,
minZoom: 6
};
var satTileLayer = new sop.TileLayer(satTileURL, satTileOptions);
return satTileLayer;
}
map.setView(sop.utmk(953820, 1953437), 9);
지도 화면이 이동하고 정지하는 동작을 감지하는 예제입니다.
지도에 대한 이벤트 등록은 on 함수를 통해 등록할 수 있습니다.
지도의 이동 시작 이벤트는 movestart 를 사용하며, 이동 종료 이벤트는 moveend 를 사용합니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
map.on("movestart",function(e) {
setTimeout(function() {
var html = ""+ getTime() + " 이동 시작
";
$("#divCon").append(html);
}, 200);
});
map.on("moveend",function(e) {
setTimeout(function() {
var html = ""+ getTime() + " 이동 끝
";
$("#divCon").append(html);
}, 200);
});
function getTime(){
var date = new Date();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
return date.getFullYear()+'-'+(m>9?m:'0'+m)+'-'+(d>9?d:'0'+d)+' '+(h>9?h:'0'+h)+':'+(i>9?i:'0'+i)+':'+(s>9?s:'0'+s);
}
지도화면의 확대 및 축소 동작을 감지하는 예제입니다.
지도에 대한 이벤트 등록은 on 함수를 통해 등록할 수 있습니다.
지도의 확대 및 축소 시작 이벤트는 zoomstart 를 사용하며, 종료 이벤트는 zoomend 를 사용합니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
map.on("zoomstart",function(e) {
setTimeout(function() {
var html = ""+ getTime() + " 줌 시작
";
$("#divCon").append(html);
}, 200);
});
map.on("zoomend",function(e) {
setTimeout(function() {
var html = ""+ getTime() + " 줌 종료
";
$("#divCon").append(html);
}, 200);
});
function getTime(){
var date = new Date();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
return date.getFullYear()+'-'+(m>9?m:'0'+m)+'-'+(d>9?d:'0'+d)+' '+(h>9?h:'0'+h)+':'+(i>9?i:'0'+i)+':'+(s>9?s:'0'+s);
}
지도 생성 동작을 감지하는 예제입니다.
whenReady 를 사용하여 맵 생성이 완료된 후의 이벤트를 감지할 수 있습니다.
var map = sop.map('map');
map.whenReady(function(e) {
$("#divCon").append(""+getTime()+"생성완료
");
});
function getTime(){
var date = new Date();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
return date.getFullYear()+'-'+(m>9?m:'0'+m)+'-'+(d>9?d:'0'+d)+' '+(h>9?h:'0'+h)+':'+(i>9?i:'0'+i)+':'+(s>9?s:'0'+s);
}
map.setView(sop.utmk(953820, 1953437), 9);
지도 위를 클릭하는 동작을 감지하는 예제입니다.
지도에 대한 이벤트 등록은 on 함수를 통해 등록할 수 있습니다.
특히, 클릭에 대한 이벤트는 on 함수의 파라미터로 click 선언을 통해 등록 할수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
map.on("click",function(e) {
setTimeout(function() {
var x_coor = e.utmk.x;
var y_coor = e.utmk.y;
var html = ""+ getTime() + " 지도클릭 좌표 x :"+x_coor+" , y :"+y_coor+"
";
$("#divCon").append(html);
}, 200);
});
function getTime(){
var date = new Date();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
return date.getFullYear()+'-'+(m>9?m:'0'+m)+'-'+(d>9?d:'0'+d)+' '+(h>9?h:'0'+h)+':'+(i>9?i:'0'+i)+':'+(s>9?s:'0'+s);
}
지도 화면 이동을 막는 기능의 예제입니다.
생성된 지도에 대하여 드래그 이동 불가 여부를 dragging 객체를 통해 설정할 수 있습니다.
disable 함수는 드래그 이동 막기를 수행하고, enable 함수는 드래그 이동을 다시 수행합니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
map.dragging.disable();
지도 확대 및 축소 기능을 제한하는 예제입니다.
생성된 맵에서 스크롤링 이벤트 제어는 scrollWheelZoom 객체를 이용합니다.
disable 함수는 스크롤링 이벤트 막기를 수행하고, enable 함수는 스크롤링 이벤트를 다시 수행합니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
map.scrollWheelZoom.disable(); //zoomin zoomout 불가
HTML5 Geolocation API를 활용하는 예제입니다.
HTML5 에서 제공하는 Geolocation을 활용하여 현재 좌표를 가져온 후, sop.LatLng을 이용하여 UTMK로 변환하여 사용할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(989674, 1818313), 9);
function getLocationCoords(){
var center = [989674, 1818313];
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var utmkXY = new sop.LatLng (position.coords.latitude, position.coords.longitude);
center = [utmkXY.x, utmkXY.y];
console.log(position.coords.latitude);
console.log(position.coords.longitude);
var html = "latitude = " + position.coords.latitude +" , longitude " + position.coords.longitude+"
";
html += "x = "+utmkXY.x+", y="+utmkXY.y+"
";
$("#divCon").append(html);
});
}
/* return center; */
}
getLocationCoords();
좌표 규격을 변환하는 예제입니다.
현재 SGIS에서 사용하는 좌표계는 UTMK를 활용합니다.
WGS84를 sop.LatLng을 통해 UTMK로 변환하여 사용할 수 있습니다.
var map = sop.map('map');
var utmkXY = new sop.LatLng (36.3504119,127.3845475); //wgs84 좌표를 UTMK로 변환
map.setView(sop.utmk(utmkXY.x, utmkXY.y), 9);
var html = "wgs84 : 36.3504119,127.3845475
";
html += "x = "+utmkXY.x+" , y = "+utmkXY.y+"
";
$("#divCon").append(html);
지도상에서 클릭한 지점의 좌표를 불러오는 기능의 예제입니다.
생성한 맵에서 현재 내가 원하는 지역에 대한 좌표값을 contextmenu 이벤트를 등록하여 가져올수 있습니다.
다음은 맵에서 왼쪽 마우스를 클릭시 해당 지역의 좌표 정보를 가져오는 코드 입니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
map.on("click",function(e) {
setTimeout(function() {
var x_coor = e.utmk.x;
var y_coor = e.utmk.y;
var html = " 지도클릭 좌표 x :"+x_coor+" , y :"+y_coor+"
";
$("#divCon").append(html);
}, 200);
});
//맵에 왼쪽 마우스 버튼 클릭시 좌표 반환
map.on("contextmenu",function(e) {
setTimeout(function() {
var x_coor = e.utmk.x;
var y_coor = e.utmk.y;
var html = " 지도클릭 좌표 x :"+x_coor+" , y :"+y_coor+"
";
$("#divCon").append(html);
}, 200);
});
지도 바운더리 정보를 가져오는 예제입니다.
현재 생성된 지도의 화면이 포함된 바운더리 정보를 getBounds 함수로 가져 옵니다.
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
var bounds = map.getBounds();
var swLatLng = bounds.getSouthWest();
var neLatLng = bounds.getNorthEast();
var html = "southWest = " + swLatLng + " , northEast = " + neLatLng+"
";
$("#divCon").append(html);
