FingerEyes-Xr의 그래픽 요소에 타이틀(텍스트) 달기

FingerEyes-Xr은 사용자가 마우스를 이용해 자유롭게 다양한 그래픽 요소를 지도에 스케치할 수 있습니다. 사용자가 스케치한 그래픽 요소에 원하는 텍스트 추가로 붙여주는 코드에 대해 정리합니다. 먼저 아래는 사용자가 마우스로 그린 그래픽 요소에 대해 특정 텍스트를 추가한 화면입니다.

코드 예시는 아래와 같습니다.

쉽죠? 쉬우니 관련 글 정리도 쉽네요..

FingerEyes-Xr에서 폰트(Font)를 이용한 마커 심벌(Marker Symbol) 지정하기

FingerEyes-Xr에서 포인트 타입의 수치지도는 다양한 형태로 표현될 수 있습니다. 원이나 사각형과 같은 단순 도형에서 이미지나 폰트를 통한 텍스트 표현까지 가능합니다. 특히 이미지는 애니메이션 GIF인 경우 애니메이션 효과도 그대로 표현됩니다.

이 글은 포인트 타입의 수치지도를 폰트를 통한 텍스트 표현을 위한 API에 대한 내용을 정리한 글입니다.

포인트를 폰트를 통한 텍스트로 표현하는 이유 중에 하나는 웹에서 딩벳(Dingbat) 폰트에서 일반적이지 않은 특별하게 디자인된 텍스트로 포인트 심벌을 표현하기 위함입니다. 아래의 화면은 멘홀에 대한 단순한 포인트를 하수설비에 대해 특별이 만들어진 폰트로 표현된 지도입니다.

노란색의 채움과 빨간색의 외곽선으로 표시된 아이콘 모양의 심벌이 바로 포인트 수치지도에 대해 표현된 텍스트인데요. 이처럼 수치지도 레이어에 폰트 심벌을 적용하는 코드는 아래와 같습니다.

위의 코드 중 12번 코드에 fontFamily 함수를 통해 “ffHasu” 값을 지정하고 있습니다. 이 “ffHasu” 아래의 style을 통해 정의된 값입니다. 추가적으로 폰트가 사용자의 PC에 설치되어 있지 않을 경우, 웹에서 해당 폰트를 내려받아 웹페이지에서 사용할 수 있는데요. 아래의 코드는 특정 폰트를 내려받아 사용할 수 있도록 있도록 해주기도 합니다.