GIS Javascript library
- Openlayers
- Leaflet
Quick Start만 살펴볼께요.
프로그램 설치
- vscode
플러그인
- Prettier - Code formatter
- Open HTML in Default Browser
OpenLayers
홈페이지: https://openlayers.org/
OpenLayers 개요
- 웹 브라우저에서 지도 데이터를 표현하고 조작할 수 있는 자바스크립트 라이브러리.
- Google Maps, Bing Maps, OSM 등 오픈 데이터 사용 가능하게 라이브러리 제공.
- 지도 서버로의 접근을 OGC 표준에 의해 요청하므로 지도 서버와 독립적으로 동작.
HTML
HyperText Markup Language
- Hyper (연결형) 건너편의, 초월, 과도히, 비상한
- Markup Language - 마크로 시작해서 마크로 끝나는 언어
일반적인 형태
<tag>보이는 내용</tag>HTML 문서 해부
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
살펴볼 것들
- <!DOCTYPE html>
- <html>
- <head>
- <body>
<meta charset="utf-8">- <title>
Javascript
정적인 페이지를 동적으로 바꾸는 언어!
- 변수 자료형이 선언되지 않음
- 하지만, 세상에서 제일 많이 쓰이는 언어
Quick Start
http://openlayers.org/en/latest/doc/quickstart.html
Put a map on a page
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers example</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var lat = 37.482923;
var lon = 126.896016;
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([lon , lat]),
zoom: 4
})
});
</script>
</body>
</html>실행 화면
Vworld 로 변경
<script type="text/javascript">
var lat = 37.482923;
var lon = 126.896016;
var zoom = 17;
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/service/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat]),
zoom: zoom
})
});
</script>실행 화면
마커
마커 레이어 생성
var lat = 37.482923;
var lon = 126.896016;
var zoom = 17;
var vworldLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/service/{z}/{x}/{y}.png'
})
});
const markerSource = new ol.source.Vector();
var markerStyle = new ol.style.Style({
image: new ol.style.Icon(({
scale: 0.1,
src: 'image/marker.png'
}))
});
var markerLayer = new ol.layer.Vector({
source: markerSource,
style: markerStyle,
});마커 추가
var map = new ol.Map({
target: 'map',
layers: [
vworldLayer, markerLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat]),
zoom: zoom
})
});
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(new ol.proj.fromLonLat([lon, lat]))
});
markerSource.addFeature(iconFeature);실행 화면
Cluster
feature 생성
var lat = 37.482923
var lon = 126.896016
var zoom = 17
var vworldLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://xdworld.vworld.kr:8080/2d/Base/service/{z}/{x}/{y}.png",
}),
})
var count = 100
var features = new Array(count)
for (var i = 0; i < count; ++i) {
var coordinates = [lon + Math.random() / 100, lat + Math.random() / 100]
features[i] = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat(coordinates)),
})
}클러스터 생성
var source = new ol.source.Vector({
features: features,
})
var clusterSource = new ol.source.Cluster({
distance: 20,
source: source,
})클러스터 레이어 생성
var styleCache = {}
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function(feature) {
var size = feature.get("features").length
var style = styleCache[size]
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: "#fff",
}),
fill: new ol.style.Fill({
color: "#3399CC",
}),
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: "#fff",
}),
}),
})
styleCache[size] = style
}
return style
},
})
var map = new ol.Map({
layers: [vworldLayer, clusters],
target: "map",
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat]),
zoom: zoom,
}),
})실행 화면
