首页 > 代码库 > WindowsPhone开发—— 使用手绘图片做景区导览地图
WindowsPhone开发—— 使用手绘图片做景区导览地图
前些日子在做景区App遇到需求，使用手绘图片做一个简易的地图，支持放大缩小平移以及显示景点Mark，安卓上可以使用一个叫做“mAppWidget”的开源库来完成，WP上有人建议用ArcGIS，但是考虑到只是简单的放大缩小平移以及展示Mark标记，没必要再去花费精力去大费周折的研究ArcGIS，于是就各种搜索WP下的放大缩小平移图片的文章，还好很庆幸找到一篇（连接地址给忘记了原作者如果看到的话希望能提醒下给加上原链接）。解决了对图片放大缩小平移的问题，剩下的就是在上面添加Mark标记点了以及解决每次放大缩小后的Mark重新定位的问题。不多说。上代码！
前端XAML：
<!--LayoutRoot 是包含所有页面内容的根网格--> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Padding="12,12,0,18" Grid.Row="0" Style="{StaticResource SinglePageHeardStyle}" > <TextBlock FontSize="28" Text="地图导览"/> </Border> <Grid x:Name="ContentPanel" Grid.Row="1" > <ViewportControl x:Name="Viewport" HorizontalAlignment="Left" VerticalAlignment="Top"> <Canvas x:Name="can_Map" Width="480" Height="800"> <Image x:Name="Image" Stretch="Uniform" CacheMode="BitmapCache" ManipulationStarted="Viewport_ManipulationStarted" ManipulationDelta="Viewport_ManipulationDelta" ManipulationCompleted="Viewport_ManipulationCompleted" > </Image> </Canvas> </ViewportControl> </Grid> </Grid>
后台cs:
public partial class MapPage : PhoneApplicationPage { private const double IMAGE_MAX_WIDTH = 2048; private const double IMAGE_MAX_HEIGHT = 2048; private double _width = 0; private double _height = 0; private double _scale = 1.0; private Point _relativeCenter; private bool _pinching = false; private WriteableBitmap _writeableBitmap; public MapPage() { InitializeComponent(); this.Loaded += MainPage_Loaded; } private void MainPage_Loaded(object sender, RoutedEventArgs e) { var bitmapImage = GetImgForRes(); _writeableBitmap = new WriteableBitmap(bitmapImage); double scale; if (_writeableBitmap.PixelWidth > _writeableBitmap.PixelHeight) { scale = IMAGE_MAX_WIDTH / _writeableBitmap.PixelWidth; } else { scale = IMAGE_MAX_HEIGHT / _writeableBitmap.PixelHeight; } _width = _writeableBitmap.PixelWidth * scale; _height = _writeableBitmap.PixelHeight * scale; this.Image.Source = _writeableBitmap; ConfigureViewport(); App.MapViewModel.GetSp(App.GetUserAcction()); App.MapViewModel.GetMapSpCompleted += () => { foreach (var item in App.MapViewModel.ScencParentByMobile.Data) { //计算当前每个Mark的宽高与当前手绘图片的宽高缩放比例 item.Sh = (item.MapY -30) / _height; item.Sw = (item.MapX - 30) / _width; Image el = new Image(); //SetLeft 和SetTop 是根据元素的（0,0）点坐标开始的 所以放置坐标Mark的时候要减去元素宽的一半和元素高度 Canvas.SetLeft(el, (Image.Width * item.Sw) - 30); Canvas.SetTop(el, (Image.Height * item.Sh) - 60); el.Height = el.Width = 60; el.Stretch = Stretch.Uniform; //根据业务区选择加载哪个图片 if (item.IsFlag == 1) el.Source = new BitmapImage(new Uri("/MapPage/scenic_pointer_gril@2x.png", UriKind.RelativeOrAbsolute)); else el.Source = new BitmapImage(new Uri("/MapPage/scenic_pointer@2x.png", UriKind.RelativeOrAbsolute)); el.Tag = item.SCID + "|" + item.Sw + "|" + item.Sh; //记录每个Mark的id 宽高缩放比例到Tag以备用 can_Map.Children.Add(el); } }; } private void ConfigureViewport() { if (_width < _height) { _scale = Viewport.ActualHeight / _height; } else { _scale = Viewport.ActualWidth / _width; } Image.Width = _width * _scale; Image.Height = _height * _scale; Viewport.Bounds = new Rect(0, 0, Image.Width, Image.Height); Viewport.SetViewportOrigin(new Point(Image.Width / 2 - Viewport.Viewport.Width / 2, Image.Height / 2 - Viewport.Viewport.Height / 2)); } private static BitmapImage GetImgForRes() { string fileName = "/QWCProject;component/MapPage/map.jpg"; using (Stream stream = Application.GetResourceStream(new Uri(fileName, UriKind.Relative)).Stream) { BitmapImage bitmapImage = new BitmapImage(); bitmapImage.SetSource(stream); return bitmapImage; } } private void Viewport_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e) { if (_pinching) { e.Handled = true; CompletePinching(); } } private void CompletePinching() { _pinching = false; double sw = Image.Width / _width; double sh = Image.Height / _height; _scale = Math.Min(sw, sh); //完成缩放放大后获取所有Mark点集合 var markList = WPTools.VisualTreeTool.GetChildObjects<Image>(can_Map, typeof(Image)); foreach (var item in markList) { //过滤手绘图片 if (item.Tag == null) continue; //根据当前Image（手绘图片）的宽高乘以该Mark的坐标缩放比例得出缩放放大后的每个Mark的坐标 Canvas.SetLeft(item, (Image.Width * double.Parse(item.Tag.ToString().Split(‘|‘)[1])) - 30); Canvas.SetTop(item, (Image.Height * double.Parse(item.Tag.ToString().Split(‘|‘)[2])) - 60); item.Visibility = Visibility.Visible; } } private void Viewport_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e) { if (e.PinchManipulation != null) { //获取所有Mark 在缩放放大时候隐藏所有Mark var markList = WPTools.VisualTreeTool.GetChildObjects<Image>(can_Map, typeof(Image)); foreach (var item in markList) { if (item.Tag == null) continue; item.Visibility = Visibility.Collapsed; } e.Handled = true; if (!_pinching) { _pinching = true; _relativeCenter = new Point(e.PinchManipulation.Original.Center.X / Image.Width, e.PinchManipulation.Original.Center.Y / Image.Height); } double w, h; if (_width < _height) { h = _height * _scale * e.PinchManipulation.CumulativeScale; h = Math.Max(Viewport.ActualHeight, h); h = Math.Min(h, _height); w = h * _width / _height; } else { w = _width * _scale * e.PinchManipulation.CumulativeScale; w = Math.Max(Viewport.ActualWidth, w); w = Math.Min(w, _width); h = w * _height / _width; } Image.Width = w; Image.Height = h; Viewport.Bounds = new Rect(0, 0, w, h); GeneralTransform transform = Image.TransformToVisual(Viewport); Point p = transform.Transform(e.PinchManipulation.Original.Center); double x = _relativeCenter.X * w - p.X; double y = _relativeCenter.Y * h - p.Y; if (w < _width && h < _height) { System.Diagnostics.Debug.WriteLine("Viewport.ActualWidth={0} .ActualHeight={1} Origin.X={2} .Y={3} Image.Width={4} .Height={5}", Viewport.ActualWidth, Viewport.ActualHeight, x, y, Image.Width, Image.Height); Viewport.SetViewportOrigin(new Point(x, y)); } } else if (_pinching) { e.Handled = true; CompletePinching(); } } private void Viewport_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e) { if (_pinching) { e.Handled = true; CompletePinching(); } } }
另外还有个获取指定元素下的所有指定类型子元素的方法：
public static List<T> GetChildObjects<T>(DependencyObject obj, Type typename) where T : FrameworkElement { DependencyObject child = null; List<T> childList = new List<T>(); for (int i = 0; i <= VisualTreeHelper.GetChildrenCount(obj) - 1; i++) { child = VisualTreeHelper.GetChild(obj, i); if (child is T && (((T)child).GetType() == typename)) { childList.Add((T)child); } childList.AddRange(GetChildObjects<T>(child, typename)); } return childList; }
要注意的是：地图图片文件的生成资源要改为：Resource 不然没法获取到图片！坐标信息是从服务器获取的，在MainPage_Loaded()方法内—— App.MapViewModel.GetSp()方法
最后上个演示视频（手绘地图上用户去过的景点的Mark会出现卡通人物头像 没去过的则不出现卡通人物头像）：
WindowsPhone开发—— 使用手绘图片做景区导览地图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。