# openlayers

26개의 포스트
post-thumbnail

Openlayers 서비스

요즘 웹 개발에서 지도 서비스는 대형 플랫폼에서 제공해주는 API를 사용하면 쉽게 지도를 만들 수 있다. 하지만 직접 지도를 만들어야하는 상황이라면 어떨까? 자신의 사이트 필요한 기능들도 직접 만들어야하고 지도에 들어가는 데이터들도 따로 만들어야한다면? openlaye

4일 전
·
0개의 댓글
·

오픈레이어스(OpenLayers) 공부하기(1)

리액트(React) + 오픈레이어스(OpenLayers)

2023년 9월 14일
·
0개의 댓글
·
post-thumbnail

[OpenLayers] OpenLayers 이용하여 맵띄우기

OpenLayers에 들어가서 js파일과 css파일을 넣어준다.여기서는 js 파일을 넣어줄때 꼭 type을 module로 넣어줘야한다맵을 띄우는건 간단하면서 복잡했는데 leaflet을 먼저 경험해본 사람으로써..뭔가가 훨씬 많지만 약간 복잡한 느낌..? 그걸 마커 띄울

2023년 8월 3일
·
0개의 댓글
·
post-thumbnail

[npm] React-Openlayers7 구현기(1)

React-Openlayers7 발단 현재 진행하고 있는 프로젝트는 지도 기능이 매우 중요한 프로젝트입니다. 지도위에 마커를 그리고, 선분을 그려 각 끝에 해당하는 좌표가 필요하고, 좌표에 해당하는 사진을 띄우기도 해야합니다. 초기에 작성된 요구사항 명세서대로 기능들을

2023년 6월 21일
·
0개의 댓글
·

[OpenLayers] 소개

1) 웹 브라우저 상에 지도 데이터를 시각화 및 조작이 가능한 JavaScript 라이브러리2) OSM (OpenStreetMap) 라는 오픈소스형 무료 지도 서비스 이용OSM의 시작지인 런던은 가로수 하나까지도 한땀한땀 노드로 다 표현을 해놓았을 정도로 지도 데이터

2023년 2월 7일
·
0개의 댓글
·

[openlayers] ol-style-icon 이미지로 아이콘 띄우기

ol 태그로 이미지 아이콘 입력하는거 찾아도 찾아도 없더라...근데 이렇게 간단한거라니

2022년 9월 30일
·
0개의 댓글
·

Making it look nice

import {Style, Fill, Stroke}정적 스타일 적용동적 스타일 적용npm install colormapimport colormap, {getArea}영역크기를 기준으로 색상을 결정하는 함수 작성

2022년 9월 20일
·
0개의 댓글
·

Downloading features

clear, download 버튼 생성버튼 클릭 시 지우기 메소드를 호출하는 리스너 추가편집하는 동안에도 다운로드 버튼의 작동을 원하기 때문에 source의 모든 이벤트에 대한 기능을 직렬화하고 데이터 URI를 생성

2022년 9월 20일
·
0개의 댓글
·

Snapping

import Snap벡터 source와 함께 map에 추가features를 그리거나 수정하는 동안 토폴리지를 보존할 수 있음

2022년 9월 20일
·
0개의 댓글
·

Drawing new features

import Draw다각형을 그리도록 구성된 Draw 상호작용을 만들고 벡터 source에 추가

2022년 9월 20일
·
0개의 댓글
·

Modifying features

import Modify벡터 source에 연결된 새 상호작용을 만들고 map에 추가map에 데이터를 추가한 후 꼭짓점을 드래그하여 feature 수정alt+click으로 꼭짓점 삭제 가능

2022년 9월 20일
·
0개의 댓글
·

Drag and drop

Import DragAndDrop초기 데이터가 없는 벡터 source 만들기map에서 이전 layer를 제거하고 빈 벡터 source로 새 layer를 만들어 추가벡터 소스와 함께 작동하도록 map에 DragAndDrop 상호작용 추가GeoJOSN 파일을 map에 끌어

2022년 9월 20일
·
0개의 댓글
·

Rendering GeoJSON

워크샵용 개발 서버를 실행하기 위해 node와 git 설치npm create ol-appcd my-appnpm start어두운 배경 추가GeoJSON 기능이 포함된 로컬 파일을 로드하고 렌더링하도록 업데이트Link: 페이지 로드 시 맵이 남겨 둔 곳에 머무르기 위한 상

2022년 9월 20일
·
0개의 댓글
·
post-thumbnail

[React] Openlayers (4)

객체 스타일 변경하기(feature style)

2022년 1월 26일
·
0개의 댓글
·
post-thumbnail

[React] Openlayers (3)

객체 GeoJSON 형태 저장 + 표출

2021년 12월 10일
·
4개의 댓글
·
post-thumbnail

[OpenLayers] (0)OpenLayers Class 구성

애증의 OpenLayers ^____^;

2021년 12월 6일
·
0개의 댓글
·
post-thumbnail

[OpenLayers] (1)React에서 OpenLayers를 이용해 지도 띄우기

애증의 OpenLayers 시작 .... 🙃

2021년 12월 3일
·
2개의 댓글
·
post-thumbnail

[React] Openlayers (2)

맵에 객체 그리기 + 수정

2021년 11월 30일
·
0개의 댓글
·
post-thumbnail

[React] Openlayers (1)

함수형 컴포넌트 맵 표출

2021년 11월 23일
·
0개의 댓글
·
post-thumbnail

[OpenLayers] OpenLayers 시작하기! (3) - Layer, Zoom, Center, Coordinates, Scale

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

2021년 11월 22일
·
1개의 댓글
·