Trip Map

일반 타일 지도에 경로를 그립니다. 레이어를 하나 이상 설정합니다:

• 라벨: 위젯의 레이어 전환기에 표시되는 이름.
• 공급자: OpenStreet, Google, HERE, Tencent, 사용자 지정(타일 서버 URL 입력).
• 레이어: 타일 스타일 — Mapnik, HOT, WorldStreetMap, WorldTopoMap, WorldImagery, Roadmap 등. 쓸 수 있는 옵션은 공급자마다 다릅니다.
• 참조 레이어: 라벨이 붙은 지도 요소(도로, 경계)를 담은 투명 오버레이. 레이어의 톱니바퀴 아이콘 메뉴에서 설정합니다.

전환할 수 있는 레이어를 더 설정하려면 레이어 추가를 클릭합니다. 사용자는 위젯의 레이어 아이콘 버튼으로 레이어를 바꿉니다.

고정 이미지를 지도 배경으로 씁니다(예: 평면도, 사용자 지정 현장 배치도):

• 이미지 소스: 갤러리에서 올리거나 URL을 입력합니다.
• 엔터티 키: 이미지를 엔티티 속성 키에 연결합니다. 엔티티마다 배경 이미지가 다를 때 유용합니다.

이동 경로 오버레이는 시계열 위도/경도 데이터로 엔티티가 지나간 길을 이어진 선으로 그립니다. 재생하는 동안 마커가 경로를 따라 움직이며 기록된 타임스탬프마다 엔티티 위치를 보여 줍니다.

이동 경로 추가하기: 이동 경로 추가를 클릭하고 데이터 소스를 선택한 다음 좌표 키를 정하고 저장을 클릭합니다.

데이터 소스

시계열 좌표를 보내는 엔티티를 선택합니다: 기능, 장치, 개체(엔티티 별칭). 필터를 적용해 범위를 좁힙니다. 데이터 소스를 더 추가하려면 추가 데이터 소스 더 보기를 펼칩니다.

키

• 위도 키: 위도 값이 담긴 시계열 키(기본값: latitude).
• 경도 키: 경도 값이 담긴 시계열 키(기본값: longitude).
• 추가 데이터 키: 라벨과 툴팁 함수에서 쓸 추가 텔레메트리 키(예: speed, status).

모양 — 마커

재생하는 동안 엔티티의 현재 위치에 표시되는 아이콘. 표시 모드 세 가지:

• 도형: 기본 제공 도형을 고르고 크기(px)와 색상을 정합니다. 텔레메트리 값에 따라 마커 색을 동적으로 바꾸려면 색상 함수(JavaScript)를 씁니다.
• 아이콘: 기본 제공 아이콘을 고르고 크기와 색상을 정합니다.
• 이미지: 이미지 URL을 넣거나 { url, size, offset }을 돌려주는 마커 이미지 함수를 씁니다. 사용자 지정 마커 이미지 크기를 정합니다.

마커 오프셋 — 기준점 위치를 미세 조정합니다(가로, 세로, 0–1 범위).

마커 회전 — 이동 방향에 맞게 마커 아이콘을 돌립니다. 기본 방향을 조정하려면 오프셋 각도(도)를 정합니다.

모양 — 라벨

마커 위에 표시되는 글:

• 패턴(기본값): ${entityName}, ${entityLabel} 같은 템플릿 변수나 데이터 키를 씁니다.
• 함수: 데이터 값에 따라 HTML 문자열을 돌려줍니다.

모양 — 툴팁

마커를 조작하면 나타나는 팝업:

• 패턴 / 함수: 내용을 템플릿이나 JavaScript 함수로 정합니다.
• 툴팁 트리거: 클릭 시 툴팁 표시 또는 호버 시 툴팁 표시.
• 툴팁 자동 닫기: 지도의 다른 곳을 클릭하면 닫습니다.
• 태그 동작: <link-act name='action-name'>Label</link-act>로 툴팁 안에 이름이 있는 동작 링크를 추가합니다. 링크를 클릭하면 설정한 위젯 동작이 실행됩니다.

동작

클릭 시 — 마커를 클릭하면 실행되는 동작. 쓸 수 있는 유형: 동작 안 함, 새로운 대시보드 상태 탐색, 현재 대시보드 상태 업데이트, 다른 대시보드 탐색, Custom action, Custom action (with HTML template), 모바일 액션, URL 열기.

위치 변환 (이미지 지도 유형 전용)

이미지에 그리기 전에 마커의 원래 상대 x/y 좌표를 바꾸는 JavaScript 함수. 여러 엔티티의 마커가 같은 위치에 겹쳐 떨어뜨려야 할 때나, 좌표를 사용자 지정 이미지 축척에 맞게 다시 매핑해야 할 때 유용합니다.

함수 시그니처: f(origXPos, origYPos, data, dsData, aspect)

매개변수:

• origXPos: number — 원래 상대 x 좌표(0~1).
• origYPos: number — 원래 상대 y 좌표(0~1).
• data — 이 이동 경로 점의 엔티티 데이터: 설정한 데이터 소스의 엔티티 속성과 텔레메트리.
• dsData — 추가 데이터 소스를 포함한 모든 데이터 레이어의 전체 데이터.
• aspect: number — 이미지 지도의 종횡비(너비 / 높이).

{ x: number, y: number }를 돌려줘야 합니다. 각각 0~1 범위의 새 상대 좌표입니다.

기본값(그대로 통과):

return {x: origXPos, y: origYPos};

예시 — 위치가 같은 마커를 찾아 겹침이 가장 적게 배치합니다:

var xPos = data.xPos;
var yPos = data.yPos;
var locationGroup = dsData.filter((item) => item.xPos === xPos && item.yPos === yPos);
if (locationGroup.length > 1) {
  const count = locationGroup.length;
  const index = locationGroup.indexOf(data);
  const radius = 0.035;
  const angle = (360 / count) * index - 45;
  const x = xPos + radius * Math.sin(angle * Math.PI / 180) / aspect;
  const y = yPos + radius * Math.cos(angle * Math.PI / 180);
  return {x: x, y: y};
} else {
  return {x: xPos, y: yPos};
}

경로

• 경로: 켜면 경로 선을 표시합니다. 선 두께(px)와 색상을 정합니다.
• 경로 데코레이터: 경로를 따라 그려지는 방향 기호:
  • 데코레이터 기호: 화살표 또는 대시.
  • 기호의 크기와 색상.
  • 데코레이터 배치: 시작 오프셋, 끝 오프셋, 반복 간격(모두 px).
• 점: 기록된 데이터 점마다 찍히는 점 마커. 크기(px)와 색상을 정합니다.
  • 점 색상 함수: 점마다 텔레메트리 값에 따라 색상 문자열을 돌려주는 JavaScript 함수(예: 속도별로 점 색 구분).
  • 점 툴팁: 기록된 점마다 나타나는 팝업. 패턴이나 함수, 툴팁 트리거, 자동 닫기, 태그 동작을 설정합니다.

그룹

그룹 이름을 지정합니다. 그룹은 위젯의 그룹 패널에 나타나며, 그룹 전체를 한 번에 표시하거나 숨길 수 있습니다.

마커 오버레이는 엔티티 위치(차량, 센서, HMI 장치 등 위치가 있는 자산)를 나타내는 점 아이콘을 지도에 놓습니다. 위치는 속성이나 텔레메트리에서 읽습니다.

마커 추가하기: 마커 추가를 클릭하고 데이터 소스를 선택한 다음 좌표 키를 정하고 저장을 클릭합니다.

데이터 소스

기능, 장치, 개체(별칭). 필터를 적용해 범위를 좁힙니다.

키

• 위도 키: 위도가 담긴 속성이나 텔레메트리 키(기본값: latitude).
• 경도 키: 경도가 담긴 속성이나 텔레메트리 키(기본값: longitude).
• 추가 데이터 키: 라벨, 툴팁, 색상 함수에 쓸 추가 키.

모양 — 마커

표시 모드 세 가지:

• 도형: 기본 제공 도형. 크기와 색상을 정합니다. 색상 함수를 지원합니다.
• 아이콘: 기본 제공 아이콘. 크기와 색상을 정합니다.
• 이미지: 이미지 URL 또는 { url, size, offset }을 돌려주는 마커 이미지 함수.

마커 오프셋 — 기준점을 미세 조정합니다(가로, 세로).

모양 — 라벨

마커 위의 글. 패턴(예: ${entityName}) 또는 함수. 여러 줄 내용이면 Tip을 켭니다.

모양 — 툴팁

클릭하거나 마우스를 올리면 나타나는 팝업. 패턴 또는 함수. 다음을 설정합니다:

• 툴팁 트리거: 클릭 시 또는 호버 시.
• 툴팁 자동 닫기.
• 툴팁 오프셋: 가로·세로 위치 조정.
• 태그 동작: 툴팁 안의 이름 있는 동작 링크.

동작

클릭 시 동작. 유형: 동작 안 함, 새로운 대시보드 상태 탐색, 현재 대시보드 상태 업데이트, 다른 대시보드 탐색, Custom action, Custom action (with HTML template), 모바일 액션, URL 열기.

위치 변환 (이미지 지도 유형 전용)

이미지에 그리기 전에 마커의 원래 상대 x/y 좌표를 바꾸는 JavaScript 함수. 마커가 같은 위치에 겹쳐 떨어뜨려야 할 때나, 좌표를 사용자 지정 이미지 축척에 맞게 다시 매핑해야 할 때 유용합니다.

함수 시그니처: f(origXPos, origYPos, data, dsData, aspect)

매개변수:

• origXPos: number — 원래 상대 x 좌표(0~1).
• origYPos: number — 원래 상대 y 좌표(0~1).
• data — 이 마커의 엔티티 데이터: 설정한 데이터 소스의 엔티티 속성과 텔레메트리.
• dsData — 추가 데이터 소스를 포함한 모든 데이터 레이어의 전체 데이터.
• aspect: number — 이미지 지도의 종횡비(너비 / 높이).

{ x: number, y: number }를 돌려줘야 합니다. 각각 0~1 범위의 새 상대 좌표입니다.

기본값(그대로 통과):

return {x: origXPos, y: origYPos};

예시 — 겹친 마커를 원 모양으로 퍼뜨립니다:

var xPos = data.xPos;
var yPos = data.yPos;
var locationGroup = dsData.filter((item) => item.xPos === xPos && item.yPos === yPos);
if (locationGroup.length > 1) {
  const count = locationGroup.length;
  const index = locationGroup.indexOf(data);
  const radius = 0.035;
  const angle = (360 / count) * index - 45;
  const x = xPos + radius * Math.sin(angle * Math.PI / 180) / aspect;
  const y = yPos + radius * Math.cos(angle * Math.PI / 180);
  return {x: x, y: y};
} else {
  return {x: xPos, y: yPos};
}

그룹

가시성을 켜고 끌 수 있도록 그룹 이름을 지정합니다.

마커 편집

위젯에서 대화형 배치·조작 도구를 켭니다:

• 편집 도구: 추가, 이동, 제거 도구를 켭니다.
• 위치 저장 속성 범위: 서버 또는 공유. 좌표를 저장할 곳을 정합니다.
• 정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용: 새 점을 가까운 꼭짓점에 붙입니다.

지도 마커 클러스터링 사용

낮은 확대 수준에서 가까운 마커를 클러스터 아이콘 하나로 묶습니다. 클러스터 아이콘에는 안에 든 항목 수가 표시됩니다. 마커가 많을 때 읽기 쉬워집니다.

다각형은 지도의 영역이나 구역(작업 구역, 지오펜스, 제한 구역 등)을 정합니다. 다각형 좌표는 엔티티의 속성으로 저장합니다.

좌표 형식:

[[lat1,lng1],[lat2,lng2],...,[latN,lngN]]

다각형 추가하기: 다각형 추가를 클릭하고 데이터 소스를 선택한 다음 다각형 키를 정하고 저장을 클릭합니다.

데이터 소스

기능, 장치, 개체(별칭). 필요하면 필터를 적용합니다.

키

• 다각형 키: 좌표 배열이 담긴 속성 키(기본값: perimeter).
• 추가 데이터 키: 라벨, 툴팁, 함수에 쓸 추가 키.

모양 — 채우기

다각형 안쪽을 그리는 방식:

• 색상: 단색 채우기.
• 줄무늬: 대각선 빗금 무늬. 구역이나 제한 구역을 나타낼 때 유용합니다.
• 이미지: 사용자 지정 이미지 채우기.

모양 — 선

테두리 선. 두께(px)와 색상을 정합니다.

모양 — 라벨

다각형 가운데에 표시되는 글. 패턴 또는 함수.

모양 — 툴팁

클릭하거나 마우스를 올리면 나타나는 팝업. 패턴 또는 함수. 트리거, 자동 닫기, 태그 동작을 설정합니다.

동작

클릭 시 동작. 마커와 같은 동작 유형을 씁니다.

그룹

가시성을 켜고 끌 수 있도록 그룹 이름을 지정합니다.

다각형 편집

상호작용 도구:

• 편집 도구: 추가, 편집(꼭짓점 크기 조정), 이동, 제거 도구를 켭니다.
• 위치 저장 속성 범위: 좌표를 저장할 속성 범위(서버 또는 공유).
• 정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용.

원은 중심 좌표와 반지름으로 둥근 영역을 정합니다. 신호 범위, 감지 범위, 영향 구역을 나타낼 때 유용합니다.

좌표 형식:

{"latitude": value, "longitude": value, "radius": value}

원 추가하기: 원 추가를 클릭하고 데이터 소스를 선택한 다음 원 키를 정하고 저장을 클릭합니다.

데이터 소스

기능, 장치, 개체(별칭). 필요하면 필터를 적용합니다.

키

• 원 키: 중심과 반지름 데이터가 담긴 속성 키(기본값: perimeter).
• 추가 데이터 키: 라벨, 툴팁, 함수에 쓸 추가 키.

모양 — 채우기

색상, 줄무늬, 이미지 — 다각형과 같은 옵션입니다.

모양 — 선

테두리 선 두께와 색상.

모양 — 라벨

원 가운데에 표시되는 글. 패턴 또는 함수.

모양 — 툴팁

클릭하거나 마우스를 올리면 나타나는 팝업. 패턴 또는 함수. 트리거, 자동 닫기, 태그 동작을 설정합니다.

동작

클릭 시 동작. 마커와 같은 동작 유형을 씁니다.

그룹

가시성을 켜고 끌 수 있도록 그룹 이름을 지정합니다.

원 편집

상호작용 도구:

• 편집 도구: 추가, 편집(반지름 크기 조정), 이동, 제거 도구를 켭니다.
• 위치 저장 속성 범위: 서버 또는 공유.
• 정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용.

Polylines는 속성 좌표 배열로 저장한 고정 경로를 표시합니다(예: 정류장이 있는 고정 버스 노선, 지하철 노선, 배관). 시계열 데이터로 경로를 그리는 이동 경로와 달리, Polylines는 엔티티 속성으로 고정된 모양을 그립니다.

좌표 형식:

[[lat1,lng1],[lat2,lng2],...,[latN,lngN]]

Polyline 추가하기: Add polyline을 클릭하고 데이터 소스를 선택한 다음 Polyline 키를 정하고 저장을 클릭합니다.

데이터 소스

기능, 장치, 개체(별칭). 필요하면 필터를 적용합니다.

키

• Polyline key: 좌표 배열이 담긴 속성 키(기본값: perimeter).
• 추가 데이터 키: 라벨이나 툴팁에 쓸 추가 키.

모양 — 선

선 두께(px)와 색상.

모양 — 라벨

폴리라인을 따라 표시되는 글. 패턴 또는 함수.

모양 — 툴팁

클릭하거나 마우스를 올리면 나타나는 팝업. 패턴 또는 함수. 다음을 설정합니다:

• 툴팁 트리거: 클릭 시 또는 호버 시.
• 툴팁 자동 닫기.
• 태그 동작: 툴팁 안의 이름 있는 동작 링크.

동작

클릭 시 동작. 유형: 동작 안 함, 새로운 대시보드 상태 탐색, 현재 대시보드 상태 업데이트, 다른 대시보드 탐색, Custom action, Custom action (with HTML template), 모바일 액션, URL 열기.

그룹

가시성을 켜고 끌 수 있도록 그룹 이름을 지정합니다.

Edit polyline

상호작용 도구:

• 편집 도구: 추가, 편집, 이동, 제거 도구를 켭니다.
• 위치 저장 속성 범위: 좌표를 저장할 속성 범위(서버 또는 공유).
• 정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용.