Layers - Polygon
[map 영역] Layer는 Map 영역의 시각화를 정의합니다.
| 필드 | 타입 | 필수 | 설명 | 기본값 |
|---|---|---|---|---|
| section | string | Y | 데이터가 표출되는 영역 map | |
| contents | object | Y | GeoJson 객체 | |
| contents.geojson | object | Y | GeoJson 객체 | |
| contents.geojson.type | string | Y | FeatureCollection로 작성 | |
| contents.geojson.features | object[] | Y | 도형 특성 배열 | |
| contents.geojson.features[].id | string | Y | 도형 고유 식별자 | |
| contents.geojson.features[].type | string | Y | Feature로 작성 | |
| contents.geojson.features[].properties | object | N | 도형 속성 정보 | |
| contents.geojson.features[].geometry | object | Y | 레이어 좌표 정보 | |
| contents.geojson.features[].geometry.type | enum | Y | 레이어 형태 타입 Polygon | |
| contents.geojson.features[].geometry.coordinates | [[number[]]] | Y | 레이어 좌표 배열 | |
| config | object | Y | 기본 설정 | |
| config.type | string | Y | 지도 데이터 타입 식별자 | |
| config.id | string | Y | 지도 고유 식별자 | |
| config.option | object | Y | 세부 설정 | |
| config.option.layer | object | Y | 지도의 레이어 관련 옵션을 설정 | |
| config.option.layer.name | string | Y | 레이어 이름 (레이어 on/ off 박스에서 해당 값을 기준으로 on/off 됨) | |
| config.option.layer.visibility | boolean | N | 레이어 표시 여부 | true |
| config.option.layer.order | int | N | 레이어 순서 (숫자가 높을수록 상단에 노출됨) | 0 |
| config.option.layer.style[] | object[] | N | 각 레이어의 추가적인 옵션을 설정 | |
| config.option.layer.style[].id | string | N | 속성 식별자 | |
| config.option.layer.style[].tooltip | string | N | 툴팁 (텍스트, html, Markdown 형식으로 작성) | |
| config.option.layer.style[].fillColor | string | N | 채우기 색상 (투명색상: #FFFFFF26) | #DC3545 (빨간색) |
| config.option.layer.style[].fillOpacity | float | N | 채우기 투명도 (0-1) | 0.3 |
| config.option.layer.style[].lineColor | string | N | 선 색상 | #FFFFFF (흰색) |
| config.option.layer.style[].lineWidth | int | N | 선 두께 (선을 그리고 싶으면 두께는 필수) | 0 |
| config.option.layer.style[].lineOpacity | float | N | 선 투명도 (0-1) | 1 |
| config.option.legend | object | N | 지도의 범례 관련 옵션을 설정 (legend는 layer를 기준으로 자동 생성) | |
| config.option.legend.visibility | boolean | N | 범례 노출 여부 | true |
| config.option.legend.colName | string | N | 범례에 사용 될 column명 |
Protocol 구조
{
section:"map"
contents:{
geojson: {
type: "FeatureCollection",
features:[
{
id: string,
type: "Feature",
properties:{
key: value
}
geometry: {
type: string,
coordinates: [[number[]]]
}
}
]
}
},
config:{
type: string;
id: string;
option:{
layer :{
name: string;
visibility: boolean;
order: number;
style:[
{
id:string,
tooltip: string,
fillColor: string,
fillOpacity: float,
lineColor: string,
lineWidth: int,
lineOpacity: float,
}
]
}
legend:{
visibility: boolean;
colName:string;
}
}
}
}
Example
{
"contents": {
"geojson": {
"type": "FeatureCollection",
"features": [
{
"id": "0",
"type": "Feature",
"properties": {
"pnu": "1168010600109110035"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[127.0561824836194, 37.50177299243025],
[127.05632127993348, 37.50181842854267],
[127.05640146113163, 37.50166305919509],
[127.05626221256085, 37.5016174431855],
[127.0561824836194, 37.50177299243025]
]
]
}
},
{
"id": "1",
"type": "Feature",
"properties": {
"pnu": "1168010600109150023"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[127.05741504282575, 37.501134508766135],
[127.05760677796401, 37.5011972174839],
[127.05766177280637, 37.50109006264048],
[127.05747048998822, 37.50102699339714],
[127.05741504282575, 37.501134508766135]
]
]
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"pnu": "1168010600109160027"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[127.05640167977226, 37.5011892240096],
[127.05658300848579, 37.501250047125914],
[127.05667041763334, 37.501082871131466],
[127.05648863748719, 37.5010228592562],
[127.05640167977226, 37.5011892240096]
]
]
}
},
{
"id": "3",
"type": "Feature",
"properties": {
"pnu": "1168010600109110023"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[127.0560153978947, 37.50170450364886],
[127.05614672818325, 37.50174751071521],
[127.05621132446043, 37.50162143114921],
[127.05619818769325, 37.50159647957416],
[127.05608823695282, 37.50156049047769],
[127.0560153978947, 37.50170450364886]
]
]
}
},
{
"id": "4",
"type": "Feature",
"properties": {
"pnu": "1168010600109150021"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[127.05754276303897, 37.50088685387536],
[127.05769535950392, 37.500937597726434],
[127.05776638650546, 37.50079538636172],
[127.05765247703467, 37.50075804910301],
[127.05760024255488, 37.50077546318346],
[127.05754276303897, 37.50088685387536]
]
]
}
},
{
"id": "5",
"type": "Feature",
"properties": {
"pnu": "1168010600109160017"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[127.05582993245235, 37.50139806939458],
[127.05600809283118, 37.50145637205205],
[127.05605405730978, 37.50136904409206],
[127.05587567092155, 37.50131074160698],
[127.05582993245235, 37.50139806939458]
]
]
}
},
{
"id": "6",
"type": "Feature",
"properties": {
"pnu": "1168010600109160032"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[127.05689298543712, 37.50155047531723],
[127.05707193984185, 37.50161039779343],
[127.05711575618407, 37.50152541302908],
[127.05693725477691, 37.501466121104734],
[127.05689298543712, 37.50155047531723]
]
]
}
}
]
}
},
"section": "map",
"config": {
"type": "layer",
"id": "floor_all",
"option": {
"layer": {
"name": "전체 사업자 정보",
"order": 1,
"style": [
{
"range": "31-40",
"pnu": "1168010600109110035",
"fillColor": "#aa1016",
"tooltip": "\n <div style=\"font-family: Pretendard Variable, Arial, sans-serif; padding: 15px; line-height: 1.6; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 서울특별시 강남구 대치동 911-35\n </h3>\n <div style=\"font-size: 14px; color: #34495E;\">\n <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;\">\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">사용승인일</span><br/><span style=\"font-size: 15px; font-weight: 600;\">2005-12-16</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">규모(면적, 층)</span><br/><span style=\"font-size: 15px; font-weight: 600;\"> 총연면적 : 766.93 / 6층</span></div> \n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">추정 제곱미터(㎡)당 환산 보증금 </span><br/><span style=\"font-size: 15px; font-weight: 600;\">5,650,000원</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">임대계약 정보</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1개</span></div>\n\n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>층별 환산 보증금 범위</b></div>\n <div style=\"margin-bottom: 3px;\"><b>지하층</b>: 5,650,000</span></div>\n <p><br></p>\n\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 층별 평균 매출액 </h3> \n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>지하층</b>: 9,431천원</span></div> \n </div>\n </div>\n "
},
{
"range": "0-10",
"pnu": "1168010600109150023",
"fillColor": "#fff5f0",
"tooltip": "\n <div style=\"font-family: Pretendard Variable, Arial, sans-serif; padding: 15px; line-height: 1.6; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 서울특별시 강남구 대치동 915-23\n </h3>\n <div style=\"font-size: 14px; color: #34495E;\">\n <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;\">\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">사용승인일</span><br/><span style=\"font-size: 15px; font-weight: 600;\">2023-06-12</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">규모(면적, 층)</span><br/><span style=\"font-size: 15px; font-weight: 600;\"> 총연면적 : 597.91 / 6층</span></div> \n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">추정 제곱미터(㎡)당 환산 보증금 </span><br/><span style=\"font-size: 15px; font-weight: 600;\">1,810,000원</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">임대계약 정보</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1개</span></div>\n\n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>층별 환산 보증금 범위</b></div>\n <div style=\"margin-bottom: 3px;\"><b>지하층</b>: 1,810,000</span></div>\n <p><br></p>\n\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 층별 평균 매출액 </h3> \n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>지하층</b>: 매출 정보 없음</span></div> \n </div>\n </div>\n "
},
{
"range": "0-10",
"pnu": "1168010600109160027",
"fillColor": "#fff5f0",
"tooltip": "\n <div style=\"font-family: Pretendard Variable, Arial, sans-serif; padding: 15px; line-height: 1.6; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 서울특별시 강남구 대치동 916-27\n </h3>\n <div style=\"font-size: 14px; color: #34495E;\">\n <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;\">\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">사용승인일</span><br/><span style=\"font-size: 15px; font-weight: 600;\">2021-04-27</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">규모(면적, 층)</span><br/><span style=\"font-size: 15px; font-weight: 600;\"> 총연면적 : 858.91 / 7층</span></div> \n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">추정 제곱미터(㎡)당 환산 보증금 </span><br/><span style=\"font-size: 15px; font-weight: 600;\">2,240,000원</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">임대계약 정보</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1개</span></div>\n\n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>층별 환산 보증금 범위</b></div>\n <div style=\"margin-bottom: 3px;\"><b>지하층</b>: 2,240,000</span></div>\n <p><br></p>\n\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 층별 평균 매출액 </h3> \n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>지하층</b>: 790천원</span></div> \n </div>\n </div>\n "
},
{
"range": "21-30",
"pnu": "1168010600109110023",
"fillColor": "#f96346",
"tooltip": "\n <div style=\"font-family: Pretendard Variable, Arial, sans-serif; padding: 15px; line-height: 1.6; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 서울특별시 강남구 대치동 911-23\n </h3>\n <div style=\"font-size: 14px; color: #34495E;\">\n <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;\">\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">사용승인일</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1997-04-01</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">규모(면적, 층)</span><br/><span style=\"font-size: 15px; font-weight: 600;\"> 총연면적 : 675.72 / 6층</span></div> \n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">추정 제곱미터(㎡)당 환산 보증금 </span><br/><span style=\"font-size: 15px; font-weight: 600;\">4,220,000원</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">임대계약 정보</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1개</span></div>\n\n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>층별 환산 보증금 범위</b></div>\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 4,220,000</span></div>\n <p><br></p>\n\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 층별 평균 매출액 </h3> \n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 매출 정보 없음</span></div> \n </div>\n </div>\n "
},
{
"range": "31-40",
"pnu": "1168010600109150021",
"fillColor": "#aa1016",
"tooltip": "\n <div style=\"font-family: Pretendard Variable, Arial, sans-serif; padding: 15px; line-height: 1.6; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 서울특별시 강남구 대치동 915-21\n </h3>\n <div style=\"font-size: 14px; color: #34495E;\">\n <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;\">\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">사용승인일</span><br/><span style=\"font-size: 15px; font-weight: 600;\">2004-11-26</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">규모(면적, 층)</span><br/><span style=\"font-size: 15px; font-weight: 600;\"> 총연면적 : 619.33 / 5층</span></div> \n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">추정 제곱미터(㎡)당 환산 보증금 </span><br/><span style=\"font-size: 15px; font-weight: 600;\">5,450,000원</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">임대계약 정보</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1개</span></div>\n\n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>층별 환산 보증금 범위</b></div>\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 5,450,000</span></div>\n <p><br></p>\n\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 층별 평균 매출액 </h3> \n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 19,339천원</span></div> \n </div>\n </div>\n "
},
{
"range": "11-20",
"pnu": "1168010600109160017",
"fillColor": "#fdd7c6",
"tooltip": "\n <div style=\"font-family: Pretendard Variable, Arial, sans-serif; padding: 15px; line-height: 1.6; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 서울특별시 강남구 대치동 916-17\n </h3>\n <div style=\"font-size: 14px; color: #34495E;\">\n <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;\">\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">사용승인일</span><br/><span style=\"font-size: 15px; font-weight: 600;\">2013-11-27</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">규모(면적, 층)</span><br/><span style=\"font-size: 15px; font-weight: 600;\"> 총연면적 : 352.34 / 4층</span></div> \n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">추정 제곱미터(㎡)당 환산 보증금 </span><br/><span style=\"font-size: 15px; font-weight: 600;\">2,910,000원</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">임대계약 정보</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1개</span></div>\n\n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>층별 환산 보증금 범위</b></div>\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 2,910,000</span></div>\n <p><br></p>\n\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 층별 평균 매출액 </h3> \n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 1,639천원</span></div> \n </div>\n </div>\n "
},
{
"range": "41-50",
"pnu": "1168010600109160032",
"fillColor": "#67000d",
"tooltip": "\n <div style=\"font-family: Pretendard Variable, Arial, sans-serif; padding: 15px; line-height: 1.6; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 서울특별시 강남구 대치동 916-32\n </h3>\n <div style=\"font-size: 14px; color: #34495E;\">\n <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;\">\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">사용승인일</span><br/><span style=\"font-size: 15px; font-weight: 600;\">2021-12-17</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">규모(면적, 층)</span><br/><span style=\"font-size: 15px; font-weight: 600;\"> 총연면적 : 783.36 / 8층</span></div> \n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">추정 제곱미터(㎡)당 환산 보증금 </span><br/><span style=\"font-size: 15px; font-weight: 600;\">6,880,000원</span></div>\n <div style=\"padding: 8px; background: #F8FAFC; border-radius: 6px;\"><span style=\"color: #64748B; font-weight: 500;\">임대계약 정보</span><br/><span style=\"font-size: 15px; font-weight: 600;\">1개</span></div>\n\n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>층별 환산 보증금 범위</b></div>\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 6,880,000</span></div>\n <p><br></p>\n\n <h3 style=\"margin: 0 0 12px 0; font-size: 18px; color: #2C3E50; border-bottom: 2px solid #4085BE; padding-bottom: 8px;\"> 층별 평균 매출액 </h3> \n <div style=\"font-size: 14px; color: #444;\">\n <div style=\"margin-bottom: 3px;\"><b>1층</b>: 4,407천원</span></div> \n </div>\n </div>\n "
}
],
"visibility": true
},
"legend": {
"visibility": true,
"colName": "range"
}
}
}
}