如何使用必应地图 WPF 控件

最新推荐文章于 2023-08-23 13:26:20 发布
最新推荐文章于 2023-08-23 13:26:20 发布
阅读量296 收藏
点赞数
文章标签： wpf microsoft
原文链接：https://mp.weixin.qq.com/s?__biz=MzI0NDE0MDgyNg==&mid=2649600529&idx=5&sn=fdeafb1fdc9b80617805f435abaa72d1&chksm=f17b4c64c60cc572bad57696d2e3016ac86f50445a118fc37ea05d438da020acad3924a68cc7&scene=126&&sessionid=0
版权

 如何使用必应地图 WPF 控件

如何使用必应地图 WPF 控件

作者：WPFDevelopersOrg - 驚鏵

原文链接：https://github.com/WPFDevelopersOrg/WPFDevelopers

  • 框架使用.NET40；

  • Visual Studio 2019;

  • Bing Maps WPF 控件需要 .NET Framework 4.0和 Windows SDK。这两个组件都随Microsoft Visual Studio VisualC#或Visual Basic Express Edition一起安装。

  • 下面演示如何使用。

  • 引用 Microsoft.Maps.MapControl.WPF.dll 也可以在nuget上找到。

  • 添加命名空间。

  • 新建AMapTitleLayer.cs继承图层MapTileLayer实现加载高德地图瓦片.

1）新建 AMapTitleLayer.cs 代码如下：

using Microsoft.Maps.MapControl.WPF;
using System;

namespace WPFDevelopers.Samples.ExampleViews
{
    public class AMapTitleLayer : MapTileLayer
    {
        public AMapTitleLayer()
        {
            TileSource = new AMapTileSource();
        }

        public string UriFormat
        {
            get { return TileSource.UriFormat; }
            set { TileSource.UriFormat = value; }
        }
    }
    public class AMapTileSource : TileSource
    {
        public override Uri GetUri(int x, int y, int zoomLevel)
        {
            string url = string.Format("http://wprd01.is.autonavi.com/appmaptile?x={0}&y={1}&z={2}&lang=zh_cn&size=1&scl=1&style=7", x, y, zoomLevel);
            return new Uri(url, UriKind.Absolute);
        }
    }
}

2）新建PushpinModel.cs 代码如下：

using Microsoft.Maps.MapControl.WPF;

namespace WPFDevelopers.Samples.ExampleViews
{
    public class PushpinModel
    {
        public Location Location { get; set; }
        public int ID { get; set; }
        public string Title { get; set; }
    }
}

3）新建 BingAMapExample.xaml 代码如下：

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.BingAMapExample"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
             xmlns:map="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
             xmlns:mapOverlays="clr-namespace:Microsoft.Maps.MapControl.WPF.Overlays;assembly=Microsoft.Maps.MapControl.WPF"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <LinearGradientBrush x:Key="MainColor" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF020621" Offset="0"/>
            <GradientStop Color="#FF364BD8" Offset="1"/>
            <GradientStop Color="#FF5A6BD8" Offset="0.499"/>
        </LinearGradientBrush>
        <ControlTemplate x:Key="CarTemplate" TargetType="map:Pushpin">
            <Grid ToolTip="物资车辆">
                <Ellipse Width="35" Height="35" Fill="White" StrokeThickness="3" Stroke="Red"/>
                <Image Source="pack://application:,,,/WPFDevelopers.Samples;component/Images/AMap/Car2.png" Width="25" Height="25"/>
            </Grid>

        </ControlTemplate>

        <SineEase x:Key="SineOut" EasingMode="EaseOut" />

        <Storyboard x:Key="AnimateRound" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="Scale"
                             Duration="0:0:01" To="2" 
                             EasingFunction="{StaticResource SineEaseOut}" />
            <DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="Scale"
                             Duration="0:0:01" To="2" 
                             EasingFunction="{StaticResource SineEaseOut}" />
            <DoubleAnimation Storyboard.TargetProperty="Opacity"  
                             Duration="0:0:01" To="0" 
                             EasingFunction="{StaticResource SineEaseOut}" />
        </Storyboard>
        <Style x:Key="alarmStyle" TargetType="map:Pushpin">
            <Setter Property="PositionOrigin" Value="Center"/>
            <Setter Property="Width" Value="60"/>
            <Setter Property="Height" Value="60"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:Pushpin">
                        <Grid>
                            <Ellipse Height="40" Width="40" Fill="Red" RenderTransformOrigin="0.5,0.5">
                                <Ellipse.OpacityMask>
                                    <RadialGradientBrush>
                                        <GradientStop Offset="0" Color="Transparent" />
                                        <GradientStop Offset="1" Color="Black" />
                                    </RadialGradientBrush>
                                </Ellipse.OpacityMask>
                                <Ellipse.RenderTransform>
                                    <ScaleTransform x:Name="Scale"/>
                                </Ellipse.RenderTransform>
                                <Ellipse.Triggers>
                                    <EventTrigger RoutedEvent="Loaded">
                                        <BeginStoryboard Storyboard="{StaticResource AnimateRound}">
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Ellipse.Triggers>
                            </Ellipse>
                            <Viewbox Width="30" Height="30" 
                                     VerticalAlignment="Top" 
                                     HorizontalAlignment="Center"
                                     Margin="20,0,0,0">
                                <Path Data="{StaticResource PathFlag}" Fill="Orange"/>
                            </Viewbox>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <map:Map x:Name="map" ZoomLevel="5" Center="39.9132801985722,116.392009995601"
                  CredentialsProvider="AgXB7m7fVYxKpjEZV9rGdrRPvLgawYhi4Wvw99kk4RDspoalC3B_vQ8GKJAoxrve">
            <map:Map.Mode>
                <map:MercatorMode/>
            </map:Map.Mode>
            <local:AMapTitleLayer/>
            <map:MapItemsControl ItemsSource="{Binding PushpinArray,RelativeSource={RelativeSource AncestorType=local:BingAMapExample}}">
                <map:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <map:Pushpin Location="{Binding Location}" Cursor="Hand" 
                                     MouseDown="Pushpin_MouseDown"
                                     ToolTip="{Binding Title}"
                                         Background="Red">
                            <TextBlock Text="{Binding ID}"/>
                        </map:Pushpin>
                    </DataTemplate>
                </map:MapItemsControl.ItemTemplate>
            </map:MapItemsControl>
            <map:Pushpin Location="36.6797276003243,118.495410536117" Style="{StaticResource alarmStyle}"/>
            <Canvas Width="50" Height="80" 
              map:MapLayer.Position="31.9121578992881,107.233555852083" 
              map:MapLayer.PositionOrigin="BottomCenter" Opacity="0.7">
                <Path Data="M 0,0 L 50,0 50,50 25,80 0,50 0,0" Fill="ForestGreen" Stroke="Wheat" StrokeThickness="2" />
                <TextBlock FontSize="10" Foreground="White" Padding="10" TextAlignment="Center">
                        这里是 <LineBreak />
                        四川 <LineBreak />
                        通江县 <LineBreak />
                </TextBlock>
            </Canvas>
            <map:MapLayer x:Name="CarLayer"/>
        </map:Map>

        <DockPanel>
            <Grid DockPanel.Dock="Top">
                <Path Data="M75.811064,0 L275.81107,0 275.81107,39.999999 267.12714,39.999999 267.12798,40.000499 67.127973,40.000499 0,0.00050140842 75.811064,0.00050140842 z"
              Width="200" Height="30" Stretch="Fill" Opacity=".8" Stroke="#FFCCFEFF" StrokeThickness="1.5" Fill="{StaticResource MainColor}">
                    <Path.RenderTransform>
                        <SkewTransform AngleX="-40"/>
                    </Path.RenderTransform>
                </Path>
                <TextBlock Text="预警指挥平台" Foreground="White" 
                           VerticalAlignment="Center" HorizontalAlignment="Center"
                           FontSize="16" FontWeight="Black"/>
            </Grid>
            <Grid DockPanel.Dock="Left" Width="200"
                  HorizontalAlignment="Left" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Rectangle Grid.RowSpan="3" Fill="#FF364BD8" Opacity=".8" Stroke="#FFCCFEFF" StrokeThickness="1.5"/>
                <TextBlock Text="数据信息" FontSize="16" Foreground="White" Margin="10,10,0,0"/>
                <ItemsControl ItemsSource="{Binding PushpinArray,RelativeSource={RelativeSource AncestorType=local:BingAMapExample}}"
                              Margin="4,10" Grid.Row="1">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="4" x:Name="PART_Grid"
                                  MouseLeftButtonDown="PART_Grid_MouseLeftButtonDown"
                                  Tag="{Binding ID}">
                                <Grid.Resources>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="Foreground" Value="White"/>
                                        <Setter Property="FontSize" Value="16"/>
                                    </Style>
                                </Grid.Resources>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Ellipse Width="20" Height="20" Fill="OrangeRed"/>
                                <TextBlock Text="{Binding ID}" HorizontalAlignment="Center"/>
                                <TextBlock Margin="4,0" Grid.Column="1" Text="{Binding Title}"/>
                            </Grid>
                            <DataTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="PART_Grid" Value="#FF020621"/>
                                </Trigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <Button Content="物资轨迹" Click="BtnCar_Click" Grid.Row="2" Height="40" Style="{StaticResource PrimaryButton}"/>
            </Grid>
        </DockPanel>
    </Grid>
</UserControl>

4）新建 BingAMapExample.xaml.cs 逻辑代码如下：

  • 点击左侧列表的point点地图定位到并放大层级到16级。

using Microsoft.Maps.MapControl.WPF;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Threading;

namespace WPFDevelopers.Samples.ExampleViews
{
    /// <summary>
    /// BingAMapExample.xaml 的交互逻辑
    /// </summary>
    public partial class BingAMapExample : UserControl
    {
        private LocationCollection _polyLocations;
        private MapPolyline mapPolyline;
        private Pushpin carPushpin;
        private DispatcherTimer dispatcherTimer;
        private List<Location> locations;

        public IEnumerable PushpinArray
        {
            get { return (IEnumerable)GetValue(PushpinArrayProperty); }
            set { SetValue(PushpinArrayProperty, value); }
        }

        public static readonly DependencyProperty PushpinArrayProperty =
            DependencyProperty.Register("PushpinArray", typeof(IEnumerable), typeof(BingAMapExample), new PropertyMetadata(null));

        public BingAMapExample()
        {
            InitializeComponent();
            var pushpins = new List<PushpinModel>();
            pushpins.Add(new PushpinModel { ID = 1, Location = new Location(39.8151940395589, 116.411970893135), Title = "和义东里社区" });
            pushpins.Add(new PushpinModel { ID = 2, Location = new Location(39.9094878843105, 116.33299936282), Title = "中国水科院南小区" });
            pushpins.Add(new PushpinModel { ID = 3, Location = new Location(39.9219204792284, 116.203500574855), Title = "石景山山姆会员超市" });
            pushpins.Add(new PushpinModel { ID = 4, Location = new Location(39.9081417418219, 116.331244439925), Title = "茂林居小区" });
            PushpinArray = pushpins;

            _polyLocations = new LocationCollection();
          
            _polyLocations.Add(new Location(39.9082973053021, 116.63105019548));
            _polyLocations.Add(new Location(31.9121578992881, 107.233555852083));

            mapPolyline = new MapPolyline
            {
                Stroke = Brushes.Green,
                StrokeThickness = 2,
                Locations = _polyLocations,
            };
            CarLayer.Children.Add(mapPolyline);

            carPushpin = new Pushpin
            {
                Template = this.Resources["CarTemplate"] as ControlTemplate,
                Location = new Location(31.9121578992881, 107.233555852083),
                PositionOrigin = PositionOrigin.Center,
            };

            CarLayer.Children.Add(carPushpin);

            dispatcherTimer = new DispatcherTimer();
            dispatcherTimer.Interval = TimeSpan.FromSeconds(1.5);
            dispatcherTimer.Tick += DispatcherTimer_Tick;
        }
        int index = 0;
        private void DispatcherTimer_Tick(object sender, EventArgs e)
        {
            if (index < 0)
            {
                index = locations.Count - 1;
                dispatcherTimer.Stop();
                return;
            }
            carPushpin.Location = locations[index];
            index--;
        }

        private void BtnCar_Click(object sender, RoutedEventArgs e)
        {
            locations = new List<Location>();
            locations.Add(new Location(39.9082973053021, 116.63105019548));
            locations.Add(new Location(39.0654365763652, 115.513103745601));
            locations.Add(new Location(38.5861378332358, 114.897869370601));
            locations.Add(new Location(38.0690298850334, 114.238689683101));
            locations.Add(new Location(37.4436424646135, 113.491619370601));
            locations.Add(new Location(36.8833163124675, 112.832439683101));
            locations.Add(new Location(36.6015984304246, 112.480877183101));
            locations.Add(new Location(36.2125510101126, 112.041424058101));
            locations.Add(new Location(35.6074752751952, 111.426189683101));
            locations.Add(new Location(34.9977887035825, 110.591228745601));
            locations.Add(new Location(34.456028305434, 109.932049058101));
            locations.Add(new Location(33.9836399832877, 109.580486558101));
            locations.Add(new Location(33.5086116028286, 108.965252183101));
            locations.Add(new Location(33.1046158275268, 108.525799058101));
            locations.Add(new Location(32.6617655474571, 108.042400620601));
            locations.Add(new Location(32.179523137361, 107.515056870601));
            locations.Add(new Location(31.9121578992881, 107.233555852083));
            index = locations.Count - 1;
            dispatcherTimer.Start();

        }
        private void Map_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Point mousePosition = e.GetPosition(this);
            Location pinLocation = this.map.ViewportPointToLocation(mousePosition);

        }

        private void Pushpin_MouseDown(object sender, MouseButtonEventArgs e)
        {
            var model = sender as Pushpin;
            map.Center = model.Location;
            map.ZoomLevel = 16;
        }

        private void PART_Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            var grid = sender as Grid;
            var model = PushpinArray.OfType<PushpinModel>().FirstOrDefault(x => x.ID.Equals(grid.Tag));
            map.Center = model.Location;
            map.ZoomLevel = 16;
        }
    }
}

ccbf2f1a9c980f2761bad4fae1432c2e.gif

Github|BingAMapExample[1]
码云|BingAMapExample[2]

参考资料

[1]

Github|BingAMapExample: https://github.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers.Samples/ExampleViews/Map/BingAMapExample.xaml

[2]

码云|BingAMapExample: https://gitee.com/WPFDevelopersOrg/WPFDevelopers/blob/master/src/WPFDevelopers.Samples/ExampleViews/Map/BingAMapExample.xaml

zls365365
关注
WPF编程--地图控件BingMap
02-05 872
WPF编程--地图控件BingMap
WPF下的地图开发控件(GMap.NET)使用心得—— GMap学习笔记(二)
weixin_34348111的博客
01-22 679
WPF下的地图开发控件(GMap.NET)使用心得—— GMap学习笔记(二) 饱暖思淫欲-古人诚不欺我。 解决了自己的问题，想研究一下Gmap.net如何实现离线运行。 闲话少说，挽起袖子，开始干。 一 （离线运行的秘密） 发现运行程序后，本地生成这样一个文件： C:\Documents and Settings\Administrator\Local Settings\Applic...
WPF中手写地图控件（1）——基于瓦片地图的控件
小书童的博客
08-23 814
瓦片地图组成地图控件
在wpf中使用bing地图控件
09-04
在wpf中使用bing地图控件
WPF中手写地图控件（2）——区域显示
小书童的博客
08-23 391
地图控件上显示区域
带WPF的Kinect必应地图AJAX控件6.3
04-11
标题中的“带WPF的Kinect必应地图AJAX控件6.3”是指一个集成在Windows Presentation Foundation（WPF）应用中的控件，该控件利用了Microsoft Kinect设备和Bing Maps服务，版本为6.3。这个控件允许开发者在WPF环境中...
GMap地图控件应用
12-26
它支持多种地图服务，如谷歌地图、必应地图、OpenStreetMap等。开发者可以利用这个控件轻松地在应用程序中嵌入交互式地图。 在C#中使用GMap控件，首先需要添加GMap.NET的引用到项目中。这通常通过NuGet包管理器来...
GMap地图控件GMarkerOverlay使用例程
12-12
首先，GMap.NET是一个开源的.NET Framework库，它支持多种地图服务，包括谷歌地图（Google Maps）、必应地图（Bing Maps）和开放街图（OpenStreetMap）等。GMap控件是这个库的一部分，它提供了一个易于使用的接口，...
GMAP.NETDemo.rar_GMAP.NET_GMFlow_GMap.net Demo_GMap官网实例_gmap c#
07-15
1. 地图服务集成：GMAP.NET支持多种地图服务，包括谷歌地图（Google Maps）、必应地图（Bing Maps）、OpenStreetMap等。开发者可以根据需求选择合适的地图服务提供商，通过API密钥或公开URL进行集成。 2. 地图控件...
GMap.NET下载离线地图下载即用谷歌百度腾讯高德
09-22
GMap.NET提供了一个名为GMap.NET.MapProviders的类库，其中包含各种地图服务提供商的接口，如GMapProvider（谷歌地图）、BingMapProvider（必应地图）、TencentMapProvider（腾讯地图）和AMapProvider（高德地图）。...
wpf地图显示
06-12
用wpf添加了必应地图，可以显示地图详细信息。。。。。。
wpf中插入百度地图
09-28
wpf中加载web地图百度地图的方法，自定义饼图。wpf中加载web地图百度地图的方法，自定义饼图。
Wpf实现地图缩放,拖拽
10-15
WPF加载一个大图片，实现在某个小的矩形区域内对这个大图片进行鼠标滚动缩放，鼠标点击拖拽，并进行边界控制（防拖出）.
MapControl:c#基于WPF的一套地图管理库
05-02
MapControl c#基于WPF的一套地图管理库
WPF开发的电子地图
05-21
WPF开发的电子地图，可以支持简单的在线和离线浏览功能。
WPF中手写地图控件（3）——动态加载地图图片
最新发布
小书童的博客
08-23 1300
图片动态加载
WPF编程--地图控件GMap使用
02-05 2240
WPF编程--地图控件GMap使用
新版WPF控件必应地图发布
weixin_34185320的博客
01-19 105
2019独角兽企业重金招聘Python工程师标准>>> ...
必应地图控件（WPF版）添加中国地图
weixin_30633507的博客
07-04 520
Bingmap for WPF control 没有直接提供中国地图，但是通过必应地图（中国）知道，时存在必应中国地图，经过一番百度后，找到解决办法。通过添加新的地图图层来解决问题，用新的图层覆盖原有的地图，新图层中显示中国地图。不说了，代码解决大部分问题（代码如下）： //其中map为必应地图for WPF 控件 MapTileLayertileLayer; pri...
WPF控件使用与XAML详解
"这篇文章主要介绍了WPF中的控件使用，包括控件的概述、创建控件实例的方法，以及XAML语言在构建用户界面中的应用。XAML是一种声明性语言，使得UI元素的创建和应用程序逻辑的分离变得简单，且与.NET Framework的后备...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值