본문 바로가기
GIS/OpenLayers

[OpenLayers] 지도에 스케일(scale) 표시하기 (ft. Scale control, ol-ext)

by 썸머워즈 2020. 8. 6.
반응형


- OpenLayers를 이용하여 Map위에 스케일(scale) 표시하기 -


앞서 배경지도 vworld를 띄웠으며


지도만 있으면 허전하니 그럴싸하게 만들어보자


우선 스케일(scale)를 표시할 수 있게 간단하게 지원을 해주고있는데


 ol-ext 라고 openlayers-extensions 가 존재한다.


openlayers를 이용하여 여러가지 기능이 입혀져있는것을


우리가 가져다 쓰면된다.


<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: [14126669.41589247, 4493404.190498611],
zoom: 7,
minZoom: 7,
maxZoom: 19
})
});

// Control
var ctrl = new ol.control.Scale({ });
map.addControl(ctrl);
map.addControl(new ol.control.ScaleLine());
</script>



지도 배경지도 띄우는건 앞서 해봤고


지도를 담아둔 변수 위 예제에서는 map 변수이다.


이 map 변수에 Scale 을 보여주는 Control을 추가해주기만 하면 끝이다.(아래 3줄)


추가적으로 설명하자면 아래 3줄 중에서 


var ctrl = new ol.control.Scale({  });

    map.addControl(ctrl);


이부분은 사진에서 흰색바탕을 가진(1/3,668,700) scale 이며


map.addControl(new ol.control.ScaleLine());


이부분은 아래에 [100km] 라고 쓰여있는 scale이다.


코드 예제 아래에 컨트롤 3줄을 사용하기 위해서는 ol-ext 에서 제공하는 js와 css가 필요하다.


<link rel="stylesheet" href="../testPrj/ol-ext.css" />
<script type="text/javascript" src="../testPrj/ol-ext.js"></script>


이런식으로 선언을 해주었는데 파일은 못찾겠고 그냥 ol-ext 사이트에서 가져오면 된다.


https://viglino.github.io/ol-ext/?q=scale


여기거 ol-ext 사이트지만 scale을 검색한 결과이다.


여기에 들어가서 js 와 css의 소스를 가져왔다.





그 외의 여러가지 기능들을 제공해주는


ol-ext


여기를 통해 쉽고 유용하게 이것저것 적용시켜보자.



반응형


댓글

TOP