# openlayers

beenclips

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

bm1201

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

yunsser

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

peterpictor

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

hyosss

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

ljieun97

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

ljieun97

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

ljieun97

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

ljieun97

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

ljieun97

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

ljieun97

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

ljieun97

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

ljieun97

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

conan

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

conan

객체 GeoJSON 형태 저장 + 표출

minpaper

애증의 OpenLayers ^____^;

minpaper

애증의 OpenLayers 시작 .... 🙃

conan

맵에 객체 그리기 + 수정

conan

함수형 컴포넌트 맵 표출

jjhstoday

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