Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

경로그리기 관련 가운데로 이동하는 방법

#1

v2에서 아래와 같이 경로가 짤립니다.
20191119_182244

그래서, 아래처럼 가운데오게 하는 방법없나요.
20191119_182352

아래는 소스입니다.

    var map, markerList;
    // 1. 지도 띄우기
    // 1. 지도 띄우기
    map = new Tmapv2.Map("map", {
        center: new Tmapv2.LatLng(37.52084364186228, 127.058908811749),
        width: "100%",
        height: "400px"
    });


    function drawData(data) {
        // 지도위에 선은 다 지우기
        //RESET_LINE();

        routeData = data;

        var resultStr = "";
        var distance = 0;
        var idx = 1;
        //var enterData = [];

        /* 	if(data.serverTime < 1){
                data.serverTime = "0"+data.serverTime;
            } */

        var newData = [];
        var equalData = [];
        var pointId1 = "-1234567";
        var ar_line = [];
        var pointArray = [];
        var new_polyLine = [];
        for (var i = 0; i < data.features.length; i++) {
            var feature = data.features[i];

            //		console.log(feature);
            //배열에 경로 좌표 저잘
            if (feature.geometry.type == "LineString") {
                ar_line = [];
                for (var j = 0; j < feature.geometry.coordinates.length; j++) {
                    var startPt = new Tmapv2.LatLng(feature.geometry.coordinates[j][1], feature.geometry.coordinates[j][0]);
                    ar_line.push(startPt);

                    pointArray.push(feature.geometry.coordinates[j]);
                }
                var polyline = new Tmapv2.Polyline({
                    path: ar_line,
                    strokeColor: "#ff0000",
                    strokeWeight: 6,
                    map: map
                });

                new_polyLine.push(polyline);
            }

            var pointId2 = feature.properties.viaPointId;
            if (pointId1 != pointId2) {
                equalData = [];
                equalData.push(feature);
                newData.push(equalData);
                pointId1 = pointId2;
            }
            else {
                equalData.push(feature);
            }
        }

        console.log(equalData);
        console.log(newData);
        geoData = newData;

        var markerCnt = 1;
        for (var i = 0; i < newData.length; i++) {
            var mData = newData[i];
            var type = mData[0].geometry.type;


            var pointType = mData[0].properties.pointType;
            var pointTypeCheck = false; // 경유지 일때만 true

            if (mData[0].properties.pointType == "S") {
                var img = 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_s.png';
                var lon = mData[0].geometry.coordinates[0];
                var lat = mData[0].geometry.coordinates[1];

                //ReAddMarker2(lon, lat, img);

            }
            else if (mData[0].properties.pointType == "E") {
                var img = 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_e.png';
                var lon = mData[0].geometry.coordinates[0];
                var lat = mData[0].geometry.coordinates[1];
                //ReAddMarker2(lon, lat, img);
            }
            else {
                markerCnt = i;
                var lon = mData[0].geometry.coordinates[0];
                var lat = mData[0].geometry.coordinates[1];
                //ReAddMarker(lon, lat, markerCnt);
            }

        }

    }


    map.setZoom(10);



    // 2. 시작, 도착 심볼찍기
    // 시작
    addMarker("llStart", 127.02810900563199, 37.519892712436906, 1);

    // 도착
    addMarker("llEnd", 127.0752826, 37.1498279, 2);

    function addMarker(status, lon, lat, tag) {

        //출도착경유구분
        //이미지 파일 변경.
        var markerLayer;
        switch (status) {
            case "llStart":
                imgURL = 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_s.png';
                break;
            case "llPass":
                imgURL = 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_b_m_p.png';
                break;
            case "llEnd":
                imgURL = 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_m_e.png';
                break;
            default:
        };

        var marker = new Tmapv2.Marker({
            position: new Tmapv2.LatLng(lat, lon),
            icon: imgURL,
            map: map
        });

        // 마커 드래그 설정
        

        return marker;
    }


    // 3. 경유지 심볼 찍기
    //addMarker("llPass", 127.07389565460413, 37.5591696189164, 3);
    //addMarker("llPass", 127.13346617572014, 37.52127761904626, 4);



    // 4. 경유지 최적화 API 사용요청
    var startX = 127.02810900563199;
    var startY = 37.519892712436906;
    var endX = 127.0752826;
    var endY = 37.1498279;
    //var passList = "127.07389565460413,37.5591696189164_127.13346617572014,37.52127761904626";
    var prtcl;
    var headers = {};
    headers["appKey"] = 'xxxx-xxxx-xxxx-xxxx';
    $.ajax({
        method: "POST",
        headers: headers,
        url: "https://apis.openapi.sk.com/tmap/routes?version=1&format=json",//
        async: false,
        data: {
            startX: startX,
            startY: startY,
            endX: endX,
            endY: endY,
            //passList: passList,
            reqCoordType: "WGS84GEO",
            resCoordType: "WGS84GEO",
            angle: "172",
            searchOption: "0",
            trafficInfo: "Y"
        },
        success: function (response) {
            prtcl = response;

            // 5. 경유지 최적화 결과 Line 그리기
            var trafficColors = {
                extractStyles: true,

                /* 실제 교통정보가 표출되면 아래와 같은 Color로 Line이 생성됩니다. */
                trafficDefaultColor: "#636f63", //Default
                trafficType1Color: "#19b95f", //원할
                trafficType2Color: "#f15426", //지체
                trafficType3Color: "#ff970e"  //정체

            };


            var style_red = {
                fillColor: "#FF0000",
                fillOpacity: 0.2,
                strokeColor: "#FF0000",
                strokeWidth: 3,
                strokeDashstyle: "solid",
                pointRadius: 2,
                title: "this is a red line"
            };
            drawData(prtcl);


            // 6. 경유지 최적화 결과 반경만큼 지도 레벨 조정

            var newData = geoData;
            for (var i = 0; i < newData.length; i++) {
                var mData = newData[i];
                var pointType = mData[0].properties.pointType;
                if (pointType == "S") {
                    map.setCenter(new Tmapv2.LatLng(mData[0].geometry.coordinates[1], mData[0].geometry.coordinates[0]));
                }
                else {
                    if (mData.length > 1) {
                        var ar_line = [];
                        var startPt, endPt;
                        var PTbounds = new Tmapv2.LatLngBounds();

                        for (var j = 0; j < mData[1].geometry.coordinates.length; j++) {
                            var linePt = new Tmapv2.LatLng(mData[1].geometry.coordinates[j][1], mData[1].geometry.coordinates[j][0]);
                            ar_line.push(linePt);
                            PTbounds.extend(linePt);
                        }
                        map.fitBounds(PTbounds);
                    }
                    else {
                        map.setCenter(new Tmapv2.LatLng(mData[0].geometry.coordinates[1], mData[0].geometry.coordinates[0]));
                    }
                }
            }

        },
        error: function (request, status, error) {
            console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
        }
    });


</script>
0 Likes

#2

안녕하세요.

T map API 운영담당자입니다.

현재 usecase 코드를 업데이트 하였습니다.
경로의 크기만큼 지도의 줌레벨을 알맞게 설정하도록 하시면 됩니다.

아래의 링크를 참고하시면 도움이 되실겁니다.


[경로탐색 만들어보기 USECASE]
http://tmapapi.sktelecom.com/main.html#webv2/usecase/UseCasePathSearch


감사합니다.

1 Like