반응형 OpenSource/geoServer9 스텝6) 오픈api 신청 및 key 발급! 제주도 관련 open api가 있네요! http://www.jejuits.go.kr/open_api/open_apiView.do 그래서 사용하기 위해 신청접수를 했습니다. 신청 시에 법인만 신청하도록 되어있어서 난감했는데요.. 오픈 api이기에 그냥 개발중인 스크린샷을 넣고 신청했어요 ㅋㅋ 계속 연락이 없다가...드디어..오픈소스를 사용할 수 있는 키가 나왔습니다!! 감사합니다! 잘쓰겠습니다~~~~:) 개발은..살짝 딜레이~~ㅋㅋ.. 2023. 8. 31. 스텝5) vue.js 개념 정리 후 진행해보자~ 아직 머릿속에 vuejs의 개념이 잘 잡히지 않은것 같다. 그런 상태에서 nuxt3를 하자니 복잡하게만 느껴진다. 더욱이 naver map예제는 jquery를 사용하고 있다. 차라리 이게 더 친숙하군..ㅋㅋ 우선 여태 vuejs를 작성한 포스팅을 보자!! 문제를 파악해보고 조금 더 나아가보자구~:) 2018.09.10 - [Front/Vue.js] - Vue.js 맛보기 2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js 무작정 해보기(기본-Vue.js? 좋은거? 먹는거?) 2019.06.04 - [Front/Vue.js] - [acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!) 2019.06.12 - [Front/Vue.js] - const definitio.. 2023. 8. 17. 스텝4) naver map api 학습 참고 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-Map.html 지도생성 및 기본동작 Map객체 : 특정 DOM요서에 지도를 표현! var map = new naver.maps.Map('map', { mapTypeId: naver.maps.MapTypeId.HYBRID }); 지도 초기화 지도를 초기화하려면 지도가 표현 될 DOM 요소 또는 DOM요소의 id를 명시해야 함. var map = new naver.maps.Map('map', { 지도 유형 설정 Map 객체는 지도유형을 저장하고 있음. - MapOptions를 이용하거나 setMapTypeId메서드를 이용 해야 함. 지도 유형은 참고 : https://navermaps.github.i.. 2023. 8. 10. 스텝3) naver map api 호출 해보기! 안녕하세요~오늘은 드디어 naver maps를 붙여보는 날:) 뭔가 이쁘게 해보려고 https://headlessui.com/react/tabs 를 하다가 https://nuxt.com/docs/examples/routing/pages 를 참고해서 만들어보려고 합니다. 그리고 navermap api는 튜토리얼이 엄청 잘되어있네요! 굿~ 하나씩 따라서 학습하면 만들수 있을것 같아요 ㅎㅎ https://navermaps.github.io/maps.js.ncp/docs/tutorial-MapTypes.html HelloWorld는 아래처럼 바로 나옵니다. 그리고 typescript사용에서는 npm에서 이미 제공을 해주네요 npm i -D @types/navermaps 지도생성 및 기본동작 등을 학습하면 아래.. 2023. 8. 2. 스텝2) setup web application for naver maps web application은 여러가지가 있는데 현재 셀에서 최근에 작업했던 nuxt3으로 진행하려고 합니다. 참고 : https://nuxt.com/docs/getting-started/installation 1) 설치 npx nuxi@latest init cd jejuMap npm install npm run dev result) InteliJ를 사용한다면 아래와 같이 run 스크립트로 실행하게끔 해놓는다. nuxt 파일 중에 nuxt.config.ts 라는게 있는데 이 파일은 스크립트 추가, 모듈 등록 또는 렌더링 모드 변경등에 사용 됩니다. import없이 globally하고 사용할 수 있다! runtimeConfig export default defineNuxtConfig({ runtimeCon.. 2023. 8. 1. 스텝1) 네이버 지도 api를 사용해보자:) 안녕하세요 무더운 여름이네요.. 주말에 지도 api가 궁금해서 사용해보려고 합니다. 여러 지도 api가 있지만 "너로 정했다! 네이버!" 출처 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-Getting-Client-ID.html 우선은 클라이언트 아이디를 발급! 회원가입을 해줍니다. 결제 수단을 등록 후 콘솔로 이동 합니다. AI,NAVER API를 클릭 후 Application을 등록해 줍니다. 등록하기 전 Service를 선택! Maps을 사용해야하니 Web에 띄워주고 geo관련된 친구들 2개 선택해 줍니다. 그리고 Web서비스 url을 설정해줍니다. 일단은 로컬호스트에서 동작해야하니 http://localhost를 입력해줍니다. 등록 후에 .. 2023. 7. 31. [GIS] openlayers+geoserver 연동하기!! 드디어! geoServer와의 만남이 있겠습니다ㅎㅎㅎ 환경은 이러합니다.1. openLayers2. geoServer3. OpenStreet Mapbase map은 open street이라는 것을 사용합니다.올레맵은...DB를 구축해야 쉽게할 수 있을 것 같네요..ㅠ_ㅠ 참고 예제 : http://openlayers.org/dev/examples/osm.html 결과 : 베이스 맵에 WFS인 빨강+노란동그라미를 뿌려준 것 입니다. geoServer는 아래의 주소로 가셔서 다운로드 받으시면 됩니다.^-^http://geoserver.org/download/ 설치는 클릭신공! 사용하시면 됩니다 ㅋㅋ geoServer 메뉴에서 Layer Preview라는게 있습니다.(http://openlayers.or우리가.. 2014. 7. 7. [GIS] openlayers를 이용한 간단하게 배경 뿌리기! 환경 :Window 7 회사 PC ㅋㅋopenlayers 2.12ollehMap openlayers&Olleh Map을 사용!(개인은 무료라고 하네요 오예!) openlayers : http://openlayers.org/download/ 사용버전은 2.12~! ollehMap : http://dev.ktgis.com/ [Result]setting base picture with openLayers :D 알아두면 좋은 용어!# Raster - Zoom Level, 정적인 표현 - 이미지(깨짐) - zoomin/out : 새로운 지도 데이터 로딩 # Vector - Zoom Level 보다는 Scale을 이용(안깨짐), 동적인 표현 - 새롤운 지도데이터를 이용하여 Redraw Source 대해 알아보도록 .. 2014. 7. 1. [GIS] GeoServer??? 오잉? 어떤 친구인가?? 프로젝트 오픈을 하고....자리를 옮기고 나니 맥북을 꺼내질 못한다..ㅠㅠ..왕눈치가 보이는구나ㅋㅋ..anyways..어제부터 gis도(?) 하라고 해서 차근차근 정리 해보려고 한다.사실 지금 개인프로젝트 하는데 한번 붙여보고싶어서이기도 하다 ㅋㅋㅋ 음..그런데 오라클 Spatial을 돈주고 사서 사용한다고 하던데..개인은 공짜로 해주려나..ㅎㅎ;아무튼 정리 ㄱㄱ~ OpenLayers, geoServer, ollehMap 등을 사용한다. 포스팅에서는 회사관련된 것은 쇽쇽~빼버리고 포스팅을 하겠다ㅋ 우선은 자바로 만들어진 오픈소스를 사용한다. opensource geoServerhttp://geoserver.org/ 예전 GIS구축 때는 클라이언트에서 이미지를 생성하였는데 오픈소스 geoServer를 도입.. 2014. 6. 27. 이전 1 다음 반응형
