Map 개발자의 길

DeckGL TextLayer 한글 깨짐/미표출 본문

DeckGL

DeckGL TextLayer 한글 깨짐/미표출

YD_Koo 2022. 3. 28. 17:47

1. DeckGL TextLayer  기능 개발

 - Deckgl 한글 라벨 입력시 미표출 또는 한글깨짐

DeckGL 한글 입력 시 미표출
한글 인코딩 추가

2. 코드

 

Deckgl TextLayer 에서 추가 할 항목

2.1 characterSet

     디폴트 범위가 ASCII characters 32-128 , // 한글을 지원하지 않는다........... 

    characterSet에 필요한 한글 코드를 직접 입력하는 방법 말고는 찾질 못했다  그래도 없는것보다는 급하면 사용가능 할꺼 같다.

import DeckGL from '@deck.gl/react';
import {TextLayer} from '@deck.gl/layers';

function App({data, viewState}) {  

  const layer = new TextLayer({
    id: 'text-layer',
    data,
    pickable: true,
    getPosition: d => d.coordinates,
    getText: d => d.name,
    getSize: 32,
    getAngle: 0,
    getTextAnchor: 'middle',
    getAlignmentBaseline: 'center',
    // characterSet Default: ASCII characters 32-128
    // 추가 이벤트
    characterSet : function(){
    	 const charSet = [];
            for (let i = 32; i < 128; i++) {
                charSet.push(String.fromCharCode(i));
            }
            charSet.push(String.fromCharCode(45824)); // 대
            charSet.push(String.fromCharCode(49884)); // 시
            charSet.push(String.fromCharCode(44036)); // 간
         return charSet;
    }
  });

  return <DeckGL viewState={viewState}
    layers={[layer]}
    getTooltip={({object}) => object && `${object.name}\n${object.address}`} />;
}

//출처 : https://deck.gl/docs/api-reference/layers/text-layer

 

반응형
Comments