DuraMap-Xr에서 특정 도형 하일라이팅(Highlighting) 시키기

DuraMap-Xr에서 SHP 파일로 구성된 레이어의 특정 번호의 도형을 아래의 화면처럼 하일라이팅(깜빡거림) 시키는 코드에 대한 설명 입니다.

듀라맵에서는 특정 도형을 직접적으로 하일라이팅 시키는 API를 제공하지는 않지만, 기본적으로 제공하는 API와 Event를 이용하면 가능합니다. 이와 같은 기능은 GIS 어플리케이션에서 많이 사용되므로, 이 기능 하나에 대해 쉽게 재사용할 수 있도록 클래스화하여 제공합니다. 클래스의 이름은 DuraMapUtility_HilightingShape인데요. 이 글은 DuraMapUtility_HilightingShape 클래스를 사용하는 내용에 대한 정리입니다.

먼저 DuraMapUtility_HilightingShape 클래스에 대한 객체 변수를 원하는 곳에 선언합니다. 필자의 경우 듀라맵의 지도 컴포넌트가 놓여진 폼(Form)의 private 변수로 선언하였습니다.

private DuraMapUtility_HilightingShape HilightingShape = null;

위의 DuraMapUtility_HilightingShape 클래스에 대한 객체 변수를 폼의 생성자에서 다음처럼 생성 하는데요. 생성자의 인자로 받는 것은 듀라맵의 지도뷰 객체입니다.

public Form1()
{
    ....

    HilightingShape = new DuraMapUtility_HilightingShape(axXr1);
}

그리고 듀라맵의 지도뷰 객체이 제공하는 이벤트 중 OnCustomDraw에 대해 다음처럼 입력합니다.

private void axXr1_OnCustomDraw(object sender, AxXrMapLib._IXrMapControlEvents_OnCustomDrawEvent e)
{
    HilightingShape.OnCustomDrawEvent(e);
}

여기까지가 원하는 도형을 하일라이팅하기 위한 모든 준비 과정입니다.

이제 다음처럼 언제든지 어떤 레이어를 구성하는 도형을 하일라이팅할 수 있는데요. Hilighting 함수의 첫번째 인자는 하일라이팅하고자 하는 레이어이고 877이라는 숫자값은 하일라이팅되는 도형에 대한 FID 값입니다.

HilightingShape.Hilighting("lyr", 877);

참고로 아래의 코드는 사용자가 지도 상에서 마우스를 클릭했을 때 클릭되어진 도형의 FID를 얻는 함수로, DuraMap-Xr의 지도뷰가 제공하는 OnLButtonUp 이벤트에서 실행되는 코드입니다.

private void axXr1_OnLButtonUp(object sender, AxXrMapLib._IXrMapControlEvents_OnLButtonUpEvent e)
{
    XrMapLib.IValueList FIDs = axXr1.GetFIDFromMousePoint("lyr", e.x, e.y, false);
    if (FIDs.Count > 0)
    {
        int FID = FIDs.GetValueAsInteger(0);
        // 위의 FID가 사용자가 클릭한 도형의 고유한 Feature ID 값 입니다.
    }
}

DuraMapUtility_HilightingShape 클래스와 이 클래스를 사용하는 예제 코드는 다음의 URL에서 다운로드할 수 있습니다.



SVG에서 선 끝에 도형 달기(화살표 선 표현 예)

SVG를 이용해 웹에서 원하는 도형을 표현할 수 있는데요. 이 중 어떤 라인의 끝에 도형을 달아 화살표 선을 표현하는 SVG에 대한 코드입니다.

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 10 10"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
        markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <polyline points="10,10 100,100" fill="none" stroke="black" 
      stroke-width="2" marker-end="url(#Triangle)" />
</svg>

코드를 보면 SVG의 기능 중 marker 정의를 이용하고 있습니다. CAD에서의 Block 개념처럼.. 마치 도형을 미리 정의해 두고 재활용하는 방식입니다. marker의 orient를 auto로 지정해 선의 기울기에 맞춰 자동으로 회전할 수 있고, 회전시 원점을 지정하기 위해 refX와 refY값을 이용합니다.

정의해둔 marker는 polyline 등과 같은 SVG 요소의 marker-end 등과 같은 속성에 마커의 ID 값을 지정하면 됩니다.

결과는 아래와 같습니다.

[xyz-ihs snippet=”SVG-MARKER”]

참고로 위의 결과는 IE보다 Chrome이 더 나은 결과를 제공합니다.