컨텐츠로 이동

시작하기

간단한 지도를 통해 시작해보세요
  1. HEAD부분에 ol.js / ol.css / orange-gws-js.js를 추가합니다.
  <!-- index.html -->
  <script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">
  <script src="./dist/orange-gws.js" type="text/javascript" defer></script>
  <script type="text/javascript" src="./js/index.js" defer></script>
  1. BODY에 DIV태그를 추가하고 id를 map으로 지정합니다.
  <!-- index.html -->
  <div id="map"></div>
  1. 맵을 생성하는 코드 작성
/* index.js */

const config = {
  userId: "P111630", // orange gws user id; bookmark, my지도 등에서 사용
  apiKey: "8fe1bfa6-9c33-478a-a15b-b6553737bd86", // orange gws api key, 허가받은 API_KEY
  gdxOwner: "moira", // API_KEY를 부여받은 소유자
  url: "http://localhost:4321/orange", // orange gws url
  gdxNames: ["SVC_STLOGIC.xml"],  // SVC_STLOGIC.xml | MOIRA.xml
};

const gwsJS = new OrangeGwsJS(config.url, config.gdxNames, {
    logLevel: "info", // "info" | "debug", 필요에 따라 사용
    userId: config.userId,
    apiKey: config.apiKey,
    gdxOwner: config.gdxOwner,
    map: {
      ol: { // OpenLayers에 관련된 옵션
        view: { // OpenLayers View에 관련된 옵션
          center: [126.977881669, 37.566277263], // 초기 중심 좌표
          zoom: 15, // 초기 줌 레벨
          minZoom: 7, // 최소 줌 레벨
          maxZoom: 20, // 최대 줌 레벨
          projection: "EPSG:5179", // 화면 좌표계 명칭
        },
        map: { // OpenLayers Map에 관련된 옵션
          controls: ["zoom"], // "zoom", "zoomSlide", "scaleLine", "rotate"
          target: "map", // map을 표시할 div의 id
          rotate: true, // 회전기능 사용여부
        },
      },
      base_maps: [ // 배경맵 레이어 설정
        },
        {
          title: "OSM.STANDARD",
          group: [{ title: "GROUP.OSM.STANDARD", layer: OrangeGwsJS.BASE_MAP.OSM.STANDARD }],
        },
      ],
      custom_maps: [ // 커스텀맵 레이어 설정
        {
          title: "OSM.CYCLOSM",
          group: [{ title: "GROUP.OSM.CYCLOSM", layer: OrangeGwsJS.BASE_MAP.OSM.CYCLOSM }],
        },
      ],
      img_url: { // gdx image 경로 변경 옵션
        from: "/images/", to: "./images/" 
      },
      web_font: [ // 폰트 관련된 옵션
        "NanumSquare"
      ], // 영문, 한글
    },
  });
  
  
  // 모든 정보가 로드된 후 1회만 호출된다.
  gwsJS.getEvents().once(OrangeGwsJS.EVENT_NAMES.LOADED, () => {
      const toc = gwsJS.getTOC();
      toc.setCheckBaseMapByTitle("OSM.STANDARD", true);
      // toc.setCheckBaseMapByTitle("OSM.CYCLOSM", false);
  });
실행해보기