openlayers-3openlayers 시작하기 -3


비고

이 섹션에서는 openlayers-3의 개요와 개발자가 왜 그것을 사용하고 싶어하는지에 대한 개요를 제공합니다.

또한 openlayers-3 내의 큰 주제를 언급하고 관련 주제와 연결됩니다. openlayers-3에 대한 문서는 새롭기 때문에 관련 주제의 초기 버전을 만들어야 할 수도 있습니다.

Bing Maps 사용 예제

var baseLayer = new ol.layer.Tile({
    visible: true,
    preload: Infinity,
    source: new ol.source.BingMaps({
        // We need a key to get the layer from the provider. 
        // Sign in with Bing Maps and you will get your key (for free)
        key: 'Ap9VqFbJYRNkatdxt3KyzfJxXN_9GlfABRyX3k_JsQTkMQLfK_-AzDyJHI5nojyP',
        imagerySet: 'Aerial', // or 'Road', 'AerialWithLabels', etc.
        // use maxZoom 19 to see stretched tiles instead of the Bing Maps
        // "no photos at this zoom level" tiles
        maxZoom: 19
    })
});

var map = new ol.Map({ 
    layers: [baseLayer],
    target: 'map', 
    controls: ol.control.defaults({ 
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }),
    view: new ol.View({ 
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2 
    })
});
 

간단한지도 시작하기

<html>
  <head>
    <title>Getting started</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var baseLayer= new ol.layer.Tile({ //a Tile layer is a the background layer for the map
        // here we choose an OpenStreetMap base layer
        source: new ol.source.OSM({
          url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
        }) 
      });

      var map = new ol.Map({ // we create our map
        layers: [baseLayer], // and add the layers to it ( in our case we only have one)
        target: 'map', // the div element that will serve as a map
        controls: ol.control.defaults({ // we leave the map controls to default
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({ // we define the initial view of the map
          center: ol.proj.fromLonLat([0, 0]), //the default projection is the spherical mercator (meter units) so we get coordinates of the center by degrees
          zoom: 2 // the initial zoom level
        })
      });
    </script>
  </body>
</html>
 

설치 또는 설정

OpenLayers 3 또는 참조 된대로 OL-3은 웹 매핑 용 Javascript 라이브러리이므로 사용하려면 html로 추가해야합니다.

  • 먼저 ol.css 파일을 추가하여 OL-3의 맵 스타일을 사용하십시오.

  • ol.js 파일을 추가하십시오.

공식 사이트 인 www.openlayers.org에서 OL-3을 다운로드하고 src 및 href를 변경하여 html 파일을 호출 할 수도 있습니다

OL-3 설정

<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">

<script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>