안녕하세요.
웹 쪽은 전혀 모르다가 최근 들어 조금씩 접해 보는 중입니다.
우선 css의 기능이 워낙 강하고 방대해서 이미지 전환과 같은 기능은 일도 아니긴 합니다만, blazor 만의 기능이 있는지 또는 참고할 만한 사이트가 있는지 궁금해서 여쭤 봅니다.
원하는 기능은, 디바이스 현황판 같은 걸 만들고 싶은데요.
지도 이미지를 배경으로 두고 그 위에 또 장비 이미지를 덧댄다음, 장비의 현재 상태를 실시간으로 변경하고 싶어서요.
장비 관련 이미지는 절대 좌표에 고정시켜서 꼭 지도에 맵핑된 것처럼 보이고 싶습니다.
혹시 이런 기능을 구현 하려면 좀 효율적인 방법은 뭐가 있을까요?
참조할 만한 사이트나, 학습용 자료는 또 뭐가 있는지 궁금합니다.
지도에 매핑이니 하는건 뭐 그냥 순수웹의 기능을 쓰면 될거구요
실시간성을 위해서 블레이저 자체보다는 SignalR을 중심으로 구현하는쪽이 좋을거같네요, 이후 SignalR과 웹을 연계하기위한 여러 옵션중 가장 좋은선택이 Blazor가 될것입니다.
방법은 많겠지만 skia로 직접 그리는것도 방법일거 같습니다.
UI 관련 작업은 앞에서 설명한대로 그리는 방법도 있지만, 프론트엔드에서 쓰이는 방법을 사용하는 것이 편할 수도 있습니다.
기본 svg에서 제공하는 element를 기반으로 장비 영역 폴리곤을 그려서 클릭 범위를 제한하거나 맵핑한 것 처럼 보이게 할 수 있습니다.
https://openlayers.org/en/latest/examples/image-load-events.html
JS 지도 라이브러리를 로드해서 배경 이미지를 삽입하고 툴팁이나 클릭해서 input을 띄우는 방식으로 구현(상태 변경 방식은 자유)해도 됩니다.