환경 :
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> |
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 = {};
|
BitMap.js'OpenSource > geoServer' 카테고리의 다른 글
| 스텝3) naver map api 호출 해보기! (0) | 2023.08.02 |
|---|---|
| 스텝2) setup web application for naver maps (0) | 2023.08.01 |
| 스텝1) 네이버 지도 api를 사용해보자:) (0) | 2023.07.31 |
| [GIS] openlayers+geoserver 연동하기!! (2) | 2014.07.07 |
| [GIS] GeoServer??? 오잉? 어떤 친구인가?? (0) | 2014.06.27 |
