[OpenLayers] Static Image 사용 방법

[OpenLayers] Static Image 사용 방법Language/JavaScript2022. 12. 21. 10:08@고지니어스

Table of Contents

OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다.

OpenLayers 3 버전을 사용하였습니다.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Static Map Example</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css"
    />
    <style>
      .map {
        width: 100%;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Script

// main.js

// 지도 정보
const mapInfo = {
  map: null,
  extent: null,
  projection: null,
  setProjection: function (w, h) {
    this.extent = [0, 0, w, h];
    this.projection = new ol.proj.Projection({
      code: 'pixel',
      units: 'pixels',
      extent: this.extent,
    });
  },
  init: function (imageName) {
    const view = new ol.View({
      projection: this.projection,
      center: ol.extent.getCenter(this.extent),
      zoom: 2,
      maxZoom: 8,
    });

    const imageLayer = new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'images/' + imageName,
        imageSize: [this.extent[2], this.extent[3]],
        projection: this.projection,
        imageExtent: this.extent,
      }),
    });

    this.map = new ol.Map({
      target: 'map',
      layers: [imageLayer],
      view: view,
    });

    this.zoomFit();
  },
  zoomFit: function () {
    this.map.getView().fit(this.extent, { duration: 200 });
  },
};

// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function () {
  const width = 500;
  const height = 500;
  const imageName = 'image.png';

  mapInfo.setProjection(width, height);
  mapInfo.init(imageName);
});

OpenLayers 활용 라이브러리입니다.

ol.proj.Projection
ol.View
ol.layer.Image
ol.source.ImageStatic
ol.Map

결과

Static Image 가 지정한 크기의 지도 중앙에 가시화됩니다.

참고

https://openlayers.org/en/latest/examples/static-image.html

저작자표시

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

[OpenLayers] Feature Drag and Drop (0)	2022.12.27
[OpenLayers] Custom Icon Feature 추가 (0)	2022.12.26
[JavaScript] 주민등록번호 유효성 검사 (0)	2022.11.08
[JavaScript] IE에서 작동하지 않는 BLOB 다운로드 (0)	2022.11.02
[JavaScript] 모달에서 이미지 및 동영상 출력 (0)	2022.09.25