Route | NOSTRA Developer

Route

ตัวอย่างนี้จะแสดงวิธีการพัฒนาฟังก์ชันคำนวณเส้นทาง โดยให้ผู้ใช้สามารถคลิกบนแผนที่เพื่อกำหนดจุดต้นทางและจุดปลายทาง แล้วกำหนดรูปแบบยานพาหนะในการเดินทางซึ่งประกอบด้วย รถยนต์ รถบรรทุก รถมอเตอร์ไซค์ จักรยาน และการเดินเท้า โดยใช้ Class Route รวมทั้งอธิบายวิธีการวาดผลลัพธ์ของเส้นทางการเดินทางบนแผนที่ และแสดงผลข้อมูลแนะนำการเดินทาง (Turn-by-turn Guidance) อีกด้วย

Loading...

Language
DirectionsLanguage
Lat
Lon
Mode
Impedance
Tollroad
Wheel
FindBestSequence
PreserveFirstStop
PreserveLastStop
UseTimeWindows
UseHistorical
UseRealtime
StartTime
Traffic Layer
กรุณาคลิกบนแผนที่เพื่อกำหนดจุดต้นทาง-ปลายทาง
Please click on the map to mark start point and destination point
0

Code Example


Javascript
HTML
CSS


var map,
    markerLayer,
    markerPoint = [],
    routeLayer,
    preLineMarkerLayer,
    preLineLayer,
    prePolygonMarkerLayer,
    prePolygonLayer,
    barrierLayer,
    barrierPoint = [],
    routeService,
    isAddStop = true,
    isAddBarrier = false

nostra.onready = function () {
    nostra.config.Language.setLanguage(nostra.language.E);
    initialize();
};

function initialize() {
    map = new nostra.maps.Map("map", {
        id: "mapTest",
        logo: true,
        scalebar: true,
        slider: true,
        basemap: "streetmap",
        level: 18,
        lat: 13.722944,
        lon: 100.530449,
        country: 'TH'
    });

    map.onLoad = () => {
        map.disableDoubleClickZoom();
        initLayer()
        spinner(false)
    }

    map.events.click = function (event) {
        let lat = event.mapPoint.getLatitude(),
            lon = event.mapPoint.getLongitude();

        if (isAddStop)
            addMarker(lat, lon)

        if (isAddBarrier)
            addBarrier(lat, lon)

    };

    map.events.doubleClick = function (event) {
        let lat = event.mapPoint.getLatitude(),
            lon = event.mapPoint.getLongitude();

        if (isAddBarrier)
            addBarrierClose(lat, lon)

    };
}

//display route 
function setRoute() {

    if (markerPoint.length < 2) {
        alert("กรุณาเลือกตำแหน่งอย่างน้อย 2 จุด")
        return false
    }

    spinner(true)

    activeButton("route-btn")

    const input = getInput()

    routeService.clearStopPoint()

    markerPoint.forEach(coordinate => {
        const stop = new nostra.services.network.stopPoint({
            lat: coordinate[0],
            lon: coordinate[1],
        })

        routeService.addStopPoint(stop);
    });

    routeService.impedance = input.impedance;
    routeService.tollroad = input.tollroad;
    routeService.findBestSequence = input.findBestSequence;
    routeService.preserveFirstStop = input.preserveFirstStop;
    routeService.preserveLastStop = input.preserveLastStop;
    routeService.useTimeWindows = input.useTimeWindows;
    routeService.language = input.language;
    routeService.directionsLanguage = input.directionsLanguage;
    routeService.startTime = "";
    routeService.outSR = "4326";
    routeService.returnedRouteDetail = input.returnedRouteDetail;
    routeService.returnedAGSResult = false;
    routeService.country = input.zoomToCountry;
    routeService.mode = input.mode;

    routeService.solve((result) => {

        if (result.errorMessage) {
            alert(result.errorMessage)
            return spinner(false)
        }

        routeLayer.addRoute(result, '#007aff', 1);
        map.zoomToNetworkResult(result);

        //display direction result 
        let direction = routeService.getDirection();
        createDirectionResult(direction.directionsName, result)

        spinner(false)
    })
}

// add marker function
function addMarker(lat, lon) {

    if (markerPoint.length > 5) {
        alert("ไม่สามารถกำหนดจุดได้เกิน 5 จุด")
        return false
    }

    let marker = new nostra.maps.symbols.Marker({
        url: "http://api.nostramap.com/developer/asset/image/pin/pin_" + (markerPoint.length + 1) + ".png",
        width: 35,
        height: 55
    });

    markerLayer.addMarker(lat, lon, marker);
    markerPoint.push([lat, lon]);
}

function addBarrier(lat, lon) {
    let barrierType,
        barrier,
        circle,
        barrierEle = document.getElementsByName("barrier")

    barrierEle.forEach(element => {
        if (element.checked)
            barrierType = element.value
    })

    switch (barrierType) {
        case "POINT":
            barrier = new nostra.services.network.barrier({
                name: "point",
                type: "point",
                location: { lat: lat, lon: lon }
            });

            routeService.addBarrier(barrier);

            circle = new nostra.maps.symbols.Circle({
                radius: 10,
                color: "#FF0000",
                outline: "#FF0000",
                transparent: 1
            });

            barrierLayer.addCircle(lat, lon, circle);
            break;

        case "LINE":
            barrierPoint.push([lat, lon])

            circle = new nostra.maps.symbols.Circle({
                radius: 10,
                color: "#FF0000",
                outline: "#FF0000",
                transparent: 1
            });

            preLineMarkerLayer.addCircle(lat, lon, circle);
            preLineLayer.clear();

            if (barrierPoint.length >= 2) {
                let line = new nostra.maps.symbols.Line({
                    color: "#FF0000",
                    width: 8,
                    transparent: 0.4
                });
                preLineLayer.addLine(barrierPoint, line);
            }
            break;

        case "POLYGON":
            barrierPoint.push([lat, lon])

            circle = new nostra.maps.symbols.Circle({
                radius: 10,
                color: "#FF0000",
                outline: "#FF0000",
                transparent: 1
            })

            prePolygonMarkerLayer.addCircle(lat, lon, circle);
            prePolygonLayer.clear()

            if (barrierPoint.length > 2) {
                let polygon = new nostra.maps.symbols.Polygon({
                    color: "#FF0000",
                    width: 3
                })
                prePolygonLayer.addPolygon(barrierPoint, polygon)
            }
            else if (barrierPoint.length > 1) {
                let line = new nostra.maps.symbols.Line({
                    color: "#FF0000",
                    width: 3
                })
                prePolygonLayer.addLine(barrierPoint, line)
            }
            break;
        default:
            break;
    }


}


function addBarrierClose(lat, lon) {
    let barrierType,
        barrier,
        circle,
        line,
        location = [],
        barrierEle = document.getElementsByName("barrier")

    barrierEle.forEach(element => {
        if (element.checked)
            barrierType = element.value
    })

    barrierPoint.push([lat, lon]);

    switch (barrierType) {

        case "LINE":
            location = [];
            for (let i = 0; i < barrierPoint.length - 1; i++) {
                location.push({ lat: barrierPoint[i][0], lon: barrierPoint[i][1] });

                circle = new nostra.maps.symbols.Circle({
                    radius: 10,
                    color: "#FF0000",
                    outline: "#FF0000",
                    transparent: 1
                });

                barrierLayer.addCircle(barrierPoint[i][0], barrierPoint[i][1], circle);
            }

            barrier = new nostra.services.network.barrier({
                name: "line",
                type: "line",
                location: location
            });

            preLineLayer.clear();
            preLineMarkerLayer.clear();
            routeService.addBarrier(barrier);

            line = new nostra.maps.symbols.Line({
                color: "#FF0000",
                width: 8,
                transparent: 0.8
            });

            barrierLayer.addLine(barrierPoint, line);
            break;

        case "POLYGON":
            location = [];
            for (let i = 0; i < barrierPoint.length - 1; i++) {
                location.push({ lat: barrierPoint[i][0], lon: barrierPoint[i][1] });

                circle = new nostra.maps.symbols.Circle({
                    radius: 10,
                    color: "#FF0000",
                    outline: "#FF0000",
                    transparent: 1
                });

                barrierLayer.addCircle(barrierPoint[i][0], barrierPoint[i][1], circle);
            }

            barrier = new nostra.services.network.barrier({
                name: "polygon",
                type: "polygon",
                location: location
            });

            prePolygonLayer.clear();
            prePolygonMarkerLayer.clear();
            routeService.addBarrier(barrier);

            let polygon = new nostra.maps.symbols.Polygon({
                color: "#FF0000",
                width: 3,
                outline: "#FF0000",
                transparent: 0.4
            });

            barrierLayer.addPolygon(barrierPoint, polygon);

            break;
        default:
            break;
    }
    
    barrierPoint = []
}

function onAddBarrier() {
    isAddStop = false
    isAddBarrier = true
    activeButton("barrier-btn")
}

function onAddStop() {
    isAddStop = true
    isAddBarrier = false
    activeButton("stop-btn")
}

function onChangeLanguage(value) {
    document.getElementById("lang").value = value
}

function onChangeDirectionsLanguage(value) {
    document.getElementById("directions-lang").value = value
}

function onChangeCountry(country) {
    map.country = country;
    map.level = null;
    map.lat = null;
    map.lon = null;

    map.removeAllLayers();

    initLayer()
}

function initLayer() {
    let streetMapLayer = new nostra.maps.layers.StreetMap(map);

    markerLayer = new nostra.maps.layers.GraphicsLayer(map, { id: "markerLayer" });
    routeLayer = new nostra.maps.layers.GraphicsLayer(map, { id: "routeLayer" });
    preLineMarkerLayer = new nostra.maps.layers.GraphicsLayer(map, { id: "preLineMarkerLayer" });
    barrierLayer = new nostra.maps.layers.GraphicsLayer(map, { id: "barrierLayer" });
    preLineLayer = new nostra.maps.layers.GraphicsLayer(map, { id: "preLineLayer" });
    prePolygonMarkerLayer = new nostra.maps.layers.GraphicsLayer(map, { id: "prePolygonMarkerLayer" });
    prePolygonLayer = new nostra.maps.layers.GraphicsLayer(map, { id: "prePolygonLayer" });
    routeService = new nostra.services.network.route()

    map.addLayer(streetMapLayer);
    map.addLayer(routeLayer);
    map.addLayer(markerLayer);
    map.addLayer(preLineMarkerLayer);
    map.addLayer(preLineLayer);
    map.addLayer(prePolygonMarkerLayer);
    map.addLayer(prePolygonLayer);
    map.addLayer(barrierLayer);

}

function createDirectionResult(direction, result) {

    let element = "";
    let { nostraResults, agsResults } = result

    let display = {
        distance: nostraResults
            ? nostraResults.totalLength
            : agsResults.directions[0].summary.totalLength,

        totalTime: nostraResults
            ? nostraResults.totalTime
            : agsResults.directions[0].summary.totalTime,

        useTollRoad: nostraResults
            ? nostraResults.useTollRoad
            : "none",
    }

    direction.map((result) => {
        element += 
            <div class="result">
                {result.text}
            </div>
        
    })

    document.getElementById("distance-result").innerHTML = parseFloat(display.distance).toFixed(2) + " m."
    document.getElementById("time-result").innerHTML = parseFloat(display.totalTime).toFixed(2) + " min."
    document.getElementById("tollroad-result").innerHTML = display.useTollRoad
    document.getElementById("direction-result").innerHTML = element
    document.getElementById("panel-left").style.display = ""
}

//get input from elements
function getInput() {
    return {
        zoomToCountry: document.getElementById("countrySelect").value,
        language: document.getElementById("lang").value,
        directionsLanguage: document.getElementById("directions-lang").value,
        mode: document.getElementById("mode").value,
        impedance: document.getElementById("impedance").value,
        tollroad: document.getElementById("tollroad").value,
        findBestSequence: document.getElementById("findBestSequence").value,
        preserveFirstStop: document.getElementById("preserveFirstStop").value,
        preserveLastStop: document.getElementById("preserveLastStop").value,
        returnedRouteDetail: document.getElementById("returnedRouteDetail").value,
        useTimeWindows: document.getElementById("useTimeWindows").value,
        startTime: document.getElementById("startTime").value,
    }
}

function clear() {
    markerPoint = [];
    markerLayer.clear();
}

function activeButton(btnId) {
    document.getElementById('route-btn').classList.remove('active');
    document.getElementById('stop-btn').classList.remove('active');
    document.getElementById('reset-btn').classList.remove('active');
    document.getElementById('barrier-btn').classList.remove('active');

    if (btnId === "barrier-btn")
        document.getElementById("barrier-action").style.display = ""
    else
        document.getElementById("barrier-action").style.display = "none"

    document.getElementById(btnId).classList.add('active')
}

// UI function
function spinner(isLoading) {
    const spin = document.getElementById("spinner");
    isLoading ? spin.style.display = "flex" : spin.style.display = "none";
}


** สามารถดูวิธีการติดตั้ง Tool & Editor สำหรับ Angular ได้ที่ "ขั้นตอนการติดตั้ง Tool & Editor สำหรับ Angular"