MapViewFeaturesWindow.xaml

<wd:Window
    x:Class="WPFDevelopers.Samples.ExampleViews.MapViewFeaturesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers"
    Title="MapView 功能演示"
    Width="1181"
    Height="760"
    MinWidth="900"
    MinHeight="620"
    Icon="pack://application:,,,/WPFDevelopers.Samples;component/WPFDevelopers.ico"
    WindowStartupLocation="CenterOwner"
    mc:Ignorable="d">
    <wd:Window.Resources>
        <DataTemplate x:Key="CustomClusterTemplate" DataType="{x:Type wd:PushpinCluster}">
            <Grid
                Width="52"
                Height="52"
                ToolTip="{Binding Representative.Title}">
                <Ellipse Fill="#332563EB" />
                <Ellipse
                    Width="42"
                    Height="42"
                    Fill="#FF2563EB"
                    Stroke="White"
                    StrokeThickness="2" />
                <Grid
                    Width="34"
                    Height="34"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Viewbox
                        Width="9"
                        Height="11"
                        VerticalAlignment="Center">
                        <Path Data="{StaticResource WD.FlagGeometry}" Fill="White" />
                    </Viewbox>
                    <TextBlock
                        Grid.Column="1"
                        Margin="2,0,0,0"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="12"
                        FontWeight="SemiBold"
                        Foreground="White"
                        Text="{Binding CountText}"
                        TextAlignment="Center" />
                </Grid>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="StationPushpinTemplate">
            <Grid Width="42" Height="48">
                <Ellipse
                    Width="34"
                    Height="34"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    Fill="#FF16A34A"
                    Stroke="White"
                    StrokeThickness="2" />
                <Viewbox
                    Width="16"
                    Height="16"
                    Margin="0,8,0,0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top">
                    <Path Data="{StaticResource WD.FlagGeometry}" Fill="White" />
                </Viewbox>
                <Path
                    Margin="0,29,0,0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    Data="M 0,0 L 12,0 L 6,12 Z"
                    Fill="#FF16A34A" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="CustomMapPinTemplate">
            <Grid Width="30" Height="40">
                <Viewbox
                    IsHitTestVisible="False"
                    RenderTransformOrigin="0.5,1"
                    Stretch="Fill">
                    <Canvas Width="30" Height="40">
                        <Ellipse
                            Canvas.Left="9"
                            Canvas.Top="34"
                            Width="12"
                            Height="3"
                            Fill="{DynamicResource WD.MapPinShadowBrush}"
                            IsHitTestVisible="False" />

                        <Path
                            Canvas.Left="5"
                            Canvas.Top="3"
                            Width="30"
                            Height="40"
                            Data="{DynamicResource WD.MapPinGeometry}"
                            Fill="{DynamicResource WD.MapPinFillBrush}"
                            Stroke="{DynamicResource WD.MapPinStrokeBrush}"
                            StrokeThickness="1.1" />

                        <Ellipse
                            Canvas.Left="10.25"
                            Canvas.Top="11"
                            Width="9.5"
                            Height="9.5"
                            Fill="{DynamicResource WD.MapPinInnerFillBrush}"
                            Stroke="{DynamicResource WD.MapPinInnerStrokeBrush}"
                            StrokeThickness="0.9" />

                        <Ellipse
                            Canvas.Left="10.9"
                            Canvas.Top="8"
                            Width="5.5"
                            Height="2.0"
                            Fill="{DynamicResource WD.MapPinHighlightBrush}">
                            <Ellipse.RenderTransform>
                                <RotateTransform Angle="-18" />
                            </Ellipse.RenderTransform>
                        </Ellipse>
                    </Canvas>
                </Viewbox>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="RunningPushpinTemplate">
            <Grid
                Width="36"
                Height="36"
                RenderTransformOrigin="0.5,1">
                <Grid.RenderTransform>
                    <RotateTransform Angle="{Binding Tag}" />
                </Grid.RenderTransform>
                <wd:SvgViewer
                    Width="36"
                    Height="36"
                    VerticalAlignment="Bottom"
                    Source="pack://application:,,,/WPFDevelopers.Samples;component/Resources/Svg/Running.svg" />
            </Grid>
        </DataTemplate>

        <Style BasedOn="{StaticResource WD.MapPinStyle}" TargetType="{x:Type wd:MapPin}">
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Width" Value="30" />
            <Setter Property="Height" Value="40" />
            <Setter Property="RenderTransformOrigin" Value="0.5,1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type wd:MapPin}">
                        <Viewbox
                            IsHitTestVisible="False"
                            RenderTransformOrigin="0.5,1"
                            Stretch="Fill">
                            <Grid Width="30" Height="40">
                                <Path
                                    Width="28"
                                    Height="36"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Top"
                                    Data="M14,0 C7.4,0 2,5.4 2,12.1 C2,19.1 14,36 14,36 C14,36 26,19.1 26,12.1 C26,5.4 20.6,0 14,0 Z"
                                    Fill="#FF2563EB"
                                    Stroke="White"
                                    StrokeThickness="2" />
                                <Ellipse
                                    Width="12"
                                    Height="12"
                                    Margin="0,6,0,0"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Top"
                                    Fill="White" />
                            </Grid>
                        </Viewbox>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsSelected" Value="False">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </wd:Window.Resources>

    <controls:CodeViewer Padding="0" Header="MapView 功能演示">
        <wd:Drawer
            x:Name="FeatureDrawer"
            HeaderWidth="292"
            IsOpen="True"
            Position="Right">
            <wd:Drawer.Header>
                <Border
                    Width="292"
                    Background="White"
                    BorderBrush="#FFDCE3EC"
                    BorderThickness="1,0,0,0">
                    <ScrollViewer VerticalScrollBarVisibility="Auto">
                        <StackPanel Margin="10,0">
                            <TextBlock
                                FontSize="20"
                                FontWeight="SemiBold"
                                Foreground="#FF111827"
                                Text="功能设置" />
                            <TextBlock
                                Margin="0,4,0,18"
                                Foreground="#FF64748B"
                                Text="实时切换 MapView 常用能力" />

                            <TextBlock
                                Margin="0,0,0,8"
                                FontWeight="SemiBold"
                                Foreground="#FF334155"
                                Text="地图源" />
                            <wd:Segmented
                                x:Name="MapStyleSegmented"
                                ItemClick="MapStyleSegmented_ItemClick"
                                SelectedIndex="1">
                                <wd:SegmentedItem Content="卫星" />
                                <wd:SegmentedItem Content="标准" />
                                <wd:SegmentedItem Content="道路" />
                            </wd:Segmented>

                            <Separator Margin="0,18" />

                            <CheckBox
                                x:Name="ClusteringCheckBox"
                                Margin="0,0,0,10"
                                Click="ClusteringCheckBox_Click"
                                Content="启用点位聚合"
                                IsChecked="True" />
                            <CheckBox
                                x:Name="ClusterTemplateCheckBox"
                                Margin="0,0,0,10"
                                Click="ClusterTemplateCheckBox_Click"
                                Content="使用自定义聚合模板"
                                IsChecked="True" />
                            <CheckBox
                                x:Name="ScaleBarCheckBox"
                                Margin="0,0,0,10"
                                Click="ScaleBarCheckBox_Click"
                                Content="显示比例尺"
                                IsChecked="True" />
                            <CheckBox
                                x:Name="ZoomControlCheckBox"
                                Margin="0,0,0,10"
                                Click="ZoomControlCheckBox_Click"
                                Content="显示缩放控制"
                                IsChecked="True" />
                            <CheckBox
                                x:Name="DiagnosticsCheckBox"
                                Margin="0,0,0,10"
                                Click="DiagnosticsCheckBox_Click"
                                Content="显示诊断信息" />
                            <CheckBox
                                x:Name="ClickZoomCheckBox"
                                Margin="0,0,0,10"
                                Click="ClickZoomCheckBox_Click"
                                Content="点击点位时自动缩放"
                                IsChecked="True" />
                            <CheckBox
                                x:Name="AlertLayerCheckBox"
                                Click="AlertLayerCheckBox_Click"
                                Content="显示独立业务图层"
                                IsChecked="True" />

                            <Separator Margin="0,18" />

                            <TextBlock Foreground="#FF334155" Text="聚合半径" />
                            <Grid Margin="0,6,0,16">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="42" />
                                </Grid.ColumnDefinitions>
                                <Slider
                                    x:Name="ClusterRadiusSlider"
                                    Maximum="80"
                                    Minimum="16"
                                    TickFrequency="4"
                                    ValueChanged="ClusterRadiusSlider_ValueChanged"
                                    Value="42" />
                                <TextBlock
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center"
                                    Foreground="#FF475569"
                                    Text="{Binding Value, ElementName=ClusterRadiusSlider, StringFormat={}{0:0}}" />
                            </Grid>

                            <TextBlock Foreground="#FF334155" Text="最小聚合数量" />
                            <Grid Margin="0,6,0,18">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="42" />
                                </Grid.ColumnDefinitions>
                                <Slider
                                    x:Name="ClusterMinimumSlider"
                                    IsSnapToTickEnabled="True"
                                    Maximum="10"
                                    Minimum="2"
                                    TickFrequency="1"
                                    ValueChanged="ClusterMinimumSlider_ValueChanged"
                                    Value="3" />
                                <TextBlock
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center"
                                    Foreground="#FF475569"
                                    Text="{Binding Value, ElementName=ClusterMinimumSlider, StringFormat={}{0:0}}" />
                            </Grid>

                            <TextBlock
                                Margin="0,0,0,8"
                                FontWeight="SemiBold"
                                Foreground="#FF334155"
                                Text="示例包含" />
                            <TextBlock
                                Foreground="#FF64748B"
                                LineHeight="22"
                                Text="默认 Pushpin与自定义 Pushpin&#x0a;ClusterTemplate 与 99+ 数量显示&#x0a;折线、多边形与动态点集合&#x0a;比例尺、诊断信息与点击缩放" />

                            <Border
                                Margin="0,16,0,0"
                                Padding="10"
                                Background="#F8FAFC"
                                BorderBrush="#FFE2E8F0"
                                BorderThickness="1"
                                CornerRadius="8">
                                <StackPanel>
                                    <TextBlock
                                        Margin="0,0,0,8"
                                        FontWeight="SemiBold"
                                        Foreground="#FF334155"
                                        Text="坐标转换演示" />

                                    <TextBlock
                                        Margin="0,0,0,6"
                                        Foreground="#FF475569"
                                        Text="来源坐标系" />
                                    <wd:Segmented x:Name="CoordinateSourceSegmented" SelectedIndex="0">
                                        <wd:SegmentedItem Content="WGS84" />
                                        <wd:SegmentedItem Content="GCJ02" />
                                        <wd:SegmentedItem Content="BD09" />
                                    </wd:Segmented>

                                    <TextBlock
                                        Margin="0,10,0,6"
                                        Foreground="#FF475569"
                                        Text="目标坐标系" />
                                    <wd:Segmented x:Name="CoordinateTargetSegmented" SelectedIndex="1">
                                        <wd:SegmentedItem Content="WGS84" />
                                        <wd:SegmentedItem Content="GCJ02" />
                                        <wd:SegmentedItem Content="BD09" />
                                    </wd:Segmented>

                                    <Grid Margin="0,12,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>

                                        <StackPanel Grid.Column="0" Margin="0,0,6,0">
                                            <TextBlock
                                                Margin="0,0,0,4"
                                                Foreground="#FF475569"
                                                Text="经度" />
                                            <TextBox x:Name="CoordinateLongitudeTextBox" Text="116.397428" />
                                        </StackPanel>

                                        <StackPanel Grid.Column="1" Margin="6,0,0,0">
                                            <TextBlock
                                                Margin="0,0,0,4"
                                                Foreground="#FF475569"
                                                Text="纬度" />
                                            <TextBox x:Name="CoordinateLatitudeTextBox" Text="39.909230" />
                                        </StackPanel>

                                        <Button
                                            Grid.Row="1"
                                            Grid.ColumnSpan="2"
                                            Margin="0,10,0,0"
                                            Click="ConvertCoordinateButton_Click"
                                            Content="转换"
                                            Style="{StaticResource WD.PrimaryButton}" />
                                    </Grid>

                                    <TextBlock
                                        Margin="0,12,0,0"
                                        FontWeight="SemiBold"
                                        Foreground="#FF334155"
                                        Text="结果" />
                                    <TextBlock
                                        x:Name="CoordinateConvertResultTextBlock"
                                        Margin="0,6,0,0"
                                        Foreground="#FF0F172A"
                                        LineHeight="20"
                                        Text="WGS84 -&gt; GCJ02" />
                                </StackPanel>
                            </Border>

                            <Button
                                Margin="0,20,0,0"
                                Click="MovePushpinButton_Click"
                                Content="移动首个动态点位" />
                            <Separator Margin="0,16" />

                            <TextBlock
                                Margin="0,0,0,8"
                                FontWeight="SemiBold"
                                Foreground="#FF334155"
                                Text="ShapeZIndex 演示" />
                            <Button
                                Margin="0,0,0,8"
                                Click="BringCircleToFrontButton_Click"
                                Content="Circle 置顶（动态修改）" />
                            <Button
                                Margin="0,0,0,8"
                                Click="ResetShapeZIndexButton_Click"
                                Content="恢复默认层级" />
                            <Separator Margin="0,16" />

                            <TextBlock
                                Margin="0,0,0,8"
                                FontWeight="SemiBold"
                                Foreground="#FF334155"
                                Text="跑步演示" />
                            <Button
                                Margin="0,0,0,8"
                                Click="StartRunningButton_Click"
                                Content="开始跑步" />
                            <Button
                                Margin="0,0,0,8"
                                Click="PauseRunningButton_Click"
                                Content="暂停跑步" />
                            <Button
                                Margin="0,0,0,8"
                                Click="ResumeRunningButton_Click"
                                Content="继续跑步" />
                            <Button
                                Margin="0,0,0,8"
                                Click="FocusRunnerButton_Click"
                                Content="定位跑步点" />
                            <Button
                                Margin="0,8,0,0"
                                Click="ResetViewButton_Click"
                                Content="重置地图视图"
                                Style="{StaticResource WD.PrimaryButton}" />
                        </StackPanel>
                    </ScrollViewer>
                </Border>
            </wd:Drawer.Header>

            <wd:Drawer.Content>
                <Grid Background="#FFF3F6FA">
                    <Grid>
                        <wd:MapView
                            x:Name="DemoMap"
                            CenterLatitude="39.905"
                            CenterLongitude="116.205"
                            ClusterMinimumCount="3"
                            ClusterRadius="42"
                            ClusterTemplate="{StaticResource CustomClusterTemplate}"
                            EnableClustering="True"
                            MapClicked="DemoMap_MapClicked"
                            MapFeatureClicked="DemoMap_MapFeatureClicked"
                            PushpinClickZoomLevel="15"
                            ShowScaleBar="True"
                            ShowZoomControls="True"
                            ZoomControlPosition="BottomRight"
                            ZoomLevel="11">
                            <wd:MapView.Polylines>
                                <wd:MapPolyline Stroke="#FF16A34A" StrokeThickness="4">
                                    <wd:MapPolyline.Points>
                                        <wd:MapLocation Latitude="39.882" Longitude="116.145" />
                                        <wd:MapLocation Latitude="39.902" Longitude="116.188" />
                                        <wd:MapLocation Latitude="39.918" Longitude="116.236" />
                                        <wd:MapLocation Latitude="39.942" Longitude="116.274" />
                                    </wd:MapPolyline.Points>
                                </wd:MapPolyline>
                                <wd:MapPolyline
                                    IsClosed="True"
                                    Stroke="#FFF97316"
                                    StrokeThickness="3">
                                    <wd:MapPolyline.Points>
                                        <wd:MapLocation Latitude="39.918694" Longitude="116.148180" />
                                        <wd:MapLocation Latitude="39.920537" Longitude="116.156420" />
                                        <wd:MapLocation Latitude="39.915797" Longitude="116.162256" />
                                        <wd:MapLocation Latitude="39.908292" Longitude="116.167578" />
                                        <wd:MapLocation Latitude="39.900391" Longitude="116.175474" />
                                        <wd:MapLocation Latitude="39.898284" Longitude="116.166548" />
                                        <wd:MapLocation Latitude="39.904342" Longitude="116.156248" />
                                        <wd:MapLocation Latitude="39.911320" Longitude="116.150240" />
                                    </wd:MapPolyline.Points>
                                </wd:MapPolyline>
                            </wd:MapView.Polylines>
                            <wd:MapView.Polygons>
                                <wd:MapPolygon
                                    Fill="#332563EB"
                                    Stroke="#FF2563EB"
                                    StrokeThickness="2">
                                    <wd:MapPolygon.Points>
                                        <wd:MapLocation Latitude="39.886" Longitude="116.156" />
                                        <wd:MapLocation Latitude="39.895" Longitude="116.245" />
                                        <wd:MapLocation Latitude="39.938" Longitude="116.263" />
                                        <wd:MapLocation Latitude="39.943" Longitude="116.170" />
                                    </wd:MapPolygon.Points>
                                </wd:MapPolygon>
                            </wd:MapView.Polygons>
                            <wd:MapView.Circles>
                                <wd:MapCircle
                                    x:Name="DemoCircle"
                                    CenterLatitude="39.9042"
                                    CenterLongitude="116.4074"
                                    Fill="#33EF4444"
                                    RadiusMeters="300000"
                                    ShapeZIndex="10"
                                    Stroke="#FFEF4444"
                                    StrokeThickness="2" />
                            </wd:MapView.Circles>
                            <wd:MapView.Rectangles>
                                <wd:MapRectangle
                                    x:Name="DemoRectangle"
                                    Fill="#334F46E5"
                                    MaxLatitude="40.2200"
                                    MaxLongitude="117.5000"
                                    MinLatitude="39.4500"
                                    MinLongitude="115.7000"
                                    ShapeZIndex="20"
                                    Stroke="#FF4F46E5"
                                    StrokeThickness="2" />
                            </wd:MapView.Rectangles>
                            <wd:Pushpin
                                Title="自定义中心点"
                                AnchorPoint="0.5,1"
                                Latitude="39.905"
                                Longitude="116.205"
                                Template="{StaticResource StationPushpinTemplate}" />
                            <wd:Pushpin
                                Title="自定义 Marker"
                                AnchorPoint="0.5,1"
                                Latitude="39.924"
                                Longitude="116.241"
                                Template="{StaticResource CustomMapPinTemplate}" />
                        </wd:MapView>

                        <Border
                            Margin="16"
                            Padding="12,8"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            Background="#EFFFFFFF"
                            BorderBrush="#FFDCE3EC"
                            BorderThickness="1"
                            CornerRadius="6">
                            <StackPanel>
                                <TextBlock
                                    FontSize="16"
                                    FontWeight="SemiBold"
                                    Foreground="#FF111827"
                                    Text="MapView 综合功能" />
                                <TextBlock
                                    Margin="0,3,0,0"
                                    FontSize="12"
                                    Foreground="#FF64748B"
                                    Text="拖动、滚轮缩放并点击点位查看效果" />
                                <TextBlock
                                    Margin="0,8,0,0"
                                    FontSize="11"
                                    Foreground="#FF334155"
                                    Text="要素点击" />
                                <TextBlock
                                    x:Name="FeatureClickInfoTextBlock"
                                    Margin="0,8,0,0"
                                    FontSize="11"
                                    Foreground="#FF0F172A"
                                    Text="点击点、线、面查看命中结果" />
                                <TextBlock
                                    Margin="0,8,0,0"
                                    FontSize="11"
                                    Foreground="#FF334155"
                                    Text="地图点击" />
                                <TextBlock
                                    x:Name="MapClickInfoTextBlock"
                                    Margin="0,4,0,0"
                                    FontSize="11"
                                    Foreground="#FF0F172A"
                                    Text="点击地图获取坐标" />
                            </StackPanel>
                        </Border>

                        <Button
                            Width="34"
                            Height="34"
                            Margin="16"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Top"
                            Click="ToggleFeatureDrawerButton_Click"
                            Content="☰"
                            Style="{StaticResource WD.PrimaryButton}" />
                    </Grid>
                </Grid>
            </wd:Drawer.Content>
        </wd:Drawer>
        <controls:CodeViewer.SourceCodes>
            <controls:SourceCodeModel CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/Map/MapViewFeaturesWindow.xaml" CodeType="Xaml" />
            <controls:SourceCodeModel CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/Map/MapViewFeaturesWindow.xaml.cs" CodeType="CSharp" />
        </controls:CodeViewer.SourceCodes>
    </controls:CodeViewer>
</wd:Window>