시작하기

간단한 지도를 통해 시작해보세요

1. HEAD부분에 ol.js / ol.css / orange-gws.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>

2. BODY에 DIV태그를 추가하고 id를 map으로 지정합니다.

  <!-- index.html -->
  <div id="map"></div>

3. 맵을 생성하는 코드 작성

/* index.js */

const config = {
  userId: "P111630", // orange gws user id; bookmark, my지도 등에서 사용
  apiKey: "6cd1ff1a-c6f7-4a15-a91b-c34b186c8471", // orange gws api key, 허가받은 API_KEY
  gdxOwner: "moira", // API_KEY를 부여받은 소유자
  //url: "http://localhost:4321/orange_gws", // orange gws url
  url: "https://docs.stlogic.co.kr/gws-js/orange_gws",
  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_MAPS.OSM.STANDARD }],
        },
      ],
      custom_maps: [ // 커스텀맵 레이어 설정
        {
          title: "OSM.CYCLOSM",
          group: [{ title: "GROUP.OSM.CYCLOSM", layer: OrangeGwsJS.BASE_MAPS.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);
  });

실행해보기

ORANGE-GWS-JS DOWNLOAD