OpenLayers 시작하기

     

    OpenLayers 시작하기

     

     

      OpenLayers 란?

     지도 api 중 하나이며, 기본적으로 js 기반으로 만들어진 api입니다.

     

    별도로 key등록은 없으며, 무료로 지도 정보를 제공받을 수 있습니다.

     

     

     

      OpenLayers 시작하기

     

     OpenLayears를 시작하기 위해서는 아래의 주소를 클릭해주세요.

     

    https://openlayers.org/

     

    OpenLayers - Welcome

    A high-performance, feature-packed library for all your mapping needs.

    openlayers.org

     

    해당 사이트를 접속하시게 된다면 아래의 위치를 클릭하셔서 host를 가져옵니다.

     

     

    01. 사이트에서 Version을 클릭한다.

     

     

     

    02. 해당 사이트에서 필요한 정보를 가져온다.

    OpenLayers를 사용하는 방법과 라이브러 및 소스를 제공해주고 있다.

    우리는 css와 js만 필요하므로 두 번째 방법을 택할 것이고

    여기서 Libary에만 관심이 있으므로 아래의 v6.6.1-dist.zip를 설치받도록 합니다.

     

     

    03. HTML에 다운로드한 Libary를 연결합니다.

    사진처럼 각 css와 js에 라이브러리를 연결시키도록 합니다.

     

     

     

      소스 공유하기

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>OpenLayers</title>
    
        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" href="./libs/v6.6.1-dist/ol.css">
    </head>
    <body>
        <script src='./main.js'></script>
        <script src='./libs/v6.6.1-dist/ol.js'></script>
    </body>
    </html>

     해당 내용은 html과 Libary 다운로드만 다뤘습니다.

     

     

     

    OpenLayers의 기본 설정이 끝났습니다.

    반응형

    'Web > JavaScript' 카테고리의 다른 글

    OpenLayer, 한국에 익숙한 Layer 소개  (0) 2021.10.09
    OpenLayer, 좌표 등록하기  (0) 2021.10.08
    OpenLayer, Vector 적용하기  (0) 2021.08.31
    OpenLayers 지도 설정하는 방법  (0) 2021.08.25
    OpenLayers 지도 불러오기  (0) 2021.08.25

    댓글

    Designed by JB FACTORY