현재 지오서버에 전국 시군구 shp파일이 등록되어있는 상태라 지오서버를 활용해서 시군구 레이어를 받아 오려고 한다. 🚀 목표vue-query를 사용해 지오서버(GeoServer)의 시군구 레이어 불러오기 vue-query 설치vue 환경에서 서버 상태를 간편하게 관리하기 위해 react-query와 동일한 개념의 vue-query를 설치하면 된다. axios도 함께 설치 해준다.npm i axios @tanstack/vue-query 🔗 https://tanstack.com/query/v5/docs/framework/vue/installation Hook 작성vue-query를 사용해 Hook을 작성한다.cqlFilter : WMS나 WFS를 호출할 때 다양한 필터링을 적용할 수 있는 기능인데 여기서..
✨ Intro🚀 목표Vue.js에서 오픈레이어스의 기본 지도인 OSM(Open Street Map) 띄우기 ⚙️ 환경Vue3(v 3.5.13) + Composition API + setup ✨ 프로젝트 생성 및 라이브러리 설치vite로 vue 프로젝트를 생성해준다.npm create vite@latestvite 설치 가이드 : https://ko.vite.dev/guide/ 프로젝트 생성 후 아래 명령어를 통해 vue 프로젝트로 경로 이동 후 node-modules를 설치 해준다.cd 프로젝트명npm install 오픈레이어스를 설치한다.npm i ol ✨ OpenLayers로 지도 띄우기src 폴더 밑에 composables 폴더를 생성한다. Composable은 Vue 3의 Composition ..
map을 생성할 때 컨트롤러의 attribution, zoom, rotate를 false로 처리한다.defaults({attribution: false, zoom: false, rotate: false}).extend([])const map = new Map({ layers: [baseLayer], target: mapRef.current, controls: defaults({ attribution: false, zoom: false, rotate: false, }).extend([]), view: new View({ projection: projection, c..
Label Declutteringopenlayers에서 지도를 축소시키면 지역명(text)이 밀집된 지역은 겹치게 된다.이때 declutter 옵션을 사용하면 확대, 축소시 자동으로 표출되는 글자를 조절해주는 편리한 옵션이다. 사용법은 declutter 옵션을 적용할 레이어에 속성값을 true로 설정해 주면 된다.const vectorLayer = new VectorLayer({ background: 'white', source: new VectorSource({ url: 'https://openlayers.org/data/vector/us-states.json', format: new GeoJSON(), }), style: function (feature) { const labe..
지도에 마우스를 hover하면 속성 데이터를 표출 기능이 필요했다.map.on("pointermove",fucntion(event){}) 기능을 사용하여 hover시 속성 데이터를 표출 가능하다.하지만 레이어가 여러겹 있을 경우 어떤 속성 데이터를 표출할지 지정해 주어야한다. 레이어에 이름 지정VectorLayer 생성시 layerName을 넣어준다.임의의 속성을 부여했기 때문에 layerName이 아닌 name 등 다른 이름으로 속성을 지정해 주어도 된다. const vectorLayer = new VectorLayer({ source: vectorSource, style: myLayerStyle, // 위에서 정의한 스타일을 적용 layerName: 'myLayer', // 레이어 이름을 부여}..
