~~NOCACHE~~
~~REVEAL night~~
---->>
### GIS Javascript library
- Openlayers
- Leaflet
Quick Start만 살펴볼께요.
https://wiki.wrnd.ml/open/openlayers
---->>
### 프로그램 설치
- vscode
\\
#### 플러그인
- Prettier - Code formatter
- Open HTML in Default Browser
---->>
# OpenLayers
홈페이지: https://openlayers.org/
---->>
## OpenLayers 개요
- 웹 브라우저에서 지도 데이터를 표현하고 조작할 수 있는 자바스크립트 라이브러리.
- Google Maps, Bing Maps, OSM 등 오픈 데이터 사용 가능하게 라이브러리 제공.
- 지도 서버로의 접근을 OGC 표준에 의해 요청하므로 지도 서버와 독립적으로 동작.
\\
https://www.slideshare.net/jinifor/5open-layers
---->>
## HTML
HyperText Markup Language
- Hyper (연결형) 건너편의, 초월, 과도히, 비상한
- Markup Language - 마크로 시작해서 마크로 끝나는 언어
\\
#### 일반적인 형태
```
보이는 내용
```
---->>
## HTML 문서 해부
```
My test page
```
\\
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web
---->
### 살펴볼 것들
-
-
-
-
- ``
-
<WRAP lo right>https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web</WRAP>
<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>` — `` 요소. 이 요소는 페이지의 제목을 설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
</notes>
---->
### Javascript
정적인 페이지를 동적으로 바꾸는 언어!
- 변수 자료형이 선언되지 않음
- 하지만, 세상에서 제일 많이 쓰이는 언어
\\
<WRAP lo>https://madnight.github.io/githut/#/pull_requests/2018/1</WRAP>
---->>
## Quick Start
http://openlayers.org/en/latest/doc/quickstart.html
---->
### Put a map on a page
```
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers example
My Map
```
---->
### 실행 화면
---->
### Vworld 로 변경
```
```
---->
### 실행 화면
---->>
## 마커
---->
### 마커 레이어 생성
```
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,
}),
})
```
---->
### 실행 화면
---->>
### 감사합니다.
---->>
```
\\