테스트 환경

vue.js : 3.2.13

네이버의 길찾기 api(Directions 15)를 활용하여, 최단거리를 계산하였다.

이전 글(직선 거리)과 기능은 동일하다.

아래 동영상 설명.

1. 시작 주소 저장 버튼 클릭 -> 시작 주소를 시작점으로 하기 위해서, 별도로 조회 함.

2.목적지 주소 검색 버튼 클릭 -> 목적지 주소의 GPS상 좌표를 구해야 하기 때문에 시작 주소와 구분함

*이유: 비동기 호출이라.. 순서가 달라짐. 먼저 보냈다고 해서 먼저 오지 않음.

3. 경로 조회 버튼 클릭-> 최단 거리를 구하는 로직을 실행함.

*목적지 주소 검색 api가 비동기인 관계로... 끝나는 시점을 계산 해야되는데... 시작 주소 저장 이벤트와 같은

로직을 실행 하는 관계로 별도로 만듬.

네이버의 길찾기 api는 많이 짜기 때문에... 적절히 사용해야된다.

안그러면, 돈을 지불해야 될 상황이 생긴다.

테스트하면서, 몇번 안한거 같은데... 벌써.. 2천번이 넘었다.

코드

<template>
    <table>
        <tr>
            <td>
                시작주소
            </td>
            <td>
                <DxTextBox placeholder="시작주소" :value="addressStart"  :width="500" />
            </td>
        </tr>
        <tr>
            <td>
                목적지 주소 목록
            </td>
            <td>
                <DxTextBox placeholder="주소" :value="addressList"  :width="500" />
            </td>
        </tr>
    </table>
    <DxButton  text="시작 주소 저장" :width="150" styling-mode="contained" type="default" @click="onClickStartAddressSearch()" />
    <DxButton  text="목적지 주소 검색" :width="150" styling-mode="contained" type="default" @click="onAddressListSearch()" />
    <DxButton  text="경로 조회" :width="100" styling-mode="contained" type="default" @click="onSearchRoute()" />
    <DxButton  text="test" :width="100" styling-mode="contained" type="default" @click="onSave()" />
 
    <table>
        <tr>
            <td>
                <div id="map" style="width:600px;height:600px"></div>
            </td>
            <td style="vertical-align:text-top;">
                <span style="display: inline-block;">
                    <DxDataGrid
                        id="gridContainer"
                        :data-source="orderByRanking"
                        :column-auto-width="false"
                        :show-borders="false"
                        :row-alternation-enabled="true"
                        key-expr="Rank"
                        ref="grid"
                        @row-click="onGridRowClick"
                        >
                        <DxColumnChooser :enabled="false"/><!-- 컬럼 감추기, 선택해서 보이게 우상단에 아이콘 하나 생김 -->
                        <DxColumnFixing :enabled="false"/> <!--행고정시 다음 옵션 필수   :column-auto-width="false"  :fixed="true"  --->
                        <DxScrolling mode="infinite"/><!--무한 스크롤-->
                        <DxColumn :width="80" data-field="Rank"  :fixed="true" caption="Rank" data-type="int" alignment="center" :allow-sorting="false" />
                        <DxColumn :width="150" data-field="route" caption="경로" data-type="string" alignment="center" :allow-sorting="false" />
                        <DxColumn :width="100" data-field="distance" caption="거리" data-type="string" alignment="right" :allow-sorting="false" />
                    </DxDataGrid>
                </span>
                <span style="display: inline-block;">
                    <ul>
                        <li v-for="item in markerLst" v-bind:key="item">
                            {{ item.dong }} - {{ item.dongNo }}
                        </li>
                    </ul>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li v-for=" (item, index) in orderByRanking" v-bind:key="item" @click="onDrawRouteLine(index)">
                        {{ index + 1 }} -
                        route:
                        <span v-for = "r in item.route" v-bind:key="r">
                            {{ r }}
                        </span>
                        , distance:{{ item.distance }}
                    </li>
                </ul>
            </td>
            <td>
                <ul>
                    <li v-for="item in routeDepth" v-bind:key="item">
                        route:
                        <span v-for = "r in item.route" v-bind:key="r">
                            {{ r }}
                        </span>
                        level: {{ item.level }} - distance:{{ item.distance }}
                    </li>
                </ul>
            </td>
        </tr>
    </table>
</template>
<script>
    import { RestClient, DataRequest }from '@/scripts/api-services/client' //Service 호출 스크립트 임포트
    import { DxButton } from 'devextreme-vue/button'
    import { DxTextBox } from "devextreme-vue/text-box"
    import { DxDataGrid, DxColumn, DxColumnChooser, DxScrolling
        //DxColumnFixing,
        //DxScrolling
    } from 'devextreme-vue/data-grid'
 
    var nMap
 
    export default {
        name: 'NaverMap3'
        , components: {
            DxButton
            , DxTextBox
            , DxDataGrid
            , DxColumn
            , DxColumnChooser
            , DxScrolling
        }
        , data() {
            return {
                markerLst : []// {'dong' : dong, 'dongNo' : dongNo, 'road' : road,'roadNo' : roadNo, 'x' : x, 'y' : y }
                , markerDistance :[]//{s:0, e:1, distance:3}
                //{"s": 0,"e": 4,"distance": 4065,"duration": 620844,"data": {}}
                , routeDepth :[]//{route:'0,1,2,3', level: 3, distance:3}
                //recursionCnt : 4 //시작점인 0을 빼면 4계층
                //  {"route":[0,1,2,3,4],"level":4,"distance":"7.93"}
                // ,{"route":[0,1,2,4,3],"level":4,"distance":"6.33"}
                // ,{"route":[0,1,3,2,4],"level":4,"distance":"5.79"}
                , orderByRanking : []
                // {"route":[0,1,3,4,2],"level":4,"distance":"5.27"}
                // ,{"route":[0,2,4,3,1],"level":4,"distance":"5.50"}
 
                , mapObject : []//{marker : marker, overlay : overlay}
 
                , routeLine : undefined
 
                //주소 목록
                , addressList :'상록구 성포동 590,단원구 고잔동 767,단원구 고잔동 702,상록구 사동 1585,상록구 이동 693-4'
                , addressStart :'단원구 초지동 741'
                , addressEnd :'상록구 이동 574-1'
 
                , checkAsyncSendCnt : 0//네이버 맵 경로 요청 전송 건수
            }
        }
        , mounted() {
 
            this.initMap()
        }
        , methods: {
            initMap()
            {
                var mapOptions = {
 
                      scaleControl: true           //우하단 축척
                    , logoControl: true            //네이버 로고 뭔지 모르겠음.
                    , mapDataControl: true         //좌하단 네이버 로고
                    , mapTypeControl: true         //지도 유형 컨트롤
                    , zoom: 14
                    , zoomControl: true            //줌 컨트롤
                    // , zoomControlOptions: {     //줌 컨트롤 스타일
                    //     style: naver.maps.ZoomControlStyle.SMALL,
                    //     position: naver.maps.Position.TOP_RIGHT
                    //     }                        //주석 풀면 우측에 +-로만 생김
                    , maxZoom : 19                  //최대 줌 레벨
                    , minZoom :6                    //최소 줌 레벨
                    , disableDoubleClickZoom : false//더블 클릭해 지도를 확대하는 기능의 사용 여부
                    , mapTypeId: naver.maps.MapTypeId.NORMAL//NORMAL SATELLITE HYBRID  지도의 초기 지도 유형 id입니다.
                    , keyboardShortcuts : true      //키보드 방향 키를 이용한 지도 이동(패닝) 허용 여부입니다.
                }
 
                nMap = new naver.maps.Map('map', mapOptions)
 
                naver.maps.Event.addListener(nMap, 'click', this.mapClick)
                naver.maps.Event.addListener(nMap, 'rightclick', this.mapRightClick)
 
                nMap.setCenter(new naver.maps.LatLng(37.3089449, 126.8367496))
            }
 
            //#region event
            ,onClickStartAddressSearch()
            {
                this.callNaverAddressService(this.addressStart)//시작 주소
            }
 
            //주소 목록 검색
            ,onAddressListSearch()
            {
                //1.주소 분할
                var addrList = this.addressList.split(',')
 
                //2.리스트 추가
                for(var i=0; i < addrList.length; i++)
                    this.callNaverAddressService(addrList[i]);//주소
            }
 
            //네이버 맵 경로 조회
            , onSearchRoute()
            {
                for(var i= 0; i < this.markerLst.length; i++ )
                {
                    for(var j = 0; j < this.markerLst.length; j++ )
                    {
                        if(i != j)
                        {
                            this.callNaverRoute(i, j, this.markerLst[i].x, this.markerLst[i].y, this.markerLst[j].x, this.markerLst[j].y);
 
                            //네이버 맵 경로 요청 전송 건수 저장.
                            this.checkAsyncSendCnt++;
                        }
                    }
                }
 
                console.log(this.markerDistance)
            }
 
            , onSave()
            {
                console.log('testOnSave')
            }
 
            //#region map event
            , mapClick(e)
            {
                alert('현좌표(left click)' + e.coord.x + '-' + e.coord.y)
            }
 
            , mapRightClick(e)
            {
                naver.maps.Service.reverseGeocode({
                    coords: new naver.maps.LatLng(e.coord.y, e.coord.x),
                }, function(status, response) {
                    if (status !== naver.maps.Service.Status.OK)
                        return alert('Something wrong!');
 
                    var result = response.v2 // 검색 결과의 컨테이너
                    //var items = result.results // 검색 결과의 배열
                    //var address = result.address // 검색 결과로 만든 주소
 
                    alert('현주소(rightClick) ' + result.address.jibunAddress)
                });
            }
 
            //#endregion
 
            , onGridRowClick(e)
            {
                this.drawRouteLine(e.loadIndex);
            }
            //#endregion
 
            //#region function
            , drawMarker(index, prevPoint)
            {
                var pointData = this.markerLst[prevPoint];
 
                 //이미지 마커
                 var markerOptions = {
                        position: new naver.maps.LatLng(pointData.y, pointData.x)
                        , map: nMap
                        , icon: {
                                url: require('@/images/' + (prevPoint == 0 ? 'ico_tmap.svg' : 'ico_here.svg'))
 
                            }
                        };
 
                var marker = new naver.maps.Marker(markerOptions)
 
                var content = '<span style="color: crimson;">(' + index + ')</span>' +  pointData.dong + '-' + pointData.dongNo;
                var overlay = new naver.maps.Marker({
                    position: new naver.maps.LatLng(pointData.y, pointData.x)
                    ,icon: {
                        content: '<div style="position:relative;bottom:10px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;font-size:12px;padding:5px;background:#fff;">' +  content + '</div>'
                        , anchor: new naver.maps.Point(-5, -5)
                    }
                    , map: nMap
                })
 
                this.mapObject.push({marker : marker, overlay : overlay})
 
            }
 
            //최단 거리 구하기
            , totalDistance()
            {
                var data;
                var depthLevel = 0;
                var route;
                var distance = 0;
 
                //기준점(시작점) 0에서 시작
                for(var i= 1;  i < this.markerLst.length; i++)
                {
                    //재귀를 돌아야 됨.
                    depthLevel = 1;
                    route = new Array();
                    route.push(0);
                    route.push(i);
 
                    //거리계산
                    for(var j = 0; j < this.markerDistance.length; j++)
                        if((0 == this.markerDistance[j].s && i == this.markerDistance[j].e))
                            distance = Number(this.markerDistance[j].distance);
 
                    data = {'route': route, 'level' : depthLevel + 1, 'distance' : distance};
                    this.recursionRoute(data, depthLevel);
                }
            }
 
            , recursionRoute(data, depthLevel)
            {
                var rData
                var level = depthLevel + 1
                var s, e
 
                if(level < this.markerLst.length)
                {
                    for(var i= 1;  i < this.markerLst.length; i++)
                    {
                        if(!data.route.includes(i))//포함되어 있는지 체크
                        {
                            rData = JSON.parse(JSON.stringify(data))//객체 복사 문제 생김.
                            //rData = data
                            rData.route.push(i)
                            rData.level = level
 
                            //거리계산
                            //2가지 경우, se, e,s로 해서 더할 것.
                            s = rData.route[rData.route.length-2]//-1로 할 경우 route.push(i) 앞에 있어야 됨.
                            e = i
                            for(var j = 0; j < this.markerDistance.length; j++)
                            {
                                if((s == this.markerDistance[j].s && e == this.markerDistance[j].e) || (e == this.markerDistance[j].s && s == this.markerDistance[j].e))
                                {
                                    rData.distance = rData.distance + this.markerDistance[j].distance
                                }
                            }
 
                            this.recursionRoute(rData, level)
 
                            if(level == this.markerLst.length -1 ){
                                //console.log(rData)
                                this.routeDepth.push(rData)
                            }
                        }
                    }
                }
            }
 
            //swap
            , ranking()
            {
                var data = JSON.parse(JSON.stringify(this.routeDepth))
 
                data.sort(function(a,b) {
 
                    //a-b는 오름차순
                    //b-a는 내림차순
                    return parseFloat(a.distance) - parseFloat(b.distance);
                });
 
                for(var i = 0; i< data.length; i++)
                    data[i].Rank = i + 1;
 
                this.orderByRanking = data;
            }
 
            //draw route line
            , drawRouteLine(index)
            {
                var routeRow = this.orderByRanking[index];
                var polyLinePath= [];
                var prevPoint = -1;
                var route;
 
                //마커, 인포 삭제
                for(var arr in this.mapObject)
                {
                    this.mapObject[arr].marker.setMap(null)
                    this.mapObject[arr].overlay.setMap(null)
                }
 
                this.mapObject = []
 
                for(var i = 0; i< routeRow.route.length; i++)
                {
                    if(prevPoint != -1)
                    {
                        //여기서 이전 지점과 다음지점 반복한번더
                        for(var j=0; j < this.markerDistance.length; j++ )
                        {
                            //해당 조건의 루트를 찾아야 됨.
                            if(this.markerDistance[j].s == prevPoint && this.markerDistance[j].e == routeRow.route[i])
                            {
                                route = this.markerDistance[j].data.route.trafast[0].path;
 
                                for(var k = 0; k < route.length; k++)
                                {
                                    polyLinePath.push(new naver.maps.LatLng(route[k][1], route[k][0]));
                                }
                            }
                        }
                    }
 
                    prevPoint = routeRow.route[i];
 
                    //마커 그리기
                    this.drawMarker(i, prevPoint);
                }
 
                if(this.routeLine != undefined)
                    this.routeLine.setMap(null);
 
                //routeLine
                var polyline = new naver.maps.Polyline({
                    path: polyLinePath,
                    strokeColor: '#00CA00',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    zIndex: 1,
                    clickable: true,
                    map: nMap
                });
 
                this.routeLine = polyline;
            }
            //#endregion function
 
            //#region service
 
            //두 지점간의 거리 조회
            , callNaverRoute(i, j, startX, startY, endX, endY)
            {
                var that = this;
                var controller = 'Map'; // 컨트롤러
                var method = "GetDriving";  // 메서드
 
                // 서비스
                var service = new RestClient(controller, method, true);
 
                // 요청
                var request = new DataRequest();
                request.parameters = {
                    'startX': startX
                    , 'startY' : startY
                    , 'endX' : endX
                    , 'endY' : endY
                };
 
                service.execute(request, function (response) {
                    //console.log('getDriving')
                    if (response.status == 200) {                      // 데이터 조회에 성공 한 경우
                        //alert(response);
                        var distance = response.data.route.trafast[0].summary.distance;
                        var duration = response.data.route.trafast[0].summary.duration;
                        that.markerDistance.push({'s': i, 'e': j, 'distance' : distance, 'duration' : duration, 'data' : response.data  });
 
                        //비동기여서 전체가 다 들어오면, 다음 단계로 진행하기 위해서... 계산
                        if(((that.markerLst.length -1) * (that.markerLst.length -1)) - (that.markerLst.length -1) == that.markerDistance.length)
                        {
                            that.totalDistance();
                            that.ranking();
                        }
                    }
                });
            }
 
            //주소로 좌표 불러오기
            ,callNaverAddressService(address)
            {
                var that = this;
 
                naver.maps.Service.geocode({query:address},function(status, response){
 
                    if (status !== naver.maps.Service.Status.OK)
                        return alert('Something wrong!');
 
                    var dong = response.v2.addresses[0].addressElements[2].longName;//동
                    var dongNo = response.v2.addresses[0].addressElements[7].longName;//지번
                    var road = response.v2.addresses[0].addressElements[4].longName;//도로명 주소
                    var roadNo = response.v2.addresses[0].addressElements[5].longName;//도로명 지번
                    var x = response.v2.addresses[0].x;//126.8620435
                    var y = response.v2.addresses[0].y;//37.3047594
 
                    //주소 목록은 저장{dong:'', dongNo:'', road:'',roadNo='', x:, y: }
                    that.markerLst.push({'dong' : dong, 'dongNo' : dongNo, 'road' : road,'roadNo' : roadNo, 'x' : x, 'y' : y })
 
                })
            }
 
            //#endregion
        }
    }
</script>
<style scoped>
#gridContainer {
  height: 600px;
  width:400px;
}
 
 
</style>

*직선 거리일 경우, 1번지점에서 2번 지점, 2번지점에서 1번지점일 경우 거리는 동일하게 나오므로,

1-2, 2-1은 동일한 값을 가진다.

하지만, 실제 도로의 경우는 P턴, 일방통행, 좌회전 금지 등등의 이유로 1-2와, 2-1은 동일하지 않다.

그러므로, 1-2 뿐 만 아니라 역인 2-1의 경우도 생각하여야 한다.

길찾기 API 호출의 경우는 아래 URL을 참조하면된다.

c# 코드는 이전 글을 참조하면된다.

동일한 코드다.

Direction 15

https://api.ncloud-docs.com/docs/ai-naver-mapsdirections15

Direction 15 c#구현 코드

2023.03.16 - [Vue.js] - Naver Directions 15(네이버 길찾기)

http://blog.naver.com/eulwang광고

인천 내비매립 - 제이썬가드 파인드라이브 최우수 명장점 꼼꼼하게 시공하는 파인드라이브 내비매립 전문점. 통합안테나/후방카메라 장착

http://www.coupang.com광고

쿠팡 네비게이션 와우회원은 무제한 무료 배송 네비게이션, 와우회원은 로켓배송 전 상품 무료배송 오늘주문 내일도착! 꼭 필요한 제품은 로켓배송으로 빠르게, 정기배송으로 더 저렴하게

저작자표시

'Vue.js' 카테고리의 다른 글

최단거리 구하기(1) (25)	2023.03.22
Naver Directions 15(네이버 길찾기) (78)	2023.03.16
javascript json object 복사 (149)	2023.02.09
vue.js naver map - vworld 폴리곤 데이터 보정 (68)	2022.11.03
DevExtreme DataGrid multi header (vue.js) (2)	2022.09.17

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

캡틴노랑이

최단거리 구하기(2) - 네비게이션 경로 활용

Direction 15

'Vue.js' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

최단거리 구하기(2) - 네비게이션 경로 활용

Direction 15

'Vue.js' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역