Layers - Point
[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 | 레이어 형태 타입 Point | |
| contents.geojson.features[].geometry.coordinates | float[] | 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.point | object | N | point의 추가적인 옵션 설정 | |
| config.option.layer.point.type | enum | N | point 타입 marker,point | point |
| config.option.layer.point.cluster | boolean | N | 클러스터 적용 유무 | true |
| config.option.layer.point.colName | string | N | symbol 설정의 기준이 되는 colName | |
| config.option.layer.point.content | object[] | N | 마커의 symbol 설정 | |
| config.option.layer.point.content[colName] | string | N | icon을 적용 할 column의 값 | |
| config.option.layer.point.icon | string | N | 마커의 icon (emoji) | |
| 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[].width | int | N | 마커의 넓이 | 55 |
| 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;
point:{
type:'point'|'marker';
cluster:boolean;
colName:string;
content:[
{
[colName]:string,
icon:string
}
]
}
style:[
{
id:string,
tooltip: string,
fillColor: string,
fillOpacity: float,
width:int
}
]
}
legend:{
visibility: boolean;
colName:string
}
}
}
}
Example
{
"section": "map",
"contents": {
"geojson": {
"type": "FeatureCollection",
"features": [
{
"id": "0",
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
127.0501840726,
37.497306683
]
},
"bbox": [
127.0501840726,
37.497306683,
127.0501840726,
37.497306683
]
},
{
"id": "1",
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
127.0458853307,
37.4967340022
]
},
"bbox": [
127.0458853307,
37.4967340022,
127.0458853307,
37.4967340022
]
},
{
"id": "2",
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
127.0464199184,
37.4966924163
]
},
"bbox": [
127.0464199184,
37.4966924163,
127.0464199184,
37.4966924163
]
},
{
"id": "3",
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
127.0459694429,
37.4965431098
]
},
"bbox": [
127.0459694429,
37.4965431098,
127.0459694429,
37.4965431098
]
},
{
"id": "4",
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
127.0462848693,
37.4962322739
]
},
"bbox": [
127.0462848693,
37.4962322739,
127.0462848693,
37.4962322739
]
}
],
"bbox": [
127.0458853307,
37.4911319068,
127.0709959841,
37.5071617429
]
}
},
"config": {
"type": "layer",
"id": "map_layer_3",
"option": {
"layer": {
"name": "주거지역3",
"visibility": true,
"order": 0,
"style": [
{
"house_division_name": "단지형아파트",
"fillColor": "#00B4D8",
"width": 20
},
{
"house_division_name": "나홀로아파트",
"fillColor": "#FF0075",
"width": 20
},
{
"house_division_name": "오피스텔",
"fillColor": "#2EC4B6",
"width": 20
},
{
"house_division_name": "나홀로아파트",
"fillColor": "#FF0075",
"width": 20
},
{
"house_division_name": "단지형아파트",
"fillColor": "#00B4D8",
"width": 20
}
],
"point": {
"type": "marker",
"cluster": true,
"colName": "house_division_name",
"content": [
{
"house_division_name": "단지형아파트",
"icon": "🏢"
},
{
"house_division_name": "나홀로아파트",
"icon": "🏠"
},
{
"house_division_name": "오피스텔",
"icon": "🏛️"
}
]
}
},
"legend": {
"visibility": true,
"colName": "house_division_name"
}
}
}
}