2012-10-02 25 views
2

我想實現用戶在Bing Map控件上繪製和優化多邊形的功能。必應地圖可調整大小的多邊形

我添加了一個形狀層,並覆蓋了自來水事件畫一個簡單的多邊形,所有完美的作品。我想進一步優化控件,以便用戶可以拖放繪製的多邊形的任何位置對象來改變其形狀,但我沒有任何運氣。

我已嘗試添加一個MapItemControl,綁定到我的多邊形的位置屬性,但沒有成功 - 我沒有看到銷出現在地圖上,即使我的多邊形不正確地呈現。據推測,Locations系列不會通知用戶界面集合的任何變化,因此我可能必須爲這些引腳維護一個單獨的集合。

一旦我得到這是怎麼回事,但是,我仍然需要能夠隨意拖放引腳修改多邊形。有沒有人在Windows 8上實現過這個功能,請分享一些想法?

編輯

現在我有我的腳在地圖上顯示的地點集合。理想情況下,我想將它們綁回到多邊形的位置集合,但乞丐不能選擇。我現在只需要能夠拖動別針。

回答

1

爲了編輯多邊形中的每個點,我在多邊形中添加了一個拖動控制模塊。這是我使用的步驟。

Drag Handle Module

這是7.0版本。不知道您使用的是哪個版本,但它很容易適應。

編輯我在javascript/HTML這樣做。只是注意到你把它標記爲windows 8.好奇,你是否在爲windows 8手機做一個銀光控制?

WPF C#解決方案

這裏是我想出了,這是非常容易實現的,所有你需要做的就是勾我的事件到您的MapPolygon對象。代碼背後的想法是,當你點擊多邊形時,我們在多邊形上的每個頂點放置一個圖釘(我們創建事件以便我們可以拖動它)。當我們拖放每個圖釘時,我們會根據情況調整多邊形。位置。

polygon.MouseDown += new MouseButtonEventHandler(polygon_MouseDownResize); 

和一種方式退出調整大小事件,我選擇只鉤住鍵並用「ESC」鍵停止編輯,但你可以做到這一點上點擊右鍵,或者你選擇的任何其他事件。你所做的只是清除pushPinVertices列表並重置事件變量。

// === Editable polygon Events === 

private bool _shapeEdit; 
public MapPolygon selectedPoly { get; set; } 
public List<Pushpin> pushPinVertices { get; set; } 


void polygon_MouseDownResize(object sender, MouseButtonEventArgs e) 
{ 

    if (!_shapeEdit && selectedPoly == null) 
    { 
     _shapeEdit = true; 
     selectedPoly = sender as MapPolygon; 
     pushPinVertices = new List<Pushpin>(); 
     int i = 0; 
     foreach (Microsoft.Maps.MapControl.WPF.Location vertice in selectedPoly.Locations) 
     { 
      Pushpin verticeBlock = new Pushpin(); 
      // I use a template to place a 'vertice marker' instead of a pushpin, il provide resource below 
      verticeBlock.Template = (ControlTemplate)Application.Current.Resources["PushPinTemplate"]; 
      verticeBlock.Content = "vertice"; 
      verticeBlock.Location = vertice; 
      verticeBlock.MouseDown += new MouseButtonEventHandler(pin_MouseDown); 
      verticeBlock.MouseUp += new MouseButtonEventHandler(pin_MouseUp); 
      myMap.Children.Add(verticeBlock); 
      pushPinVertices.Add(verticeBlock); 
      i++; 

     } 
    } 

} 



private void myMap_KeyDown(object sender, KeyEventArgs e) 
{ 
    if (e.Key == System.Windows.Input.Key.Escape) 
    { 
     if (_shapeEdit && selectedPoly != null) 
     { 

      foreach (Pushpin p in pushPinVertices) 
      { 
       myMap.Children.Remove(p); 
      } 

      _shapeEdit = false; 
      selectedPoly = null; 

     } 

    } 
} 
// Note: I needed my window to pass bing maps the keydown event 
private void Window_KeyDown(object sender, KeyEventArgs e) 
{ 
    myMap_KeyDown(sender, e); 
} 


// === Editable polygon Events === 

// ==== Draggable pushpin events ===== 
Vector _mouseToMarker; 
private bool _IsPinDragging; 
public Pushpin SelectedPushpin { get; set; } 

void pin_MouseUp(object sender, MouseButtonEventArgs e) 
{ 
    LocationCollection locCol = new LocationCollection(); 
    foreach (Pushpin p in pushPinVertices) 
    { 
     locCol.Add(p.Location); 

    } 

    selectedPoly.Locations = locCol; 
    bingMapRefresh(); 

    _IsPinDragging = false; 
    SelectedPushpin = null; 
} 

void pin_MouseDown(object sender, MouseButtonEventArgs e) 
{ 
    e.Handled = true; 
    SelectedPushpin = (Pushpin)sender; 
    _IsPinDragging = true; 
    _mouseToMarker = Point.Subtract(
     myMap.LocationToViewportPoint(SelectedPushpin.Location), 
     e.GetPosition(myMap)); 

} 

private void myMap_MouseMove(object sender, MouseEventArgs e) 
{ 
    if (e.LeftButton == MouseButtonState.Pressed) 
    { 
     if (_IsPinDragging && SelectedPushpin != null) 
     { 
      SelectedPushpin.Location = myMap.ViewportPointToLocation(Point.Add(e.GetPosition(myMap), _mouseToMarker)); 
      e.Handled = true; 
     } 
    } 
} 
// ==== Draggable pushpin events ===== 
// Nice little maprefresh I found online since the bingmap WPF doesnt always seem to update elements after certain event orders 
private void bingMapRefresh() 
{ 
    //myMap.UpdateLayout(); 
    var mapCenter = myMap.Center; 
    mapCenter.Latitude += 0.00001; 
    myMap.SetView(mapCenter, myMap.ZoomLevel); 
} 

至於資源覆蓋的圖釘圖標,我只是用一個ImageBrush的做了一個白色的小方塊。請注意,您可能需要調整Margin屬性,具體取決於您製作標記的長度/寬度。這是因爲通常默認情況下圖釘固定在位置上方。

<Application.Resources> 
    <ControlTemplate x:Key="PushPinTemplate"> 
     <Grid> 
      <Rectangle Width="10" Height="10" Margin="0 35 0 0"> 
       <Rectangle.Fill> 
        <ImageBrush ImageSource="pack://application:,,,/Images/DragIcon.gif"/> 
       </Rectangle.Fill> 
      </Rectangle> 
     </Grid> 
    </ControlTemplate> 
</Application.Resources> 
+0

我沒有指定,但我在Windows 8中使用XAML/C#。謝謝你在JS版本上,但是。 – ZombieSheep

+0

@ ZombieSheep對不起剛纔注意到了,你是否還需要幫助,我只是移植到xaml/c#我自己:)我的代碼在工作,但lmk,這是更容易,然後拖動句柄模塊。 – clamchoda

+0

現在我不需要這麼緊急,但是請發帖,我確信它會幫助我以後幫助別人。 :) – ZombieSheep