探索 DeepEarth 內建控制項：地圖擴充開發實戰

DeepEarth 內建 6 個地圖擴充控制項（CoordControl、ScaleControl、NavControl、MapControl、MouseControl、ZoomSliderControl），提供規範完善的程式設計模型，可增強地圖操作彈性並開發強大擴充程式。本文探索核心控制項使用方法。

一、控制項類別繼承結構

• MapControl 繼承 Silverlight ContentControl，實作 ILayer 介面，為所有擴充控制項基類
• CoordControl、ScaleControl、NavControl、MouseControl 皆繼承 MapControl

MapControl 核心原始碼

public class MapControl : ContentControl, ILayer {
    protected Map _Map;

    public virtual Map MapInstance {
        get {
            if (_Map == null) _Map = Map.GetMapInstance(this);
            return _Map;
        }
        set {
            if (ReferenceEquals(_Map, value)) return;
            _Map = value;
        }
    }
    public string ID { get; set; }
    public bool IsVisible { get; set; }
}

提供 MapInstance 存取地圖實例、ID 識別圖層、IsVisible 控制可見性。

二、常用控制項詳解

1. CoordControl - 座標顯示

顯示滑鼠游標所在經緯度與當前縮放層級。

<DeepControls:CoordControl TextOptions.TextHintingMode="Fixed" />

2. ScaleControl - 比例尺

顯示地圖比例尺，通常定位右下角。

<DeepControls:ScaleControl VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="12,12,12,40" />

3. NavControl - 導航控制項 (使用率最高)

提供完善導航功能開發模型，簡單配置即可擴充功能選單。

<DeepControls:NavControl x:Name="deepNavControl" RotationOn="True" />

擴充自訂導航按鈕：在 NavControl 內嵌入 StackPanel/Buttons

<DeepControls:NavControl x:Name="deepNavControl" RotationOn="True">
  <StackPanel Orientation="Horizontal" Height="40">
    <Button x:Name="btnFull" Click="btnFull_Click" Style="{StaticResource StandardButton}" ToolTipService.ToolTip="全螢幕顯示">
      <Image x:Name="imgFull" Source="../Images/FullScreen.png" />
    </Button>
    <Button x:Name="btnRefresh" Click="btnRefresh_Click" Style="{StaticResource StandardButton}" ToolTipService.ToolTip="重新整理地圖">
      <Image x:Name="imgRefresh" Source="../Images/Refresh.png" />
    </Button>
    <Button x:Name="btnBeiJing" Click="btnBeiJing_Click" Style="{StaticResource StandardButton}" ToolTipService.ToolTip="導航到北京" Content="北京"/>
    <Button x:Name="btnShangHai" Click="btnShangHai_Click" Style="{StaticResource StandardButton}" ToolTipService.ToolTip="導航到上海" Content="上海"/>
  </StackPanel>
</DeepControls:NavControl>

按鈕事件實作

private void btnFull_Click(object sender, RoutedEventArgs e) {
    Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
}

private void btnBeiJing_Click(object sender, RoutedEventArgs e) {
    LocationMap(116.3895, 39.9054, 9);
}

private void LocationMap(double longitude, double latitude, double zoom) {
    mapInstance.SetViewCenter(new Point(longitude, latitude), zoom);
}

封裝為 Silverlight 使用者控制項

將導航選單移至獨立 ToolBarControl.xaml：

<UserControl x:Class="DETraining.Controls.ToolBarControl" ...>
  <Grid x:Name="LayoutRoot">
    <StackPanel Orientation="Horizontal" Height="40">
      <Button x:Name="btnFull" Click="btnFull_Click" ... />
      <Button x:Name="btnRefresh" Click="btnRefresh_Click" ... />
      <Button x:Name="btnBeiJing" Click="btnBeiJing_Click" ... />
      <Button x:Name="btnShangHai" Click="btnShangHai_Click" ... />
      <Button x:Name="btnWuHan" Click="btnWuHan_Click" ... />
    </StackPanel>
  </Grid>
</UserControl>

調用端極度簡化：

<DeepControls:NavControl x:Name="deepNavControl" RotationOn="True">
  <StackPanel Orientation="Horizontal" Height="40">
    <tb:ToolBarControl />
  </StackPanel>
</DeepControls:NavControl>

三、其他控制項

• MouseControl：控制地圖拖曳行為
• ZoomSliderControl：控制縮放層級

用法類似 CoordControl，後續文章再詳細探討。