[Silverlight] 使用BingMap 和 RouteService 做出路徑規劃

2010/08/12

今天這邊是來紀錄一下,如何使用 RouteService 結合BingMap 做出路徑規劃..
此範例設計為 從台灣台北101 路徑規劃到 台灣花蓮七星潭(那是一個很美的地方,有飛機跟海浪的美好回憶)..

首先我們得擺一張Bing Map 地圖進去,如果不太會擺Bing Map Control 進去  Silverlight 中可以參考 這篇(第一次在Silverlight 使用 Bing Map 就上手)
下面是XMAL Code :



<Grid x:Name="LayoutRoot" Background="White">
<m:Map x:Name="myMap" CredentialsProvider="AhkMeJNiD6a8JSGoC2QIHe47XzBhLqzH_y34nDsbv5kIEbBrEZ9WY_hG4x1DZnd-" Mode="Road" LogoVisibility="Collapsed" >
<m:MapLayer x:Name="RouteLayer"   />
<m:MapLayer x:Name="PinLayer"   />
</m:Map>
<Button Content="規劃 台北101-花蓮-七星潭" Height="44" FontSize="13" HorizontalAlignment="Left" Margin="48,77,0,0" Name="btnRouted" VerticalAlignment="Top" Width="210" Click="btnRouted_Click"   />
</Grid>
再來就是一個準備動作..
我們必須要去使用 RouteService
在方案總管(Solution Exploer) 下面的 References 按下右鍵選擇 Add Service Reference
sshot-24
之後 在Address  地方輸入 http://dev.virtualearth.net/WebServices/v1/RouteService/RouteService.svc/mex
按下Go..
並取好一個名字..範例是寫 RouteService 就可以按下OK了…

 sshot-25
這時候方案總管應該會長這副德性…
sshot-26

再來就是編寫..那一 顆按鈕按下去他會如何規劃路徑..
接下來我都寫在註解裡面…> <

btnRouted 的Click 事件 Code :
private void btnRouted_Click(object sender, RoutedEventArgs e)
{
//宣告RoutedService 並初始化
RouteServiceClient routedService = new RouteServiceClient();
//加入成功事件
routedService.CalculateRouteCompleted += client_CalculateRouteCompleted;
 
//宣告一查詢的 RouteRequest 物件
var request = new RouteRequest();
//授權方式
request.Credentials = new Credentials();
request.Credentials.ApplicationId = "Anm8W5aq5HtMp6RZV9EaqdkjpDzDMrQ5-hr_1Qk2Y2Z-LAHQ0xmfTr911iiBGli_";
 
//台北101 經緯度
var taipeiLocation = new Location(25.040193, 121.565094);
//花蓮七星潭經緯度
var hualian7star = new Location(24.043956, 121.626549);
 
//設定起始點座標
var waypoints = new System.Collections.ObjectModel.ObservableCollection<Waypoint>
{
new Waypoint(){Description="台北101",Location=new Location(){Latitude=taipeiLocation.Latitude,Longitude=taipeiLocation.Longitude}},
new Waypoint(){Description="花蓮-七星潭",Location=new Location(){Latitude=hualian7star.Latitude,Longitude=hualian7star.Longitude}},
};
//放入規劃路徑點
request.Waypoints = waypoints;
request.ExecutionOptions = new RouteService.ExecutionOptions();
request.ExecutionOptions.SuppressFaults = true;
request.Options = new RouteOptions();
request.Options.RoutePathType = RoutePathType.Points;
 
routedService.CalculateRouteAsync(request);
}

RouteService 成功回傳後事件 Code :
void client_CalculateRouteCompleted(object sender, CalculateRouteCompletedEventArgs e)
{
 
try
{
 
if (e.Result.ResponseSummary.StatusCode != RouteService.ResponseStatusCode.Success)
{
MessageBox.Show("錯誤的路徑規畫狀態");
}
else if (e.Result.Result.Legs.Count == 0)
{
MessageBox.Show("沒有找到路徑規畫");
}
else
{
//設定畫出來的線跟顏色
MapPolyline line = new MapPolyline();
line.Locations = new LocationCollection();
line.Stroke = new SolidColorBrush(Colors.Red);
line.Opacity = 0.69;
line.StrokeThickness = 7;
 
 
foreach (var point in e.Result.Result.RoutePath.Points)
{
line.Locations.Add(new Location(point.Latitude, point.Longitude));
}
RouteLayer.Children.Add(line);
 
//在各徘徊抉擇處加上pushpin
foreach (var item in e.Result.Result.Legs[0].Itinerary)
{
AddPintoPinLayer(item.Location.Latitude, item.Location.Longitude);
}
 
//設定到可以看到起終點的view
myMap.SetView(new LocationRect(line.Locations[0], line.Locations[line.Locations.Count - 1]));
}
}
catch (Exception ex)
{
MessageBox.Show("發生莫名錯誤..XD" + ex.Message);
}
}

其中我有用到pushpin在各路徑點加上標示…如果不知道如何加入pushpin 可參考這篇 Bing Map 加入標記點(push pin)
加入push pin code:
private void AddPintoPinLayer(double la, double lo)
{
Pushpin pin = new Pushpin();
//在MapLayer加入pin並且標記位置
PinLayer.AddChild(pin, new Location(la, lo));
}

接下來…
就可以執行看看…

錯誤…><…
不能跑..或是出現像是下列訊息…
訊息: Unhandled Error in Silverlight Application 無法載入合約 'RouteService.IRouteService' 的端點組態區段,因為找到多個該合約的端點組態。請以名稱指示偏好的端點組態區段。

sshot-27









別緊張..
看一下方案總管有一個檔案叫做  ServiceReferences.ClientConfig

sshot-261

打開之後,將有關 customBinding 的Element 給註解掉或是直接砍掉..
註解掉後會如下圖..
sshot-28

ServiceReferences.ClientConfig Code :
<configuration>
<system.serviceModel>
<bindings>
<basicHttpBinding>
<binding name="BasicHttpBinding_IRouteService" maxBufferSize="2147483647"
maxReceivedMessageSize="2147483647">
<security mode="None"   />
</binding>
</basicHttpBinding>
<!--<customBinding>
                <binding name="CustomBinding_IRouteService">
                    <binaryMessageEncoding   />
                    <httpTransport maxReceivedMessageSize="2147483647" maxBufferSize="2147483647"   />
                </binding>
            </customBinding>-->
</bindings>
<client>
<endpoint address="http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc"
binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IRouteService"
contract="RouteService.IRouteService" name="BasicHttpBinding_IRouteService"   />
<!--<endpoint address="http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc/binaryHttp"
                binding="customBinding" bindingConfiguration="CustomBinding_IRouteService"
                contract="RouteService.IRouteService" name="CustomBinding_IRouteService"   />-->
</client>
</system.serviceModel>
</configuration>

之後存檔執行…應該就是沒問題了…

Bing Map and Silverlight 寫到這一篇應該差不多了..
之前有寫過,如何 Bing Map 簡單版搜尋 找到經緯度,現在已經可以規畫路徑,
也有寫到 GeoSense 來做到wifi location 所以差不多可以寫簡單版的導航軟體拉…(茶~~

範例:
Get Microsoft Silverlight


讚一下:


下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.