坦洲网站建设公司哪家好,做排行榜的网站,网站管理平台扩展插件,深圳网站设计实力乐云seo基于瓦片地图的控件
本控件使用dotnet编写#xff0c;基于WPF的数据绑定自动生成#xff0c;可以用于展示瓦片地图。为了提高地图加载速度#xff0c;我们使用了内存缓存和本地文件缓存技术#xff0c;并采用从中心扩散异步等加载方式。这些技术的结合#xff0c;使得地图…基于瓦片地图的控件
本控件使用dotnet编写基于WPF的数据绑定自动生成可以用于展示瓦片地图。为了提高地图加载速度我们使用了内存缓存和本地文件缓存技术并采用从中心扩散异步等加载方式。这些技术的结合使得地图的加载更加流畅。
你可以在Nuget上搜索xyxandwxx.MapControl直接引用该控件
多个瓦片组成地图控件
UserControl x:ClassMapControl.Gis.GisLayoutxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:MapControl.Gismc:Ignorabled d:DesignHeight450 d:DesignWidth800 NameMainControl Background#00000000UserControl.ResourcesResourceDictionaryResourceDictionary.MergedDictionariesResourceDictionary SourceStyles/GisMapGridStyle.xaml/ResourceDictionary/ResourceDictionary.MergedDictionaries/ResourceDictionary/UserControl.ResourcesCanvas Background#00000000 NameMapControlGrid IsManipulationEnabledTrue ManipulationStartingGrid_ManipulationStarting ManipulationDeltaGrid_ManipulationDeltaAsync ManipulationCompletedGrid_ManipulationCompletedGrid Canvas.Left{Binding OffsetX,ElementNameMainControl} Canvas.Top{Binding OffsetY,ElementNameMainControl}MouseMoveMMove MouseDownMDown MouseUpMUp MouseLeaveMLeave MouseWheelMWheel ItemsControl ItemsSource{Binding BaseMap.TitleBlocks,ElementNameMainControl}ScrollViewer.CanContentScrollFalse NameMapLayoutStyle{StaticResource MapCanvasImageList}/ItemsControlItemsControl ItemsSource{Binding Areas,ElementNameMainControl}ScrollViewer.CanContentScrollFalseStyle{StaticResource MaskListStyle}/ItemsControl/Grid/Canvas/UserControl单个瓦片数据结构
瓦片的数据结构其中X、Y、Level是瓦片本身的属性用于获取到瓦片图的路径Url后面的高度Height、宽度Width就是显示为图像控件的大小偏移量LayerOffsetPixelX与LayerOffsetPixelY就是基于地图左上角的瓦片在右边第几个LayerOffsetPixelX就是几倍的 Width在下面第几个LayerOffsetPixelY就是几倍的Height。
public class TitleBlock : INotifyPropertyChanged
{/// summary/// X/// /summarypublic int TitleX { get; set; }/// summary/// Y/// /summarypublic int TitleY { get; set; }/// summary/// 所在的地图等级/// /summarypublic int Level { get; set; }/// summary/// 地址/// /summarypublic Uri Url { get; set; }/// summary/// 宽度/// /summarypublic double Width { get; set; } 256;/// summary/// 高度/// /summarypublic double Height { get; set; } 256;/// summary/// 绘制的时候的偏移量/// /summarypublic double LayerOffsetPixelX { get; set; }/// summary/// 绘制的时候的偏移量/// /summarypublic double LayerOffsetPixelY { get; set; }public event PropertyChangedEventHandler? PropertyChanged;
}瓦片的样式
Style TargetTypeItemsControl x:KeyMapCanvasImageListSetter PropertyItemsPanelSetter.ValueItemsPanelTemplateCanvas IsItemsHostTrue Width{Binding BaseMap.PixelWidth,RelativeSource{RelativeSource ModeFindAncestor,AncestorTypeUserControl}}Height{Binding BaseMap.PixelHeight,RelativeSource{RelativeSource ModeFindAncestor,AncestorTypeUserControl}}/Canvas/ItemsPanelTemplate/Setter.Value/SetterSetter PropertyItemContainerStyleSetter.ValueStyle TargetTypeContentPresenterSetter PropertyCanvas.Left Value{Binding LayerOffsetPixelX}/SetterSetter PropertyCanvas.Top Value{Binding LayerOffsetPixelY}/Setter/Style/Setter.Value/SetterSetter PropertyItemTemplateSetter.ValueDataTemplatelocal:LoadingImage Width{Binding Width} Height{Binding Height} Source{Binding Url,IsAsyncTrue}/local:LoadingImage/DataTemplate/Setter.Value/Setter
/Style地图布局的数据结构
/// summary
/// 基础的地图布局类
/// /summary
public abstract class BaseMapLayout : INotifyPropertyChanged
{/// summary/// 当前地图的显示层级/// /summarypublic virtual int Level { get; set; }/// summary/// 瓦片地图宽度/// /summarypublic virtual double MapTitleWidth { get; set; } 256;/// summary/// 最大和最小的显示等级/// /summarypublic abstract int MinLevel { get; set; }public abstract int MaxLevel { get; set; }/// summary/// 当前的行数/// /summarypublic int Rows { get; protected set; }/// summary/// 当前的列数/// /summarypublic int Cols { get; protected set; }/// summary/// 总的像素宽度/// /summarypublic double PixelWidth { get; set; }/// summary/// 总的像素高度/// /summarypublic double PixelHeight { get; set; }/// summary/// 修改的次数/// /summarypublic int ModifyCount { get; set; } 0;/// summary/// 当前的偏移box/// /summarypublic TitleBlock OffsetTitleBox { get; set; }/// summary/// 缓存管理/// /summaryinternal CacheManager CacheManager { get; set; }/// summary/// 当前的block集合/// /summarypublic virtual IListTitleBlock TitleBlocks { get; protected set; }/// summary/// 当前层一共有多少个区块/// /summarypublic virtual int TotalBlock{get{var t (int)Math.Pow(Math.Pow(2, Level), 2);if (t 0) return 1;return t;}}
}1.其中Level、MinLevel、MaxLevel是表示地图等级一般是前端通过鼠标滚轮事件MouseWheel、触摸屏双指操作更改ManipulationDelta。 2.其中行数、列数一般是前端通过按住鼠标移动、触摸屏滑动事件更改其中触摸事件可以参考创建你的第一个触控应用程序。
自定义地图用户控件
这里主要是一些依赖属性
public partial class GisLayout : UserControl
{#region 扩展属性public static readonly DependencyProperty BaseMapProperty DependencyProperty.Register(BaseMap, typeof(BaseMapLayout), typeof(GisLayout));public static DependencyProperty AreasProperty DependencyProperty.Register(Areas, typeof(IEnumerable), typeof(GisLayout));public static DependencyProperty OffsetXProperty DependencyProperty.Register(OffsetX, typeof(double), typeof(GisLayout));public static DependencyProperty OffsetYProperty DependencyProperty.Register(OffsetY, typeof(double), typeof(GisLayout));public static DependencyProperty FillProperty DependencyProperty.Register(Fill, typeof(Brush), typeof(GisLayout));public static DependencyProperty ItemTemplateProperty DependencyProperty.Register(ItemTemplate, typeof(DataTemplate), typeof(GisLayout));public static DependencyProperty CenterPointProperty DependencyProperty.Register(CenterPoint, typeof(Point), typeof(GisLayout), new PropertyMetadata(CenterPointCallback));public static DependencyProperty IsZoomAutoCenterProperty DependencyProperty.Register(IsZoomAutoCenter, typeof(bool), typeof(GisLayout), new PropertyMetadata(false));public static DependencyProperty TextFontSizeProperty DependencyProperty.Register(TextFontSize, typeof(double), typeof(GisLayout), new PropertyMetadata(12.0));public static DependencyProperty LevelProperty DependencyProperty.Register(Level, typeof(int), typeof(GisLayout), new PropertyMetadata(new PropertyChangedCallback(OnLevelChanged)));public static DependencyProperty MaxLevelProperty DependencyProperty.Register(MaxLevel, typeof(int), typeof(GisLayout));public static readonly DependencyPropertyKey LevelMinusPropertyKey DependencyProperty.RegisterReadOnly(LevelMinus, typeof(int), typeof(GisLayout), null);public static readonly DependencyProperty LevelMinusProperty LevelMinusPropertyKey.DependencyProperty;public static DependencyProperty ItemVisibilityProperty DependencyProperty.Register(ItemVisibility, typeof(Visibility), typeof(GisLayout));private static void CenterPointCallback(DependencyObject d, DependencyPropertyChangedEventArgs e){GisLayout layout d as GisLayout;Point p (Point)e.NewValue;layout.SetCenter(p.X, p.Y);}public static DependencyProperty DragMouseButtonProperty DependencyProperty.Register(DragMouseButton, typeof(MouseButton), typeof(GisLayout), new PropertyMetadata(MouseButton.Right));#endregion/// summary/// Item的Visibility状态/// /summarypublic Visibility ItemVisibility { get (Visibility)GetValue(ItemVisibilityProperty); set SetValue(ItemVisibilityProperty, value); }/// summary/// 地图最大Level与当前Level的差值/// /summarypublic int LevelMinus { get (int)GetValue(LevelMinusProperty); private set SetValue(LevelMinusPropertyKey, value); }/// summary/// 地图当前Level/// /summarypublic int Level { get (int)GetValue(LevelProperty); set SetValue(LevelProperty, value); }/// summary/// 地图最大Level/// /summarypublic int MaxLevel { get (int)GetValue(MaxLevelProperty); set SetValue(MaxLevelProperty, value); }/// summary/// 文本字体大小/// /summarypublic double TextFontSize { get (double)GetValue(TextFontSizeProperty); set SetValue(TextFontSizeProperty, value); }/// summary/// 设置缩放自动更新中心点/// /summarypublic bool IsZoomAutoCenter { get (bool)GetValue(IsZoomAutoCenterProperty); set SetValue(IsZoomAutoCenterProperty, value); }/// summary/// 地图操作类/// /summarypublic BaseMapLayout BaseMap { get (BaseMapLayout)GetValue(BaseMapProperty); set SetValue(BaseMapProperty, value); }/// summary/// 经纬度区域数据集/// /summarypublic IEnumerable Areas { get (IEnumerable)GetValue(AreasProperty); set SetValue(AreasProperty, value); }/// summary/// 控件偏移坐标/// /summarypublic double OffsetX { get (double)GetValue(OffsetXProperty); set SetValue(OffsetXProperty, value); }/// summary/// 控件拖拽偏移坐标/// /summarypublic double OffsetY { get (double)GetValue(OffsetYProperty); set SetValue(OffsetYProperty, value); }/// summary/// 经纬度遮罩填充颜色/// /summarypublic Brush Fill { get (Brush)GetValue(FillProperty); set SetValue(FillProperty, value); }/// summary/// 中心经纬度/// /summarypublic Point CenterPoint { get (Point)GetValue(CenterPointProperty); set SetValue(CenterPointProperty, value); }/// summary/// 拖拽鼠标的按键/// /summarypublic MouseButton DragMouseButton { get (MouseButton)GetValue(DragMouseButtonProperty); set SetValue(DragMouseButtonProperty, value); }/// summary/// 子项模板/// /summarypublic DataTemplate ItemTemplate { get (DataTemplate)GetValue(ItemTemplateProperty); set SetValue(ItemTemplateProperty, value); }/// summary/// 构造函数/// /summarypublic GisLayout(){InitializeComponent();this.Loaded GisLayout_Loaded;}private void GisLayout_Loaded(object sender, RoutedEventArgs e){SetCenter(CenterPoint.X, CenterPoint.Y);}public event PropertyChangedEventHandler PropertyChanged;private static void OnLevelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){int maxLevel (int)d.GetValue(MaxLevelProperty);int level (int)d.GetValue(LevelProperty);d.SetValue(LevelMinusPropertyKey, maxLevel - level);}protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo){base.OnRenderSizeChanged(sizeInfo);SetCenter(CenterPoint.X, CenterPoint.Y);}/// summary/// 经纬度坐标转当前地图的像素坐标/// /summary/// param namemapPoint经纬度坐标/param/// returns像素坐标/returnsprivate Point ConvertToPixelPoint(Point mapPoint){if (BaseMap is null) return new Point();PixelTitleBlock block BaseMap.LongitudeAndAtitudeConvertToPixel(mapPoint.X, mapPoint.Y);var centerX (block.TitleX - BaseMap.OffsetTitleBox.TitleX) * block.Width block.OffsetX;var centerY (block.TitleY - BaseMap.OffsetTitleBox.TitleY) * block.Height block.OffsetY;return new Point(centerX, centerY);}/// summary/// 设置居中 在设置的经纬度/// /summary/// param namelat维度/param/// param namelng经度/parampublic void SetCenter(double lng, double lat){if (BaseMap is null) return;var center ConvertToPixelPoint(new Point(lng, lat));var offsetx RenderSize.Width / 2 - center.X;var offsety RenderSize.Height / 2 - center.Y;var clip OffsetClip(new Point(offsetx, offsety));OffsetX clip.X;OffsetY clip.Y;}#region 鼠标控制/// summary/// 前一个坐标/// /summaryprivate Point ForntPoint { get; set; }/// summary/// 是否移动/// /summaryprivate bool IsMove { get; set; }/// summary/// 是否是多指操作/// /summaryprivate bool IsManipulationOption false;#region 移动控制/// summary/// 偏移裁剪过滤 防止超出边界/// /summary/// param nametarget目标偏移/param/// returns实际偏移/returnsprivate Point OffsetClip(Point target){var tempX target.X;var tempY target.Y;if (tempX 0){tempX 0;}else if (tempX -BaseMap.PixelWidth this.RenderSize.Width){tempX -BaseMap.PixelWidth this.RenderSize.Width;}if (tempY 0){tempY 0;}else if (tempY -BaseMap.PixelHeight this.RenderSize.Height){tempY -BaseMap.PixelHeight this.RenderSize.Height;}return new Point(tempX, tempY);}/// summary/// 计算2个点的距离/// /summary/// param namep1/param/// param namep2/param/// returns/returnsprivate double GetDistance(Point p1, Point p2){return Math.Sqrt(Math.Pow(p1.X - p2.X, 2) Math.Pow(p1.Y - p2.Y, 2));}/// summary/// 开始移动/// /summary/// param namepoint/paramprivate void StartMove(Point point){IsMove true;ForntPoint point;}/// summary/// 停止移动/// /summaryprivate void StopMove(){IsMove false;}/// summary/// 使用新的点更新移动/// /summary/// param namepoint/paramprivate void UpdateMove(FuncPoint getCurrentPoint){if (!IsMove || IsManipulationOption) return;Point now getCurrentPoint();var x now.X - ForntPoint.X;var y now.Y - ForntPoint.Y;var dis Math.Sqrt(x * x y * y);if (dis 3){return;}if (dis 200){return;}var tempX OffsetX x;var tempY OffsetY y;var clip OffsetClip(new Point(tempX, tempY));OffsetX clip.X;OffsetY clip.Y;ForntPoint now;}/// summary/// 使用新的点更新移动/// /summary/// param namepoint/paramprivate void UpdateMove(Vector offset){var x offset.X;var y offset.Y;var dis Math.Sqrt(x * x y * y);if(dis 2){return;}if (dis 200){return;}var tempX OffsetX x;var tempY OffsetY y;var clip OffsetClip(new Point(tempX, tempY));OffsetX clip.X;OffsetY clip.Y;}private bool IsZooming false; // 是否正在缩放private DateTime ForntTime DateTime.Now; // 上次操作的事件private long SpanMiliseconds 1000; // 间隔的毫秒/// summary/// 更新缩放/// /summary/// param nameisBigger是变大还是缩小/param/// param namezoomCenterPoint缩放中心点/paramprivate async Task UpdateZoom(bool isBigger, Point zoomCenterPoint){if (IsZooming) return;if ((DateTime.Now - ForntTime).TotalMilliseconds SpanMiliseconds) return;IsZooming true;var point zoomCenterPoint;var lngLat BaseMap.PixelConvertToLongitudeAndAtitude(point.X, point.Y);if (!isBigger){await BaseMap.ResetLayout(lngLat.X, lngLat.Y, BaseMap.Level - 1);}else{await BaseMap.ResetLayout(lngLat.X, lngLat.Y, BaseMap.Level 1);}SetCenter(lngLat.X, lngLat.Y);IsZooming false;ForntTime DateTime.Now;}#endregion#region 鼠标控制的移动private void MMove(object sender, MouseEventArgs e){UpdateMove(() e.GetPosition(MapControlGrid));}private void MDown(object sender, MouseButtonEventArgs e){if (e.ChangedButton DragMouseButton){StartMove(e.GetPosition(MapControlGrid));}}private void MUp(object sender, MouseButtonEventArgs e){StopMove();}private void MLeave(object sender, MouseEventArgs e){StopMove();}#endregion#region 鼠标控制的缩放/// summary/// 注册了滚轮放大事件/// /summary/// param namesender/param/// param namee/paramprivate async void MWheel(object sender, MouseWheelEventArgs e){var res e.Delta;var point e.GetPosition(sender as FrameworkElement);await UpdateZoom(res 0, IsZoomAutoCenter ? point : ConvertToPixelPoint(CenterPoint));}#endregion/// summary/// 双指操作/// /summary/// param namesender/param/// param namee/paramprivate async void Grid_ManipulationDeltaAsync(object sender, ManipulationDeltaEventArgs e){if (e.Manipulators.Count() 2){IsManipulationOption false;UpdateMove(e.DeltaManipulation.Translation);return;}var point1 e.Manipulators.First().GetPosition(MapLayout);var point2 e.Manipulators.Last().GetPosition(MapLayout);var point new Point((point1.X point2.X) / 2, (point1.Y point2.Y) / 2);IsManipulationOption true;var scale e.DeltaManipulation.Scale;if (scale.X 1 scale.Y 1){await UpdateZoom(false, IsZoomAutoCenter ? point : ConvertToPixelPoint(CenterPoint));}else if (scale.X 1 scale.Y 1){await UpdateZoom(true, IsZoomAutoCenter ? point : ConvertToPixelPoint(CenterPoint));}IsManipulationOption false;}/// summary/// 多指操作开始/// /summary/// param namesender/param/// param namee/paramprivate void Grid_ManipulationStarting(object sender, ManipulationStartingEventArgs e){e.ManipulationContainer sender as FrameworkElement;e.Mode ManipulationModes.All;}/// summary/// 多指操作结束/// /summary/// param namesender/param/// param namee/paramprivate void Grid_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e){IsManipulationOption false;}#endregion}高德瓦片
高德地图的瓦片获取方式前者lang可以通过zh_cn设置中文en设置英文size基本无作用scl设置标注还是底图scl1代表注记scl2代表底图矢量或者影像style设置影像和路网style6为影像图style7为矢量路网style8为影像路网
public override string GetUri(int row, int column, int level)
{if (MapImage MapImageType.RoadNetwork)return http://webrd0 (column % 4 1) .is.autonavi.com/appmaptile?langzh_cnsize1scale1style7x column y row z level;elsereturn http://webst0 (column % 4 1) .is.autonavi.com/appmaptile?langzh_cnsize1scale1style6x column y row z level;
}外部调用地图控件
map:GisLayout BaseMap{Binding PathBaseMapLayout} Fill#50FF0000 DragMouseButtonLeftAreas{Binding PathIotBlockList} CenterPoint{Binding CenterPoint}Level{Binding BaseMapLayout.Level,ModeOneWay} MaxLevel{Binding BaseMapLayout.MaxLevel,ModeOneWay}x:NameMap IsZoomAutoCenterTruemap:GisLayout.StyleStyle TargetType{x:Type map:GisLayout}Style.TriggersTrigger PropertyLevelMinus Value0Setter PropertyTextFontSize Value20//TriggerTrigger PropertyLevelMinus Value1Setter PropertyTextFontSize Value15//TriggerTrigger PropertyLevelMinus Value2Setter PropertyItemVisibility ValueCollapsed//Trigger/Style.Triggers/Style/map:GisLayout.Stylemap:GisLayout.ItemTemplateDataTemplateStackPanel OrientationVertical Visibility{Binding PathItemVisibility, RelativeSource{RelativeSource AncestorTypemap:GisLayout}}behaviour:Interaction.Triggersbehaviour:EventTrigger EventNameMouseLeftButtonDownbehaviour:InvokeCommandAction Command{Binding ClickCommand}CommandParameter{Binding Path.}//behaviour:EventTriggerbehaviour:EventTrigger EventNameTouchDownbehaviour:InvokeCommandAction Command{Binding ClickCommand}CommandParameter{Binding Path.}//behaviour:EventTrigger/behaviour:Interaction.TriggersImage Source../Resources/定位.png StretchNone IsHitTestVisibleFalse/TextBlock Text{Binding Name} ForegroundBlack FontSize{Binding PathTextFontSize, RelativeSource{RelativeSource AncestorTypemap:GisLayout}} HorizontalAlignmentCenter VerticalAlignmentCenter IsHitTestVisibleFalse//StackPanel/DataTemplate/map:GisLayout.ItemTemplate
/map:GisLayout
