Seonglae ChoObject
- npm 이나 yarn 으로 openlayer프로젝트를 만들고 공공 wms를 제공하는 여러 사이트에서 프로젝트를 만들어봐야 할 것 같다
[Vue, Express] Vue와 Express로 간단한 웹 개발하기 1
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 오늘은 Vue와 Express.js를 활용하여 간단한 웹 페이지를 구현해보도록 하겠습니다. 프론트엔드는 Vue를 사용하며, 백엔드는 Express를 사용합..
https://kjwsx23.tistory.com/197
![[Vue, Express] Vue와 Express로 간단한 웹 개발하기 1](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F9993E24D5C4BFD641E)
WMTS
import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import {getWidth, getTopLeft} from 'ol/extent'; import TileLayer from 'ol/layer/Tile'; import {get as getProjection} from 'ol/proj'; import OSM from 'ol/source/OSM'; import WMTS from 'ol/source/WMTS'; import WMTSTileGrid from 'ol/tilegrid/WMTS'; var projection = getProjection('EPSG:3857'); var projectionExtent = projection.getExtent(); var size = getWidth(projectionExtent) /
https://openlayers.org/en/latest/examples/wmts.html
[OpenLayers] 타일 방식의 DEM 데이터 가시화
Tile 방식은 지도를 인터넷에서 효율적으로 받아 빠르게 표시하기 위한 방식으로 주로 png나 jpg와 같은 이미지 형식이다. 그런데 이 Tile 방식의 이미지에 표고값을 저장해 서비스하기도 한다. 대표적인 경우가 MapBox에서 제공하는 타일방식의 DEM 서비스이다. 이 글은 ol을 이용해 타일방식으로 서비스 되는 DEM 데이터를 이미지 개념으로 그대로 화면에 표시하는 내용이다.
http://www.gisdeveloper.co.kr/?p=6261
![[OpenLayers] 타일 방식의 DEM 데이터 가시화](http://www.gisdeveloper.co.kr/wp-content/uploads/2019/03/dem_xyz.png)
오픈소스GIS 개론 과정 - OpenLayers 기초
Published on 오픈소스GIS 개론 과정 (주)망고시스템 박주용 (jya1210@gmail.com) 이한진 (jinifor@gmail.com) 1. (주)망고시스템 박주용 (jya1210@gmail.com) 이한진 (jinifor@gmail.com) 2. 목차 1. OpenLayers 개요 5. 사용자 그리기 2. Map 기본 설정 1) 도형 그리기 3. Layer 2) 도형 선택, 삭제 1) WMS Layer 6. 속성정보 조회 2) Overlay Layer 7.
https://www.slideshare.net/jinifor/5open-layers
2. qgis로 wmts, wms 오픈 실습
GGRS: Geoscience, GIS, & Remote Sensing
http://blog.daum.net/geoscience/1005
postgis
Publishing a PostGIS table - GeoServer 2.16.x User Manual
This tutorial walks through the steps of publishing a PostGIS table with GeoServer. Note This tutorial assumes that PostgreSQL/PostGIS has been previously installed on the system and responding on on port , and also that GeoServer is running at http://localhost:8080/geoserver . First let's gather that the data that we'll be publishing.
https://docs.geoserver.org/stable/en/user/gettingstarted/postgis-quickstart/index.html
geoserver document를 처음부터 읽어나가기 시작했는데 여기서 postgis실습시작!
이걸로 데이터 넣고
shp했던거처럼 스토어를 만들고~
레이어로 퍼블리쉬!
잘 나온다. 이제 저 코드들을 프론트에서 짜야지
추가로 가상머신에도 postgis
Apt
The PostgreSQL Global Development Group (PGDG) maintains an APT repository of PostgreSQL packages for Debian and Ubuntu located at http://apt.postgresql.org/pub/repos/apt/. We aim at building PostgreSQL server packages as well as extensions and modules packages on several Debian/Ubuntu releases for all PostgreSQL versions supported.
https://wiki.postgresql.org/wiki/Apt
여기 참고해서 설치 후에
db만 gis로 만들어두기!
pgadmin 은 실패...
node
노드(npm, yarn)을 굉장히 많이 사용해 왔지만 노드가 뭔지에 대한 고민을 안하고있었다!
노드가 서버에만 쓰이는건지.. 아니 근데 나는 프론트엔드도 npm, yarn으로 만들었는데 벡엔드용 인건가?
그러다가 발견한 비유
노드는 언어는 아니고 런타임이라고 공식 문서에도 나와있는데
써본 경험으로는 js 실행기? 같은 느낌이다. 근데 그거로 실행하면 기본적으로 http 모듈을 포함하니까 서버용이라는건데..
사실 여러 패키지가 있어서 다른 용도로도 많이 사용된다
예를 들어 vue-cli가 대표적인데, 내부적으로 node가 있으니 당연히
vue server를 때리면 8080포트로 실행
근데 이게 중요한게 vue build를 하면 정적 프론트 파일들을 만들어준다
webpack이라는 녀석이 핵심인데, node를 프론트로 확장시켜버린 유..유명한 녀석? 이다
흠흠 어잿든 babel이 js 구버젼으로 만드는 compiler라는 점 등을 알게 되었고
webpack은 빌드용!
vue frontend openlayer
node, vue, npm, yarn 글로벌하게 설치!
뷰 프로젝트 대충 정리하고
네이티브하게
로 넣었는데 안됨... vue component 안인것 때문인가 해서 일단
VueLayers :: Homepage
Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/#/quickstart
이거 참고해서
이렇게 구현하니까
되긴 되는데 흠... 너무 복잡해 openlayers 긴 하지만 새 모듈 쓰는거도 꺼림찍하고
사용할건지 팀장님한테 물어봐야할듯!
why openlayers map not working in vue-cli 3
I have added ol package to my vue-cli project through npm install ol but the map doesn't load. there is no error and I just find an empty div in the result source. here is my code => the htm...
https://stackoverflow.com/questions/52790845/why-openlayers-map-not-working-in-vue-cli-3
여기서는 또 된다고 하는데 코드 그대로 해도 왜 안되는건지! 후..
문제는 크게 2가지였는데
- map을 import안했었고
- 사이즈를 설정하지 않아서 0으로 나왔었다 css!
요렇게 적고 나니
3가지 map 전부 다 불러오기 완료!
근데 이렇게 쪼고미로 뜨는 걸 보니 좌표에 문제가 있는 듯 하다 이건 내일 해결할 예정!
기념사진 한장 찰칵