以圖形方式在瀏覽器上顯示路徑/路由

Question

我試圖在瀏覽器上以圖形方式顯示路徑/路由以供客戶端查看。例如，基於txt或XML文件，包括方向。

<route> 
    <forward>4</forward> 
    <left>90</left> 
    <forward>5</forward> 
    <left>90</left> 
    <forward>2</forward> 
</route> 

或

F4,L90,F5,L90,F2 

一個簡單的txt文件等效。

在這個例子中，路線是向前移動4個單位，向左轉90度，再向前移動5個單位，向左轉90度並向前移動2個單位完成。

這樣的事情。箭頭不一定要在那裏，我只是爲了清晰的方向而將它們吸引過來。如果能夠動態地改變圖像，比如能夠顯示跟隨該路線的車輛，甚至在車輛跟隨並完成路線的一部分時甚至將路線顏色改變爲綠色，那將會更好。

我正在考慮使用Tomcat與java和jsp與javascript來做到這一點，但如果有更簡單的選擇，我不介意。有什麼工具可以用在我的案例中嗎？我之前沒有做過任何接近此事的事情，請大家幫忙！

Answer 1

1. 學習如何通過java閱讀.xml文件jsp - 谷歌搜索MVC模式，數據客體返回jsp頁

2. 瞭解如何使用<canvas>畫箭頭：see good reference