Layer

[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`, `Polygon`, `MultiPolygon`
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.style[]	object[]	N	각 레이어의 추가적인 옵션을 설정
config.option.layer.style[].properties.id	string	N	속성 식별자
config.option.layer.style[].properties.center	number[]	N	레이어 중심 좌표
config.option.layer.style[].properties.tooltip	string	N	툴팁 (텍스트, html, Markdown 형식으로 작성)
config.option.layer.style[].properties.fillColor	string	N	채우기 색상 (투명색상: #FFFFFF26)	#DC3545 (빨간색)
config.option.layer.style[].properties.fillOpacity	number	N	채우기 투명도 (0-1)	0.3
config.option.layer.style[].properties.lineColor	string	N	선 색상	#FFFFFF (흰색)
config.option.layer.style[].properties.lineWidth	int	N	선 두께 (선을 그리고 싶으면 두께는 필수)	0
config.option.layer.style[].properties.lineOpacity	number	N	선 투명도 (0-1)	1
config.option.legend	object	N	지도의 범례 관련 옵션을 설정 (legend는 layer를 기준으로 자동 생성)
config.option.legend.visibility	boolean	N	범례 노출 여부	true

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;
                style:[
                    {
                        id:string,
                        center: number[],
                        tooltip: string,
                        fillColor: string,
                        fillOpacity: number,
                        lineColor: string,
                        lineWidth: number,
                        lineOpacity: number,
                    }
                ]
            }
            legend:{
                visibility: boolean,
            }
        }
    }
}

Example

{
  "section":"map",
  "contents":{
    "geojson": {
      "type": "FeatureCollection",
      "features": [
        {
          "id": "0",
          "type": "Feature",
          "properties": {
          },
          "geometry": {
            "type": "Point",
            "coordinates": [126.976254516737, 37.5513236293873]
          }
        },
        {
          "id": "1",
          "type": "Feature",
          "properties": {
          },
          "geometry": {
            "type": "Point",
            "coordinates": [126.986939193551, 37.5397896817286]
          }
        },
        {
          "id": "2",
          "type": "Feature",
          "properties": {

          },
          "geometry": {
            "type": "Point",
            "coordinates": [126.988795496316, 37.5407638175519]
          }
        },
        {
          "id": "3",
          "type": "Feature",
          "properties": {

          },
          "geometry": {
            "type": "Point",
            "coordinates": [126.989320378524, 37.5426053074582]
          }
        }
      ]
    }
  },
  "config":{
    "type": "layer",
    "id": "apt_sise",
    "option":{
      "layer":{
        "name":"APT 시세",
        "visibility":true,
        "order":1,
        "style":[
          {
            "tooltip": "단지명 : 브라운스톤남산<br>지번주소 : 서울특별시 용산구 후암동 458번지<br>구분 : 일반<br>건축년도 : 2004년<br>시세단가 : 1062만원/㎡",
            "fillColor": "#FF6600",
            "fillOpacity": 1
          },
          {
            "tooltip": "단지명 : 한신<br>지번주소 : 서울특별시 용산구 용산동2가 47-17번지<br>구분 : 일반<br>건축년도 : 1981년<br>시세단가 : 1104만원/㎡",
            "fillColor": "#FF6600",
            "fillOpacity": 1
          },
          {
            "tooltip": "단지명 : 남산대림<br>지번주소 : 서울특별시 용산구 이태원동 729번지<br>구분 : 일반<br>건축년도 : 1994년<br>시세단가 : 1703만원/㎡",
            "fillColor": "#FF6600",
            "fillOpacity": 1
          },
          {
            "tooltip": "단지명 : 이태원주공<br>지번주소 : 서울특별시 용산구 이태원동 728번지<br>구분 : 일반<br>건축년도 : 1993년<br>시세단가 : 1333만원/㎡",
            "fillColor": "#FF6600",
            "fillOpacity": 1
          }
        ]
      }
    }
  }
}

Protocol 구조​

Example​

Protocol 구조

Example