Ace-T's Blog 내 검색 [네이버 커넥트 이웃 합니다~^-^/ 요청 大 환영~~]

[GIS] openlayers+geoserver 연동하기!!

OpenSource/geoServer 2014.07.07 23:27
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


드디어! geoServer와의 만남이 있겠습니다ㅎㅎㅎ


환경은 이러합니다.

1. openLayers

2. geoServer

3. OpenStreet Map

base map은 open street이라는 것을 사용합니다.

올레맵은...DB를 구축해야 쉽게할 수 있을 것 같네요..ㅠ_ㅠ


참고 예제 : http://openlayers.org/dev/examples/osm.html



결과 : 베이스 맵에 WFS인 빨강+노란동그라미를 뿌려준 것 입니다.


geoServer는 아래의 주소로 가셔서 다운로드 받으시면 됩니다.^-^

http://geoserver.org/download/


설치는 클릭신공! 사용하시면 됩니다 ㅋㅋ





geoServer 메뉴에서 Layer Preview라는게 있습니다.(http://openlayers.or

우리가 사용할 poi를 한번 볼까요?



핵심소스 - 베이스맵 지정!


핵심소스2 - geoServer에 접근하여 poi라는 레이어를 가져오는 부분 입니다.


지금까지 초! 간단하게 geoServer의 레이어 파일로 베이스맵 위에다가 뿌려보았습니다.

지리정보시스템을 제대로 구축을 하려면..데이터가 필요 합니다. 검색엔진이든...GIS든...데이터가 무척 중요하네요..ㅎㅎㅎ


다음 시간에는 GIS 기초를 다루겠습니다. 기초튼튼!! ㅎㅎㅎ



참고 URL 


2014/07/01 - [OpenSource/geoServer] - [GIS] openlayers를 이용한 간단하게 배경 뿌리기!


2014/06/27 - [OpenSource/geoServer] - [GIS] GeoServer??? 오잉? 어떤 친구인가??


                      - END -

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

  • openlayers!! 2014.09.11 16:40 신고 답글 | 수정/삭제 | ADDR

    base맵openstreet뿌리는게잘안되서그러는데 자세히좀알수있을까요?

    • Favicon of http://acet.pe.kr BlogIcon String Ace-T 2014.09.12 11:06 신고 수정/삭제

      안녕하세요^^;
      1) geoServer 서버 기동!
      2) 예제처럼 poi로 해본다.(전부 다 되는건 아님!)
      3) 안뿌려지면 geoServer쪽에 로그를 본다.(오류가 났는지 확인!)
      4) 소스는 그냥 geoServer(img 만들어서 보내줌)연동하는게 다임!
      추신 : 한번 확인 부탁드려요~~화이팅 입니다^^;

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

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

OpenSource/geoServer 2014.07.01 00:13
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

환경 :

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 = {};

 



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


acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

  • Favicon of http://zestforlife.tistory.com BlogIcon 어떻게하는거야 2014.08.19 10:38 신고 답글 | 수정/삭제 | ADDR

    안녕하세요.
    openlayers로 daum naver 지도도 이런 방식으로 올려보려고하는데
    Olleh.js 전체 소스가 맞나요 ?
    혹시 소스정보 공유좀 부탁드려도 될까요 ?

    • Favicon of http://acet.pe.kr BlogIcon String Ace-T 2014.08.25 20:13 신고 수정/삭제

      안녕하세요~
      소스는 올레맵쪽에 맞춰져있는 것 이구요
      daum이나 naver 지도로 하시려면 그에 맞게 RESOLUTIONS 같은 것들을 맞춰주셔야 합니다~~음..daum이나 naver지도는 연동해보지 않아서 잘모르겠네요..^^;;

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

티스토리 툴바