# openlayers

Openlayers 서비스
요즘 웹 개발에서 지도 서비스는 대형 플랫폼에서 제공해주는 API를 사용하면 쉽게 지도를 만들 수 있다. 하지만 직접 지도를 만들어야하는 상황이라면 어떨까? 자신의 사이트 필요한 기능들도 직접 만들어야하고 지도에 들어가는 데이터들도 따로 만들어야한다면? openlaye
[OpenLayers] OpenLayers 이용하여 맵띄우기
OpenLayers에 들어가서 js파일과 css파일을 넣어준다.여기서는 js 파일을 넣어줄때 꼭 type을 module로 넣어줘야한다맵을 띄우는건 간단하면서 복잡했는데 leaflet을 먼저 경험해본 사람으로써..뭔가가 훨씬 많지만 약간 복잡한 느낌..? 그걸 마커 띄울

[npm] React-Openlayers7 구현기(1)
React-Openlayers7 발단 현재 진행하고 있는 프로젝트는 지도 기능이 매우 중요한 프로젝트입니다. 지도위에 마커를 그리고, 선분을 그려 각 끝에 해당하는 좌표가 필요하고, 좌표에 해당하는 사진을 띄우기도 해야합니다. 초기에 작성된 요구사항 명세서대로 기능들을
[OpenLayers] 소개
1) 웹 브라우저 상에 지도 데이터를 시각화 및 조작이 가능한 JavaScript 라이브러리2) OSM (OpenStreetMap) 라는 오픈소스형 무료 지도 서비스 이용OSM의 시작지인 런던은 가로수 하나까지도 한땀한땀 노드로 다 표현을 해놓았을 정도로 지도 데이터
[openlayers] ol-style-icon 이미지로 아이콘 띄우기
ol 태그로 이미지 아이콘 입력하는거 찾아도 찾아도 없더라...근데 이렇게 간단한거라니
Making it look nice
import {Style, Fill, Stroke}정적 스타일 적용동적 스타일 적용npm install colormapimport colormap, {getArea}영역크기를 기준으로 색상을 결정하는 함수 작성
Downloading features
clear, download 버튼 생성버튼 클릭 시 지우기 메소드를 호출하는 리스너 추가편집하는 동안에도 다운로드 버튼의 작동을 원하기 때문에 source의 모든 이벤트에 대한 기능을 직렬화하고 데이터 URI를 생성
Modifying features
import Modify벡터 source에 연결된 새 상호작용을 만들고 map에 추가map에 데이터를 추가한 후 꼭짓점을 드래그하여 feature 수정alt+click으로 꼭짓점 삭제 가능
Drag and drop
Import DragAndDrop초기 데이터가 없는 벡터 source 만들기map에서 이전 layer를 제거하고 빈 벡터 source로 새 layer를 만들어 추가벡터 소스와 함께 작동하도록 map에 DragAndDrop 상호작용 추가GeoJOSN 파일을 map에 끌어
Rendering GeoJSON
워크샵용 개발 서버를 실행하기 위해 node와 git 설치npm create ol-appcd my-appnpm start어두운 배경 추가GeoJSON 기능이 포함된 로컬 파일을 로드하고 렌더링하도록 업데이트Link: 페이지 로드 시 맵이 남겨 둔 곳에 머무르기 위한 상

[OpenLayers] OpenLayers 시작하기! (3) - Layer, Zoom, Center, Coordinates, Scale
📚 웹 브라우저에서 지도 데이터를 표시하는 라이브러리 OpenLayers 시작하기! - Layer, Zoom, Center, Coordinates, Scale 등의 컨트롤러 생성!