~~REVEAL night~~
—→
>
### GIS Javascript library
Quick Start만 살펴볼께요.
https://wiki.wrnd.ml/open/openlayers
—→
>
### 프로그램 설치
—→
>
# OpenLayers
홈페이지: https://openlayers.org/
—→
>
## OpenLayers 개요
—→
>
## HTML
HyperText 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>
—→
<meta charset="utf-8"><notes>
<!DOCTYPE html> — doctype. 아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤), doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는) good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미하였습니다. 하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐입니다. 지금은, 그게 알아야 할 전부 입니다.<html></html> — <html> 요소. 이 요소는 페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 합니다.<head></head> — <head> 요소. 이 요소는 HTML 페이지에 포함되어 있는 모든 것들(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)의 컨테이너 역할을 합니다. 여기에는 keywords와 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.<body></body> — <body> 요소. 이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.<meta charset="utf-8"> — 이 요소는 문서가 사용해야 할 문자 집합을 utf-8으로 설정합니다(utf-8 문자 집합에는 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있습니다). 본질적으로 여러분이 사용할 수 있는 어떠한 문자 컨텐트도 다룰 수 있습니다. 이 문자 집합을 설정하지 않을 이유가 없으며, 그렇게 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있습니다.<title></title> — <title> 요소. 이 요소는 페이지의 제목을 설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.</notes>
—→
정적인 페이지를 동적으로 바꾸는 언어!
—→
>
## Quick Start
http://openlayers.org/en/latest/doc/quickstart.html
—→
<!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>
—→
—→
<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
—→
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,
}),
})
—→
—→
>
### 감사합니다.
—→
>
—