예광탄 [25기 박재완] 오버레이 원 클릭 시 해당 위치 오염도 차트로 보여주기

[25기 박재완]

오버레이 원  클릭 시 해당 위치 오염도 차트로 보여주기	소요 시간 :	13/05/13
	작성자 :	박 재완

오버레이 원을 클릭 할 때 그 원의 좌표를 얻어와서 새로운 window창을 띄우려고 하였다.

 

처음에는 사용자 정의 마커가 아니므로 자바 스크립트 상에서 C# 함수를 호출하여 사용하려고 하였다.

하지만 자바 스크립트 상에서 C#함수를 호출 하려면 지금까지 만든 스크립트를 대폭 수정하고 API를 다시 구성해야 해서 많은 시간이 들 것 같았다.

그래서 스크립트의 mouseenter 이벤트와 mouseleave 이벤트를 사용하여 스크립트 안에 배열에 좌표값을 저장해 뒀다가 호출 하는 형식으로 프로그램을 구성하였다.

function Mapenter(){                   

                    var point = circle.getCenterPoint();

                    co[0] = point.lat();

                    co[1] = point.lng();

                }

                circle.attach("mouseenter", Mapenter);

마우스가 원 안에 들어오면 그 원의 중심점 좌표를 얻어와 배열안에 저장한다.

                function Mapleave() {

                    co[0] = null;

                    co[1] = null;                   

                }

                circle.attach("mouseleave", Mapleave);

반대로 마우스가 원 밖으로 나가면 배열을 초기화 시켜 엉뚱한 값이 들어가있지 않게 해준다.

double xxxx = (double)browser.InvokeScript("GetX");

double yyyy = (double)browser.InvokeScript("GetY");

foreach (Pollution p in plist)

                {

                    if (p.Cox == x)

                    {

                        if (p.Coy == y)

                        {

                            MyChart mc = new MyChart();

                            mc.SetPollution(p);

                            mc.Show();

                        }

                    }

                }

C# 코드에서는 마우스포인터가 원 안에 있을 때 의 좌표를 받아온다.

받아온 좌표를 통해 저장되 있는 측정소의 위치와 비교 하여 해당 측정소를 찾아낸다.

WPF에서 차트는 제공하지 않으며 따로 라이브러리를 무료로 제공하는 사이트 에서 라이브러리를 추가하여 visifire 차트를 사용하였다.

Chart chart = new Chart();

            chart.Width = 500;

            chart.Height = 300;

            chart.AnimationEnabled = false;           

            Title title = new Title();           

            title.Text = poll.Name;           

            chart.Titles.Add(title);

DataSeries dataSeries = new DataSeries();

            dataSeries.RenderAs = RenderAs.Column;           

            DataPoint dataPoint = new DataPoint();

            DataPoint dataPoint1 = new DataPoint();

            DataPoint dataPoint2= new DataPoint();

            DataPoint dataPoint3 = new DataPoint();

            DataPoint dataPoint4 = new DataPoint();

            DataPoint dataPoint5 = new DataPoint();

            dataPoint.AxisXLabel = "통합 대기지수";

            dataPoint1.AxisXLabel = "미세먼지";

            dataPoint2.AxisXLabel = "오존";

            dataPoint3.AxisXLabel = "이산화질소";

            dataPoint4.AxisXLabel = "일산화탄소";

            dataPoint5.AxisXLabel = "아황산가스";

            dataPoint.YValue = poll.Total/100;

            dataPoint1.YValue = poll.Dust/100;

            dataPoint2.YValue = poll.Ozone;

            dataPoint3.YValue = poll.No;

            dataPoint4.YValue = poll.Co;

            dataPoint5.YValue = poll.So;

            dataSeries.DataPoints.Add(dataPoint);

            dataSeries.DataPoints.Add(dataPoint1);

            dataSeries.DataPoints.Add(dataPoint2);

            dataSeries.DataPoints.Add(dataPoint3);

            dataSeries.DataPoints.Add(dataPoint4);

            dataSeries.DataPoints.Add(dataPoint5);

chart.Series.Add(dataSeries);

grid.Children.Add(chart);

결과 화면

 

아직 DB가 완전히 구성되지 않아 샘플 데이터 만으로 예광탄을 만들고 있으나 DB가 완성 된다면

좀더 자세하게 차트를 표현할 수 있을 것 같다.