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', // 레이어 이름을 부여}..
JSON.stringify - 드롭다운 컴포넌트에서 객체 배열을 넣으려고 한다. - 나열하고자 하는 옵션의 리스트 요소가 객체일 경우 JSON.stringify를 사용하여 풀어 넣을 수 있다. 코드 import React from "react"; import styled from "styled-components"; const SelectContainer = styled.select` width: 120px; height: 30px; background: #ffffff; border: 1px solid #cccccc; border-radius: 4px; font-size: 14px; padding: 0 10px 0 6px; color: #353535; margin: 5px 10px 0px 5px; `; ..
텍스트 ...으로 표시하기 텍스트가 너무 길 경우 ...으로 생략 하려고 했다. text-overflow : ellipsis 속성을 적용했지만 반응이 없어 조금 더 조사했다. text-overflow ellipsis 안먹힘 해결 방법 다음과 같은 조건으로 CSS가 작성되었는지 점검한다. 텍스트를 감싸고 있는 부모 요소는 블록 엘리먼트 요소(div, table, ul, ol, header, footer..)이다. 따라서 width값을 설정할 수 있고 이에 따라 text-overflow가 발생할 수 있다. white-space: nowrap - 문자 간 공백은 축소되고 개행(줄 바꿈)은 방지된다. overflow: hidden - 위 속성의 영향으로 문자의 개행이 방지되었기 때문에 텍스트가 한 줄로 길게 늘..
splice splice 함수를 사용하여 제거 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start - 배열의 변경을 시작할 index deleteCount - 배열에서 제거할 개수 - 0일 경우 제거하지 않는다. (이 경우 최소한 하나의 새로운 요소를 추가해야한다.) item1, item2...(Oprional) - 배열에 추가할 요소 - 생략할 경우 요소를 제거하기만 한다 Return - 제거한 요소를 담은 배열 - 아무것도 제거하지 않을 경우 빈 배열을 반환 Code import React, { useState } from 'react'; function MyComponent() { const [myArray, setMyArray] =..
테이블에 추가할 CSV 데이터를 준비한다. 두 테이블의 한글 이름을 기준으로 데이터를 연결할 예정이라 구분자의 이름이 완전히 같아야 한다. 레이어 → 레이어 추가 → 구분자로 분리된 텍스트 레이어 추가 선택 csv 파일을 import 후 UTF-8로 인코딩하면 한글 이름이 표출된다. (EUC-KR 등 예시 데이터가 깨지지 않는 인코딩을 선택한다.) 레이어 부분에 추가한 CSV 데이터(행정동코드)가 정상적으로 등록된 것을 확인할 수 있다. 추가하고자 하는 레이어의 속성을 클릭한다. 결합 → 하단 + 버튼 → 결합 반영할 테이블 선택, 결합할 필드와 대상필드를 선택한다. → 확인
shp 파일의 속성 테이블의 필드 이름 중 CD → AMD_CD로 변경하려고 한다. 공간처리 툴박스에서 필드 재작성 메뉴 실행 이름 부분을 변경할 이름(CD → AMD_CD)으로 수정 및 실행한다. - 소스 표현식은 추후 자동으로 변환된다. - 소스 표현식 이름을 변경할 경우 해당 필드 데이터가 모두 NULL로 변경될 수 있기 때문에 주의한다. 실행 후 레이어에 재작성 산출물이 생성된 것을 확인할 수 있다. 재작성 산출믈의 속성 테이블 열기를 눌러 최종 결과를 확인한다.
완성 결과물 결과물 GIF 1.기본 & 커스텀 모드를 선택할 수 있다. 2. 커스텀 모드일 경우 1번 색상과 2번 색상을 지정해 그라이데션을 설정할 수 있다. 3. 색상 설청창 외부 클릭시 닫힌다. 설계 및 주요 함수 위 결과물은 별도 라이브러리를 사용하지 않았다. input 태그에서 type="color"로 지정하면 색상 그라데이션을 설정할 수 있다. {defaultSetting ? null : ( setColor1(e.target.value)} /> )} input 태그는 색상을 HEX 코드로만 인식할 수 있기 때문에 아래 단계를 거쳤다. 1) 2가지 색상을 HEX 코드 입력 2) 2가지 색상을 RGB 코드로 변환 후 중간 값들을 계산 3) 결과 값들을 HEX 코드로 반환 RGB → HEX 변환 함수..
문제점 인식 - 메뉴탭을 클릭했을 시 강조되는 부분을 useState에 index를 넣어 관리했다.- 하지만 useState를 사용하니 새로고침시 무조건 0번 index인 첫번째 탭이 활성화되는 문제점이 발견되었다.- 때문에 현재 보고있는 페이지를 기준으로 메뉴탭을 활성화하는 방법을 찾게 되었다. react-router-dom 설치 - react 설치- react-router-dom 설치 npm install react react-router-dom useLocation react-router-dom의 useLocation을 사용하면 현재 URL과 path 값을 비교하여 탭을 활성화해준다. // App.js import React from "react"; import { BrowserRouter, Swi..
바로 코드로 들어간다.- 샘플 데이터 양식은 추후 수정 예정 코드// App.jsximport React from "react";import { Dropdown } from "components/buttons";const smapleData = { data: ["1번", "2번", "3번", "4번"] };export default function Main() { return ( );}// src/components/buttons/index.jsxexport * from "./Dropdown";// src/components/buttons/Dropdown.jsximport React, { useState } from "react";import styled from "style..
