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