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을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

[GIS] GeoServer??? 오잉? 어떤 친구인가??

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



프로젝트 오픈을 하고....자리를 옮기고 나니 맥북을 꺼내질 못한다..ㅠㅠ..왕눈치가 보이는구나ㅋㅋ..

anyways..어제부터 gis도(?) 하라고 해서 차근차근 정리 해보려고 한다.

사실 지금 개인프로젝트 하는데 한번 붙여보고싶어서이기도 하다 ㅋㅋㅋ 

음..그런데 오라클 Spatial을 돈주고 사서 사용한다고 하던데..개인은 공짜로 해주려나..ㅎㅎ;아무튼 정리 ㄱㄱ~


OpenLayers, geoServer, ollehMap 등을 사용한다. 포스팅에서는 회사관련된 것은 쇽쇽~빼버리고 포스팅을 하겠다ㅋ

 


우선은 자바로 만들어진 오픈소스를 사용한다.  opensource geoServer

http://geoserver.org/


예전 GIS구축 때는 클라이언트에서 이미지를 생성하였는데 오픈소스 geoServer를 도입하여 요 오픈소스가 이미지를 생성한다고 한다.



GeoServer는 지리공간 데이터를 공유하고 편집할 수 있는 Java로 개발된 오픈 소스 GIS 소프트웨어 서버이다. 상호운용성을 전제로 개발되었기 때문에, 개방형 표준을 사용하여 다양한 공간 데이터 소스를 서비스할 수 있게 한다.

GeoServer는 커뮤니티 기반 프로젝트이기 때문에, 전 세계의 개인과 기관의 다양한 그룹에 의해 개발, 테스트 및 지원된다.

GeoServer는 Web Map Service(WMS) 뿐만 아니라 Open Geospatial Consortium(OGC) Web Feature Service(WFS), Web Coverage Service(WCS) 그리고 Web Processing Service(WPS) 표준에 대한 참조 구현이기도 하다. GeoServer는 지리공간 웹(GeoSpatial Web)의 핵심 컴포넌트를 구성한다.

출처 : http://ko.wikipedia.org/wiki/GeoServer


Spatial Operators의 내용이 있는 docs Link!

http://docs.oracle.com/cd/E16655_01/appdev.121/e17896/sdo_operat.htm#SPATL1028


DE-9IM 알고리즘

http://en.wikipedia.org/wiki/DE-9IM


GIS 재미나는 Site

http://map.daum.net/3d/

http://www.openstreetmap.org/#map=13/37.2393/127.4735&layers=QD

여기까쥐~~


저작자 표시 비영리 변경 금지
신고

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

설정

트랙백

댓글

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

티스토리 툴바