OpenLayers 3에서 TMS 레이어 추가할 때..

[김형준(Dip2K)]

안녕하세요.

OpenLayers 3에서 ol.source.XYZ를 이용해서 TMS 형식으로 레이어를 추가하려고 합니다.

처음에 작성한 코드는 다음과 같습니다.

var map = new ol.Map(
            {
                target: 'map',
                layers: [
                    new ol.layer.Tile(
                    {
                        source: new ol.source.XYZ({
                            url: 'http://localhost:8080/{z}/{-y}/{x}.png',
                            wrapX: false,
                        })
                    })
                ],
                view: new ol.View({center: [973643, 1853619], zoom: 3 })
            });

문제 없이 아래처럼 지도가 표시되는 것을 확인  했습니다.

여기에 더해서 정확한 좌표계 매칭을 위해서 TMS의 특성값인 resolution(픽셀 당 지도 단위 값) 리스트와 경계(extent)를 지정하고자 아래의 코드를 작성해 보았는데요.

기존의 코드에서 새롭게 추가한 코드는 파랑색으로 표기하였습니다.

        var resolutions = [69.1891891892301, 34.5945945945568, 17.2972972972784, 8.64864864863921, 4.3243243242614, 2.1621621621307, 1.08108108118176, 0.540540540474467, 0.270270270295441];

        var map = new ol.Map(
            {
                target: 'map',
                layers: [
                    new ol.layer.Tile(
                    {
                        source: new ol.source.XYZ({
                            url: 'http://localhost:8080/{z}/{-y}/{x}.png',
                            wrapX: false,
                            tileGrid: new ol.tilegrid.TileGrid(
                            {
                                origin: [966265, 1823416],
                                resolutions: resolutions,
                            }),
                            extent: [966265, 1823416, 1100000, 1900000]
                        })
                    })
                ],
                view: new ol.View({center: [973643, 1853619], zoom: 3 })
            });

그런데 지도가 표시되지 않네요.

위처럼 TMS의 extent와 resolutions 값을 설정하는 코드의 사용이 옳바른 것인가요?

[김형준]

제 무지가 원인인 문제를 해결했습니다. ^^; 아래는 OL3에서 표출하고자 하는 TMS 구조를 나타내는 그림입니다.

총 9개의 단계로 구성되 있으며 Z 폴더 밑에 Y 폴더가 있고 Y 폴더 밑에 X 방향에 대한 256x256 크기의 타일맵 이미지가 png 형식으로 저장되어 있는 구조입니다.

이러한 형식으로 저장된 타일맵을 TMS 스펙을 이용하여 OpenLayers 3에서 레이어로 표시하는 코드는 아래와 같습니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

var resolutions = [     69.1891891892301, 34.5945945945568, 17.2972972972784,     8.64864864863921, 4.3243243242614, 2.1621621621307,     1.08108108118176, 0.540540540474467, 0.270270270295441 ];   var map = new ol.Map({

renderer: 'dom',

target: 'map',     layers: [         new ol.layer.Tile({             source: new ol.source.XYZ({

tileUrlFunction: function (coordinate) {                     if (coordinate == null) {                         return "";                     }                       var z = coordinate[0]+1;                     var x = coordinate[1];                     var y = coordinate[2];                       return 'http://localhost:8080/' + z + '/'                         + y + '/' + x + '.png';

},                 tileGrid: new ol.tilegrid.TileGrid({                     origin: [966265, 1823416],                     resolutions: resolutions

}),

})         })     ],     view: new ol.View({

center: [977575, 1823685],         maxZoom: 19,         minZoom: 11,         maxResolution: 69.1891891892301,         minResolution: 0.270270270295441,         zoom: 19     }) });

위의 코드에 대한 실행 화면은 아래와 같습니다.

2015년 7월 22일 오후 6:11, 김형준(Dip2K) <korea.gis...@gmail.com>님이 작성:

--
이 메일은 Google 그룹스 'OSGeo(Open Source GeoSpatial) 한국어 지부 - OSGeo Korean Chapter' 그룹에 가입한 분들에게 전송되는 메시지입니다.
이 그룹에서 탈퇴하고 더 이상 이메일을 받지 않으려면 osgeo-kr+u...@googlegroups.com에 이메일을 보내세요.
이 그룹에 게시하려면 osge...@googlegroups.com에 이메일을 보내세요.
http://groups.google.com/group/osgeo-kr에서 이 그룹을 방문하세요.
더 많은 옵션을 보려면 https://groups.google.com/d/optout을(를) 방문하세요.