본문 바로가기
OpenSource/geoServer

[GIS] openlayers를 이용한 간단하게 배경 뿌리기!

by 태하팍 2014. 7. 1.
반응형

환경 :

Window 7 회사 PC ㅋㅋ

openlayers 2.12

ollehMap 


굿보이

openlayers&Olleh Map을 사용!(개인은 무료라고 하네요 오예!)


openlayers : http://openlayers.org/download/     사용버전은 2.12~!


ollehMap   :  http://dev.ktgis.com/



[Result]

setting base picture with openLayers :D


알아두면 좋은 용어!

# Raster

 - Zoom Level, 정적인 표현

 - 이미지(깨짐) 

 - zoomin/out : 새로운 지도 데이터 로딩

 

# Vector

 - Zoom Level 보다는 Scale을 이용(안깨짐), 동적인 표현

 - 새롤운 지도데이터를 이용하여 Redraw



Source 대해 알아보도록 하겠습니다. ^-^

1) Dir 구성하기

    대충 이런식으로 폴더를 구성 합니다.  D:\gis\dev\js


2) OpenLayers 사용 -  다운 URL : http://openlayers.org/download/

OpenLayers-2.12.zip 을 다운 받아서 OpenLayers-2.12 디렉토리(D:\gis\OpenLayers-2.12\OpenLayers-2.12\lib)에 lib를 복사&붙여넣기(D:\gis\dev\js아래에)


즉, D:\gis\dev\js 

    ㄴ lib

로 구성 되어집니다.


3) OpenLayers에 Olleh Map관련 Layer가 없으므로 Layer를 하나 만들어 줍니다.

    어떻게 만들 것인가?? OpenLayers를 보면 구글맵 관련 Layer가 있습니다.

    이녀석을 커스트마이징 합니다.


D:\gis\dev\js\lib\OpenLayers\Layer 에보시면 Google.js 가 있습니다.

복사 하신 뒤에 복사본을 Olleh.js의 이름으로 생성 합니다.



아....회사에서는... https://gist.github.com/acetaeha 에 소스를 올리지를 못하네요..ㅠ.ㅠ..OTL=3=3


HTML Source

<!DOCTYPE html>

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

   <meta name="apple-mobile-web-app-capable" content="yes"/>

   <title>GIS TEST</title>


   <script type="text/javascript" src="https://api.ktgis.com:10083/v3/olleh/mapAPI.js?key=블라블라=&module=[Map,Geocoder,Directions]"></script>

   <script type="text/javascript" src="./js/lib/OpenLayers.js"></script>

<script type="text/javascript" src="./js/BitGIS/BitGISMain.js"></script>

<link type="text/css" rel="stylesheet" href="css/bitmap.css" />

   

  <script type="text/javascript">

              var bitMap;

              function initailize() {

              bitMap = BitMap.getInstance('mapBit');

                   }

               </script>

</head>

  <body onload="initailize()">

  <div id="mapBit"></div>

    </body>

</html>



기존의 OpenLayers.js 에는 Ollehmap 레이어를 추가
 
    if(!singleFile) {
        if (!jsFiles) {
            jsFiles = [
              "OpenLayers/Layer/Olleh.js",

당근 Olleh.js를 만들어줘야 한다. OpenLayers는 GoogleMap 기반으로 되어있다. 

Olleh.js : Google.js -> Olleh.js

/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for  

* full list of contributors). Published under the 2-clause BSD license.

* See license.txt in the OpenLayers distribution or repository for the

* full text of the license. */



/**

* @requires OpenLayers/Layer/SphericalMercator.js

* @requires OpenLayers/Layer/EventPane.js

* @requires OpenLayers/Layer/FixedZoomLevels.js

* @requires OpenLayers/Lang.js

*/


/**

* Class: OpenLayers.Layer.Olleh

 * Provides a wrapper for Olleh's Maps API

* Normally the Terms of Use for this API do not allow wrapping, but Olleh

* have provided written consent to OpenLayers for this - see email in 

 * http://osgeo-org.1560.n6.nabble.com/Olleh-Maps-API-Terms-of-Use-changes-tp4910013p4911981.html

 * Inherits from:

*  - <OpenLayers.Layer.SphericalMercator>

*  - <OpenLayers.Layer.EventPane>

*  - <OpenLayers.Layer.FixedZoomLevels>

*/

OpenLayers.Layer.Olleh = OpenLayers.Class(

    OpenLayers.Layer.EventPane, 

    OpenLayers.Layer.FixedZoomLevels,      {

                     

           DEFAULTS: {

               projection: new OpenLayers.Projection("EPSG:1000003006")         // UTM-K (GRS80) : EPSG:5179     SR-ORG:7165

           },

        

    /** 

     * Constant: MIN_ZOOM_LEVEL

     * {Integer} 0 

     */

    MIN_ZOOM_LEVEL: 0,

    

    /** 

     * Constant: MAX_ZOOM_LEVEL

    * {Integer} 21

     */

    MAX_ZOOM_LEVEL: 13,

    

    isFixced : true,


    /** 

     * Constant: RESOLUTIONS

     * {Array(Float)} Hardcode these resolutions so that they are more closely

     *                tied with the standard wms projection

    */    

    RESOLUTIONS: [

                2048,

                1024,

                512,

                256,

                128,

                64,

                32,

                16,

                8,

                4,

                2,

                1,

                0.5,

                0.25

            ],

            

    maxExtent: new OpenLayers.Bounds(-66406, 1214781, 1981594, 2648381),

     

    /**

     * APIProperty: type

     * {GMapType}

     */

    type: null,


    /**

     * APIProperty: wrapDateLine

     * {Boolean} Allow user to pan forever east/west.  Default is true.  

     *     Setting this to false only restricts panning if 

     *     <sphericalMercator> is true. 

     */

    wrapDateLine: false,

    

    sphericalMercator: false,


    /**

     * APIProperty: sphericalMercator

     * {Boolean} Should the map act as a mercator-projected map? This will

     *     cause all interactions with the map to be in the actual map 

     *     projection, which allows support for vector drawing, overlaying 

     *     other maps, etc. 

     */

    

    animationEnabled : true,

    

    units: 'm',


           directionsService: null,

           

           // [dolship] V3¿ë ollehMap Option

           ollehMapOptions : null,

           

   ..........................


    setIsScaleControllerVisible: function (isScaleVisible) {

          // [dolship] V2 -> V3

          /*

        var mapOptions = { scaleControl: isScaleVisible };

        this.mapObject.setOptions(mapOptions);

        */

          this.ollehMapOptions.scaleControl = isScaleVisible;

    },


    CLASS_NAME: "OpenLayers.Layer.Olleh"

});


/**

* Property: OpenLayers.Layer.Google.cache

* {Object} Cache for elements that should only be created once per map.

*/

OpenLayers.Layer.Olleh.cache = {};

 



음....맥북에 설치해서 다시 정리 해야겠다..ㅠ ㅠ 


반응형