Layers - Line
[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 | 레이어 형태 타입 LineString | |
| contents.geojson.features[].geometry.coordinates | number[] , [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.line | object | N | 지도의 LineString 관련 옵션을 설정 | |
| config.option.layer.line.direction | boolean | N | 선 위에 화살표 애니메이션 노출 여부 | true |
| 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[].lineWidth | float | N | 선 두께를 비율로 작성 (0-1) | 0.025 |
| 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[] | [ number[] ]
}
}
]
}
};
config:{
type: string;
id: string;
option:{
layer :{
name: string;
visibility: boolean;
order: number;
line:{
direction:boolean;
}
style:[
{
id:string,
tooltip: string,
fillColor: string,
fillOpacity: float,
lineWidth: float,
}
]
}
legend:{
visibility: boolean;
colName:string
}
}
}
}
Example
{
"section": "map",
"contents": {
"geojson": {
"bbox": [127.0575764923, 37.4980378498, 127.0709959841, 37.5071617429],
"features": [
{
"bbox": [127.06371, 37.5002401863, 127.0691360519, 37.503915],
"geometry": {
"coordinates": [
[127.06371, 37.503915],
[127.06406887436218, 37.50382980917834],
[127.06441960509285, 37.50373259386493],
[127.06476219219205, 37.50362335405977],
[127.06509663565984, 37.50350208976288],
[127.06542293549613, 37.50336880097424],
[127.06574109170094, 37.503223487693845],
[127.06605110427428, 37.503066149921715],
[127.06635297321618, 37.50289678765784],
[127.06664669852661, 37.50271540090222],
[127.06693228020555, 37.502521989654845],
[127.06720971825303, 37.50231655391573],
[127.06747901266903, 37.502099093684876],
[127.06774016345358, 37.50186960896227],
[127.06799317060664, 37.50162809974792],
[127.06823803412826, 37.501374566041825],
[127.06847475401838, 37.501109007843986],
[127.06870333027707, 37.5008314251544],
[127.06892376290428, 37.500541817973065],
[127.0691360519, 37.5002401863]
],
"type": "LineString"
},
"id": "0",
"properties": {},
"type": "Feature"
},
{
"bbox": [127.06371, 37.4995339382, 127.0703384305, 37.503915],
"geometry": {
"coordinates": [
[127.06371, 37.503915],
[127.06414624328107, 37.50381661918394],
[127.0645727778379, 37.50370354932521],
[127.06498960367051, 37.50357579042382],
[127.06539672077895, 37.50343334247978],
[127.06579412916318, 37.50327620549308],
[127.06618182882316, 37.503104379463714],
[127.06655981975894, 37.502917864391684],
[127.06692810197053, 37.502716660277],
[127.06728667545791, 37.50250076711968],
[127.06763554022105, 37.50227018491967],
[127.06797469626, 37.502024913677005],
[127.06830414357474, 37.50176495339169],
[127.06862388216527, 37.501490304063715],
[127.06893391203158, 37.50120096569307],
[127.06923423317369, 37.50089693827978],
[127.06952484559159, 37.50057822182382],
[127.06980574928525, 37.50024481632521],
[127.07007694425472, 37.49989672178394],
[127.0703384305, 37.4995339382]
],
"type": "LineString"
},
"id": "1",
"properties": {},
"type": "Feature"
},
{
"bbox": [127.06371, 37.4980378498, 127.0709959841, 37.503915],
"geometry": {
"coordinates": [
[127.06371, 37.503915],
[127.06421069024749, 37.50375099233164],
[127.06469835633939, 37.503570838438115],
[127.06517299827571, 37.503374538319434],
[127.06563461605651, 37.503162091975625],
[127.06608320968174, 37.50293349940666],
[127.06651877915135, 37.50268876061252],
[127.0669413244654, 37.502427875593234],
[127.06735084562393, 37.50215084434881],
[127.06774734262687, 37.501857666879225],
[127.06813081547423, 37.50154834318449],
[127.06850126416603, 37.5012228732646],
[127.06885868870228, 37.50088125711956],
[127.06920308908295, 37.50052349474936],
[127.06953446530802, 37.500149586154016],
[127.06985281737757, 37.49975953133352],
[127.07015814529151, 37.49935333028787],
[127.07045044904991, 37.49893098301706],
[127.07072972865274, 37.498492489521105],
[127.0709959841, 37.4980378498]
],
"type": "LineString"
},
"id": "2",
"properties": {},
"type": "Feature"
},
{
"bbox": [127.0575764923, 37.50388931528167, 127.06371, 37.5058661453],
"geometry": {
"coordinates": [
[127.06371, 37.503915],
[127.06334826899598, 37.503895361510416],
[127.0629908618596, 37.50388931528167],
[127.06263777859095, 37.503896861313734],
[127.06228901919002, 37.50391799960665],
[127.06194458365681, 37.50395273016039],
[127.06160447199125, 37.50400105297496],
[127.0612686841934, 37.504062968050356],
[127.06093722026327, 37.50413847538659],
[127.06061008020085, 37.50422757498366],
[127.06028726400609, 37.50433026684155],
[127.05996877167905, 37.504446550960274],
[127.05965460321971, 37.504576427339835],
[127.05934475862809, 37.504719895980216],
[127.05903923790414, 37.50487695688143],
[127.05873804104792, 37.50504761004349],
[127.0584411680594, 37.50523185546637],
[127.05814861893856, 37.505429693150084],
[127.05786039368543, 37.50564112309462],
[127.0575764923, 37.5058661453]
],
"type": "LineString"
},
"id": "54",
"properties": {},
"type": "Feature"
},
{
"bbox": [127.0594632454, 37.503915, 127.06371, 37.5068438288],
"geometry": {
"coordinates": [
[127.06371, 37.503915],
[127.063428072286, 37.50398444906948],
[127.0631526350513, 37.50406330922947],
[127.06288368829593, 37.50415158048],
[127.06262123201994, 37.50424926282105],
[127.06236526622328, 37.50435635625264],
[127.0621157909059, 37.50447286077473],
[127.06187280606791, 37.50459877638736],
[127.06163631170924, 37.50473410309053],
[127.06140630782993, 37.50487884088422],
[127.06118279442991, 37.505032989768424],
[127.06096577150925, 37.50519654974316],
[127.0607552390679, 37.50536952080842],
[127.06055119710592, 37.505551902964214],
[127.06035364562325, 37.50574369621053],
[127.06016258461995, 37.50594490054737],
[127.05997801409595, 37.50615551597474],
[127.05979993405128, 37.506375542492634],
[127.05962834448597, 37.50660498010105],
[127.0594632454, 37.5068438288]
],
"type": "LineString"
},
"id": "55",
"properties": {},
"type": "Feature"
}
],
"type": "FeatureCollection"
}
},
"config": {
"id": "school_to_house_links3",
"option": {
"layer": {
"line": {
"direction": true
},
"name": "대현초등학교 통학구역",
"order": 0,
"style": [
{
"밀도": "밀도-상",
"fillColor": "#00B4D8",
"fillOpacity": 0.4,
"lineWidth": 0.1
},
{
"밀도": "밀도-하",
"fillColor": "#FF0075",
"fillOpacity": 0.4,
"lineWidth": 0.1
},
{
"밀도": "밀도-상",
"fillColor": "#00B4D8",
"fillOpacity": 0.4,
"lineWidth": 0.1
},
{
"밀도": "밀도-중",
"fillColor": "#2EC4B6",
"fillOpacity": 0.4,
"lineWidth": 0.1
},
{
"밀도": "밀도-중",
"fillColor": "#2EC4B6",
"fillOpacity": 0.4,
"lineWidth": 0.1
}
],
"visibility": true
},
"legend": {
"visibility": true,
"colName": "밀도"
}
},
"type": "layer"
}
}