D2Map API User Reference Guide v1.0.0

개요

D2Map API는 편리한 웹 상황도 개발을 지원하는 JavaScript API를 정의하고 있다.
D2Map API는 지도관리, 좌표계관리, 좌표이동, 지명검색, 그리드(grid)관리, 측정관리, 지형분석관리, 화면저장, 상황도, Spatial Query, 투명도 작성/저장/불러오기, 투명도표준지원(MND-STD-0022), 한국군표준군대부호(MND-STD-2525C), 다양한 스타일 관리 등을 모두 지원한다.

메뉴 설명

• Search : 문서 내 검색
• Home : D2Map API 주요 기능 소개
• Classes : D2Map 클래스(생성자, 멤버함수, 예제소스) 소개

사용 방법

• D2Map 엔진 선언

  • d2map.min.js, d2map.min.css 파일 등을 html 파일에 선언
  • 예 : index.html에 다음과 같이 선언한다.

    //D2Map 엔진 내부에서 사용되는 CSS 선언
    <link rel="stylesheet" href="src/lib/css/ol.css">
    <link rel="stylesheet" href="src/lib/css/d2map.ui.css">
    <link rel="stylesheet" href="src/lib/css/d2map.ui.editor.css">
    <link rel="stylesheet" href="src/lib/css/d2map.ui.ms.popup.css">
    <link rel="stylesheet" href="src/lib/css/zTreeStyle.css">
    <link rel="stylesheet" href="src/lib/css/sub.dark.css">
    //투명도 글상자 활용을 위한 경로 설정
    <script>
        window.CKEDITOR_BASEPATH = '/src/lib/js/d2editor/';
        let encoding = document.characterSet;
        if ( encoding !== "UTF-8") encoding = "UTF-8";
    </script>
    //D2Map 엔진 선언
    <script src="src/lib/js/d2map.min.js" charset=`${encoding}`></script>
    

• D2Map API 호출

  • D2Map API "D2.Core"를 최상위 전역 Name Space로 갖고 있다.
  • API에서 정의한 객체 사용 시 method 앞에 "D2.Core"를 붙여서 사용해야 한다.
  • 예 : 배경지도 서비스 구성, 지도 객체 및 투명도 레이어 생성 등은 다음과 같이 호출한다.

      var ol = D2.Core.ol;
    
      // 대한민국 중심좌표를 초기 화면으로 설정
      var olCenter = ol.proj.fromLonLat([127.027583, 37.497928]);
    
      // ol 기반 window.map 객체 생성
      window.map = new ol.Map({
        controls: ol.control.defaults({
          zoom: false,
        }),
        // 지도를 표시할 요소 ID
        target: 'map',
        layers: [ // 기본 지도 레이어 설정 (World Map)
          new ol.layer.Tile({
            preload: Infinity,
            source: new ol.source.XYZ({
              url: urlInfo.map.baseLayer, // 기본 지도 설정 - url은 사이트에 맞게 변경
              crossOrigin: 'Anonymous',
              minZoom: 0,
              maxZoom: 10,
            }),
          }),
        ],
        view: new ol.View({
          center: olCenter,
          zoom: 8,
          minZoom: 0,
          maxZoom: 17,
        }),
        interactions: ol.interaction.defaults({ //Interaction 정의
          doubleClickZoom: false,
          altShiftDragRotate: false,
          shiftDragZoom: false,
          pinchRotate: false,
          pinchZoom: false,
          keyboard: false
        })
      });
    
      // URL 관리 모듈 생성
    	  window.D2MapManager = new D2.Core.D2MapManager();
    
      // 좌표 관리 모듈 생성
      window.Coordinate = new Coordinate(window.D2MapManager.LAYER_TERRAIN_WINDOWS, true);
      window.Coordinate.setGt2Provider(window.D2MapManager.LAYER_TERRAIN_GT2, 0, 15);
    
      // 투명도 레이어 생성
      window.graphic = new Graphic(map, new window.D2.Core.GraphicSelectObjectManager, new window.ICOPS.MSObjectCreator());
      window.graphic.loadStdXSD(urlInfo.graphic.overlay);
    
      // 투명도 군대부호 Tree 생성
      window.MilSymbol = new ICOPS.MilSymbol(window.graphic, urlInfo.D2MS);
      window.MilSymbol.initMilSymbolLang('d2map_tree-container');
    

  • 상세한 내용은 관련 클래스를 참조한다.

• OpenLayers API 호출

  • D2Map은 OpenLayers 6.4.3를 기반으로 엔진이 개발되어 있다.

  • OpenLayers 주요 객체는 "D2.Core"의 member로 설정되어 있어 직접 호출도 가능한다.

  • 예 : ol/proj 모듈의 fromLonLat() 함수를 호출한다고 가정할 때, 다음과 같이 호출한다.

      D2.Core.ol.proj.fromLonLat();
    

  • 상세한 내용은 관련 클래스를 참조한다.

참고

• OpenLayers v6.4.3 API Documentation