지도 위 마커의 투명도를 조절하는 기능의 예제입니다.
생성된 마커에 opacity 속성을 적용하여 투명도를 조절할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 8);
var marker1 = sop.marker([953425, 1950124],{opacity : 0});
var marker2 = sop.marker([953422, 1950423],{opacity : 0.5});
var marker3 = sop.marker([953427, 1950827],{opacity : 1});
marker1.addTo(map);
marker2.addTo(map);
marker3.addTo(map);
marker1.setOpacity(0.7);
SOP 제공 마커 이미지를 변경하는 기능의 예제입니다.
이미지 마커가 아닌 기본 SOP에서 지원하는 '기본 마커'로 생성된 마커에 대한 이미지를 변경할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker = sop.marker([953427, 1950127]);
marker.addTo(map);
marker._icon.src = "/img/tech/ico_supply_marker01.png";
지도 위의 열지도 속성을 조절하는 기능의 예제입니다.
생성된 열지도의 반지름 radius 투명도 minOpacity를
setOptions 속성을 통하여 조절 할 수 있습니다.
var map, totalCnt, heatDatas;
heatDatas = [
[ 953424, 1950945.5],
[ 953427, 1950919],
[ 953429.5, 1950884],
[ 953429, 1950842.5],
[ 953429.5, 1950812],
[ 953426.5, 1950765],
[ 953426.5, 1950717],
[ 953428, 1950678.5],
[ 953424.5, 1950898.5],
[ 953426, 1950868],
[ 953428.5, 1950835],
[ 953425.5, 1950795.5],
[ 953427.5, 1950738.5],
[ 953423.5, 1950716],
[ 953419, 1950692],
[ 953372, 1950766],
[ 953355, 1950710],
[ 953370, 1950673],
[ 953395, 1950650],
[ 953408, 1950630],
[ 953397, 1950703],
[ 953382, 1950707],
[ 953374, 1950673],
[ 953453, 1950659],
[ 953503, 1950672],
[ 953517, 1950740],
[ 953533, 1950762],
[ 953490, 1950778],
[ 953511, 1950798],
[ 953532, 1950779],
[ 953548, 1950778],
[ 953567, 1950771],
[ 953471, 1950644],
[ 953438, 1950621],
[ 953342, 1950644],
[ 953363, 1950689],
[ 953340, 1950690],
[ 953348, 1950744],
[ 953347, 1950784]
];
map = sop.map('map');
map.setView([ 953427, 1950827 ], 13);
var heat = sop.heatLayer(heatDatas).addTo(map);
heat.setOptions({
minOpacity : 0.01,
radius : 1,
blur : 5,
max : 1
});
function radiusChange(val){
console.log(val);
heat.setOptions({
minOpacity : 0.01,
radius : val,
blur : 5,
max : 1
});
}
지도 위 표시된 폴리곤 영역 안의 특정 마커를 찾는 예제입니다.
폴리곤 영역 내 좌표에 속하는 마커를 찾아낼 수 있습니다.
getBounds 함수로 폴리곤의 영역을 가져온 다음, contains 함수로 폴리곤에 속해있는 좌표인지를 편별할 수 있습니다.지도 위 표시된 폴리곤 영역 안의 특정 마커를 찾는 예제입니다.
폴리곤 영역 내 좌표에 속하는 마커를 찾아낼 수 있습니다.
getBounds 함수로 폴리곤의 영역을 가져온 다음, contains 함수로 폴리곤에 속해있는 좌표인지를 편별할 수 있습니다.
var map = sop.map("map"); //map 생성
map.setView(sop.utmk(953427, 1950827), 5); // 지도 중심좌표로 뷰 설정
//지도에 표시되는 폴리곤 데이터
var polygons = [
[
[949290,1951077],
[950746,1951149],
[950898,1949325],
[949402,1949253]
]
];
//폴리곤 생성
var polygon = sop.polygon(polygons, {
stroke: true,
color: "red",
weight : 3,
opacity: 1,
fill: true,
fillColor:"red",
fillOpacity: 0.2
});
polygon.addTo(map); //지도에 폴리곤 추가
map.fitBounds(polygon); ////fitBounds 최대 줌 레벨로 polygon데이터를 보여 줍니
map.on("contextmenu",function(e) {
setTimeout(function() {
var x_coor = e.utmk.x;
var y_coor = e.utmk.y;
console.log(x_coor);
console.log(y_coor);
}, 200);
});
var markerList = new Array();
var markerXY = [
[951054,1949891],
[950500,1950219],
[950748,1949727],
[949930,1950567],
[950526,1950317],
[949882,1950053],
[950260,1949803],
[947794,1950377]
];
for(var i = 0; i < markerXY.length; i ++){
var marker = sop.marker([ markerXY[i][0], markerXY[i][1]]);
markerList.push(marker);
marker.addTo(map);
}
for(var i = 0; i < markerList.length; i++){
if(polygon.getBounds().contains([ markerXY[i][0], markerXY[i][1]])){
markerList[i]._icon.src = "/img/tech/ico_supply_marker01.png";
}
}
지도 위 복수의 마커를 묶어 표현하는 예제입니다.
특정 범위 안에 생성된 POI 마커를 클러스터로 묶어서 지도상에 표현 할 수 있습니다.
maxClusterRadius 속성으로 묶을 범위를 지정해 줍니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var markerList = new Array();
var markerClusterList = null;
var markerDataList = [
[ 953424, 1950945.5],
[ 953427, 1950919],
[ 953429.5, 1950884],
[ 953429, 1950842.5],
[ 953429.5, 1950812],
[ 953426.5, 1950765],
[ 953426.5, 1950717],
[ 953428, 1950678.5],
[ 953424.5, 1950898.5],
[ 953426, 1950868],
[ 953428.5, 1950835],
[ 953425.5, 1950795.5],
[ 953427.5, 1950738.5],
[ 953423.5, 1950716],
[ 953419, 1950692],
[ 953372, 1950766],
[ 953355, 1950710],
[ 953370, 1950673],
[ 953395, 1950650],
[ 953408, 1950630],
[ 953397, 1950703],
[ 953382, 1950707],
[ 953374, 1950673],
[ 953453, 1950659],
[ 953503, 1950672],
[ 953517, 1950740],
[ 953533, 1950762],
[ 953490, 1950778],
[ 953511, 1950798],
[ 953532, 1950779],
[ 953548, 1950778],
[ 953567, 1950771],
[ 953471, 1950644],
[ 953438, 1950621],
[ 953342, 1950644],
[ 953363, 1950689],
[ 953340, 1950690],
[ 953348, 1950744],
[ 953347, 1950784]
];
function addLayer(val){
markerClusterList = sop.markerClusterGroup({
animateAddingMarkers: true,
maxClusterRadius : val
});
map.addLayer(markerClusterList);
for(var i = 0; i < markerDataList.length; i++ ){
var marker = sop.marker([markerDataList[i][0], markerDataList[i][1]]);
markerList.push(marker);
markerClusterList.addLayer(marker);
}
}
function removeLayer(){
map.removeLayer(markerClusterList);
}
function refreashMap(val){
removeLayer();
addLayer(val);
}
addLayer(10)
지도 위의 마커를 이용하여 폴리곤을 생성하는 예제입니다.
여러 개의 마커들 중에서 최외각 마커를 찾을 때 유용하게 사용될 수 있습니다.
sop.QuickHull 클래스의 getConvexHull 함수를 이용하여 최외각 좌표를 찾을 수 있습니다.
리턴된 좌표들을 이용하여 폴리곤을 생성합니다.
var map = sop.map("map"); //map 생성
map.setView(sop.utmk(953427, 1950827), 5); // 지도 중심좌표로 뷰 설정
var markerList = new Array();
var markerXY = [
[951054,1949891],
[950500,1950219],
[950748,1949727],
[949930,1950567],
[950526,1950317],
[949882,1950053],
[950260,1949803],
[947794,1950377]
];
var markerObjectList = new Array();
for(var i = 0; i < markerXY.length; i ++){
var marker = sop.marker([ markerXY[i][0], markerXY[i][1]]);
markerList.push(marker);
marker.addTo(map);
markerObjectList.push({x:markerXY[i][0], y:markerXY[i][1] });
}
var point = sop.QuickHull.getConvexHull(markerObjectList);
var polygon = sop.polygon(point, {
stroke: true,
color: "red",
weight : 3,
opacity: 1,
fill: true,
fillColor:"red",
fillOpacity: 0.2
});
polygon.addTo(map); //지도에 폴리곤 추가
map.fitBounds(polygon); ////fitBounds 최대 줌 레벨로 polygon데이터를 보여 줍니다.
지도 위의 원형 마커 속성을 지정하는 예제입니다.
생성된 서클 마커에 대한 투명도를 fillOpacity 속성을 이용하여 다음과 같이 지정 할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker = sop.circleMarker([953427, 1950827], {
radius : 17,
fillColor : "#03f",
fillOpacity : 1,
weight : 2,
});
marker.addTo(map);
function markerColorChange(){
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
marker.setStyle({
fillColor : color,
color : color
});
}
function markerOpacityChange(val){
console.log(val);
marker.setStyle({
fillOpacity : val
});
}
데이터를 시각적으로 표현하는 예제입니다.
생성된 지도에 대하여 OpenAPI를 통해 경계와 데이터를 색상과 원등으로 표현할 수 있습니다.
var legendColor = ["#ccc", "#c2b5b9", "#b99ea6", "#b08893", "#a77180", "#9e5a6d", "#95445a", "#8c2d47", "#831634", "#7a0021"];
var legendCircleRadius = [10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
var circleMarkerList = null;
var heat = null;
var map, mapOptions, oriArea, sopArea, logger, divConsole;
logger = divLogger();
mapOptions = {
ollehTileLayer: true,
measureControl: false,
zoomSliderControl: false,
panControl: false,
attributionControl: false
};
map = sop.map("map", mapOptions);
map.setView([953427, 1950827], 0);
function tokenKeySetting(){
accessToken = $("#tokenKey").val();
}
function createServiceRequest(reqFunc, reqParam) {
return function () {
// 인증 API
$.ajax({
url : 'https://sgisapi.kostat.go.kr/OpenAPI3/auth/authentication.json' +
'?consumer_key='+consumer_key+'&consumer_secret='+consumer_secret,
type : 'get',
success: function (res, status) {
reqParam.accessToken = res.result.accessToken;
reqFunc(reqParam);
}
});
}
}
sop.DomUtil.get("clear").onclick = clear;
divConsole = sop.DomUtil.get("divCon");
function addArea(type) {
if($("#tokenKey").val() == ""){
alert("키를 입력해주세요");
return;
}
clear();
var year = "2010";
var adm_cd = "11";
$.ajax({
url : 'https://sgisapi.kostat.go.kr/OpenAPI3/boundary/hadmarea.geojson' +
'?accessToken='+ accessToken +'&year='+year+'&adm_cd='+adm_cd,
type : 'get',
datatype : "geojson",
success: function( res,status) {
oriArea = res;
if(type=="color"){
sopArea = sop.geoJson(res).addTo(map);
map.fitBounds(sopArea.getBounds());
}else if(type=="bubble" || type=="dot" || type=="heat"){
circleMarkerList = makeCircleList(res);
}
logger("경계조회 결과");
logger("" + JSON.stringify(res, null, 2) + "
");
},
complete : function(){
addStatistic(type);
},
});
}
function addStatistic(type) {
if (!oriArea) {
alert("경계조회를 먼저 하세요");
return;
}
var year = "2010";
var adm_cd = "11";
var low_search = "1";
$.ajax({
url : 'https://sgisapi.kostat.go.kr/OpenAPI3/stats/population.json' +
'?accessToken='+accessToken+'&year='+year+'&adm_cd='+adm_cd+
'&low_search=' +low_search,
type : 'get',
success: function (res,status) {
// 맵형태로 변환 한다.
var idx, len, target, conComplite = {}, key, value, strToolTip;
target = res.result;
for (idx = 0, len = target.length; idx < len; idx ++) {
conComplite[target[idx].adm_cd] = target[idx];
}
var objectList = new Array();
logger("----------- [ 가구통계 조회 성공 ] -----------");
logger("" + JSON.stringify(res, null, 2) + "
");
if(type=="color"){
sopArea.eachLayer(function (layer) {
key = layer.feature.properties.adm_cd;
value = conComplite[key];
if (!value) { return; }
strToolTip = "지역(구)명 : " + value.adm_nm + "
";
strToolTip += "총인구 : " + value.tot_ppltn + "
";
strToolTip += "ADM : " + key + "
";
layer.bindToolTip(strToolTip);
var object = new Object();
object.value = value.tot_ppltn;
object.admCd = key;
objectList.push(object);
});
}else if(type == "bubble" || type == "dot" || type == "heat"){
for(var i = 0; i < circleMarkerList.length; i++){
var infos = circleMarkerList[i].options.infos;
key = infos.adm_cd;
value = conComplite[key];
if (!value) { return; }
strToolTip = "지역(구)명 : " + value.adm_nm + "
";
strToolTip += "총인구 : " + value.tot_ppltn + "
";
strToolTip += "ADM : " + key + "
";
circleMarkerList[i].options.tooltipMsg = strToolTip;
circleMarkerList[i].bindInfoWindow(circleMarkerList[i].options.tooltipMsg);
var object = new Object();
object.value = value.tot_ppltn;
object.admCd = key;
objectList.push(object);
}
}
var legend = calculateLegend(objectList);
if(type=="color"){
areaFillColor(objectList,legend);
}else if(type == "bubble"){
circleMarkerList = areaSizeCircle(objectList,legend,circleMarkerList);
gridCirCle(circleMarkerList);
}else if(type == "dot"){
gridCirCle(circleMarkerList);
}else if(type == "heat"){
circleMarkerList = areaSizeCircle(objectList,legend,circleMarkerList);
addHeatMap(circleMarkerList);
}
}
});
}
function clear() {
if (sopArea) {
sopArea.remove();
}
if(heat !=null){
map.removeLayer(heat);
}
if(circleMarkerList !=null){
for(var i =0; i < circleMarkerList.length; i ++){
circleMarkerList[i].remove();
}
}
sopArea = undefined;
oriArea = undefined;
divConsole.innerHTML = "";
logger("------------- 지도초기화 완료 -------------");
}
function divLogger() {
var lineNum = 0;
var prefix = "";
return function (str) {
prefix = lineNum++ + " : ";
str = prefix + str;
if (divConsole.innerHTML.length < 300000) {
divConsole.innerHTML += str;
} else {
divConsole.innerHTML = str;
}
divConsole.innerHTML += "
";
divConsole.scrollTop = divConsole.scrollHeight;
};
}
function areaFillColor(objectList,legend){
sopArea.eachLayer(function (layer) {
var admCd = layer.feature.properties.adm_cd;
for(var i =0; i < objectList.length; i++){
if(objectList[i].admCd == admCd){
if(legend[legend.length-1] <= objectList[i].value){
layer.setStyle({
weight : 3,
color : legendColor[legend.length-1],
fillColor :legendColor[legend.length-1]
});
}else{
for(var j=0; j < legend.length; j ++){
if(legend[j] >= objectList[i].value){
layer.setStyle({
weight : 3,
color : legendColor[j],
fillColor :legendColor[j]
});
break;
}
}
}
}
}
});
}
function areaSizeCircle(objectList,legend,circleMarkerList){
//options.radius
for(var i = 0; i < circleMarkerList.length; i++){
if(legend[legend.length-1] <= objectList[i].value){
circleMarkerList[i].setStyle({
color : legendColor[legend.length-1],
fillColor : legendColor[legend.length-1],
radius : legendCircleRadius[legend.length-1]
});
}else{
for(var j = 0; j < legend.length; j++){
if(legend[j] >= objectList[i].value){
circleMarkerList[i].setStyle({
color : legendColor[j],
fillColor : legendColor[j],
radius : legendCircleRadius[j]
});
break;
}
}
}
}
return circleMarkerList;
}
function gridCirCle(circleList){
for(var i =0; i < circleList.length; i++){
circleList[i].addTo(map);
}
}
function makeCircleList(geoData){
var features = geoData.features;
var markerList = new Array();
for(var i =0; i < features.length; i ++){
var marker = sop.circleMarker([features[i].properties.x, features[i].properties.y], {
radius : legendCircleRadius[0],
fillColor : "red",
color : "red",
weight : 1,
tooltipMsg : "",
infos : {
idx : i,
adm_cd : features[i].properties.adm_cd,
adm_nm : features[i].properties.adm_nm,
data : "",
}
});
markerList.push(marker);
}
return markerList;
}
function addHeatMap(circleList){
heat = sop.heatLayer();
heat.addTo(map);
heat.setOptions({
minOpacity : 0.01,
radius : 5,
blur : 5,
max : 1
});
var xyList = new Array();
for(var i =0; i < circleList.length;i++){
xyList[i] = [circleList[i]._utmk.x,circleList[i]._utmk.y];
console.log(circleList[i]._radius);
heat.addUTMK([circleList[i]._utmk.x,circleList[i]._utmk.y,(circleList[i]._radius * 100000)]);
}
}
function calculateLegend(list){
if(list == null || list.length == 0){
return;
}
var arData = new Array();
arData[0] = new Array();
for(var i = 0; i < list.length; i++){
arData[0].push(list[i].value);
}
var legendValue = new Object();
legendValue.equal = [];
legendValue.auto = [];
var tmpData = [];
for (var i=0; i < arData.length; i++) {
var tmpData = arData[i];
for (var x=0; x < tmpData.length; x++) {
tmpData[x] = parseFloat(parseFloat(tmpData[x]).toFixed(2));
}
}
return calEqualLegend(arData);
}
function calEqualLegend(arData){
var equalMin, equalMax;
var tmpValPerSlice = [];
for ( var k = 0; k < arData.length; k++) {
if (arData[k].length == 1) {
var data = arData[k][0];
var tmpResult = new Array();
for ( var x = 0; x < 10; x++) {
var value = data+(data*x);
tmpResult.push(parseFloat(parseFloat(value).toFixed(2)));
}
tmpValPerSlice[k] = tmpResult;
}else {
var min = Math.min.apply(null, arData[k]);
var max = Math.max.apply(null, arData[k]);
equalMin = min;
equalMax = max;
var result = (max - min) / (10);
if (result == 0 && min != max) {
result = 1;
}
var tmpResult = new Array();
for ( var y=0; y <10; y++) {
if (result == 1 && min != max) {
tmpResult.push(result);
}else {
tmpResult.push(parseFloat(parseFloat((min+result * y)).toFixed(2))); //그래서 303 + 57*
}
}
tmpValPerSlice[k] = tmpResult;
}
}
return tmpValPerSlice[0];
}
지도 위 폴리곤에 설명 등을 덧붙이는 예제입니다.
생성된 폴리곤에 setCaption 속성을 이용하여 캡션을 지정할 수 있습니다.
var map = sop.map("map"); //map 생성
map.setView(sop.utmk(953427, 1950827), 5); // 지도 중심좌표로 뷰 설정
//지도에 표시되는 폴리곤 데이터
var polygons = [
[
[949279, 1951131],
[950631, 1950331],
[951063, 1949091]
]
];
//폴리곤 생성
var polygon = sop.polygon(polygons, {
stroke: true,
color: "red",
weight : 3,
opacity: 1,
fill: true,
fillColor:"red",
fillOpacity: 0.2
});
polygon.addTo(map); //지도에 폴리곤 추가
polygon.setCaption({title:"폴리곤 캡션 생성", color:"black"});
map.fitBounds(polygon); ////fitBounds 최대 줌 레벨로 polygon데이터를 보여 줍니다
function saveCaption(){
polygon.removeCaption();
polygon.setCaption({title:$("#captionText").val(), color:"black"});
$(".popupWrapper").remove();
}
지도 위에 마커를 제어하는 예제입니다.
생성된 맵에 이벤트를 걸어 마우스 오른쪽 버튼을 클릭한 좌표에 마커를 생성할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
//맵에 오른쪽 마우스 버튼 클릭시 마커 생성
map.on("contextmenu",function(e) {
setTimeout(function() {
var x_coor = e.utmk.x;
var y_coor = e.utmk.y;
var marker = sop.marker([ x_coor, y_coor]);
marker.addTo(map);
}, 200);
});
