zoukankan      html  css  js  c++  java
  • 如何在DeepEarth中进行图形绘制(点、线、多边形以及自定义图片图层)

      在上一篇文章《DeepEarth中的几何图形基础框架模型》中将整个DeepEarth的几何图形基础框架模型进行了介绍,之后还通过了绘制一个三角形的应用示例演示了DeepEarth中的几何图形应用。本篇将续着这篇文章介绍DeepEarth中的几何图形应用,包括基本图形绘制(点、线、多边形)和自定义图层的应用。

    一、绘制点图层

      首先看看如何使用DeepEarth中的几何图形基础框架所提供的点基类(PointBase)来实现在地图上绘制一个坐标点。其使用非常简单,如下代码块(效果图见本文末尾的截图):

    //创建几何图层对象
    var transformLayer = new GeometryLayer(map)
    {
        UpdateMode 
    = GeometryLayer.UpdateModes.TransformUpdate,
        ID 
    = Guid.NewGuid().ToString()
    };
    map.Layers.Add(transformLayer);

    //创建点对象
    var dot = new PointBase();
    dot.X 
    = 106.5726;
    dot.Y 
    = 29.5627;
    dot.Width 
    = 100;
    dot.Opacity 
    = 0.88;
    transformLayer.Add(dot);

    二、绘制线条图层

       绘制线条同绘制点一样的简单,如果只是绘制一条普通的线条可直接使用DeepEarth几何图形框架所提供的LineString对象就可以完成线条的绘制,如下示例代码:

    var transformLayer = new GeometryLayer(map)
    {
        UpdateMode 
    = GeometryLayer.UpdateModes.TransformUpdate,
        ID 
    = Guid.NewGuid().ToString()
    };
    map.Layers.Add(transformLayer);
    //创建线条对象,并初始其前景颜色为黄色,线条宽度为2像素
    var line = new LineString(Colors.Yellow, 2);
    //设置线条的起始和结束地理坐标
    line.Points = new ObservableCollection<Point>()
    {
        
    new Point(104.062021177233,30.6666587469201),
        
    new Point(106.489384971208,29.5076372217973)
    };
    //处理鼠标事件
    line.MouseEnter += (oo, ee) =>
        {
            var l 
    = oo as LineString;
            l.LineColor 
    = Colors.Green;
        };
    line.MouseLeave 
    += (mo, me) =>
        {
            var l 
    = mo as LineString;
            l.LineColor 
    = Colors.Yellow;
        };
    transformLayer.Add(line);

      上面的代码非常容易理解,就是通过指定线条的开始和结束的地理坐标点进行线条绘制,并为线条的鼠标事件委托事件处理函数,让鼠标经过线条的时候线条颜色变为绿色(Green),鼠标离开线条则线条的颜色恢复为黄色(Yellow)。

             

      对于如何绘制多边形在《DeepEarth中的几何图形基础框架模型》已经介绍了一个绘制三角形的示例,这里就不在作重复的介绍。下面来看看如何实现自定义图形层并将其他添到到DeepEarth中显示出来。

    三、自定义图片图层 

      要实现自定义图形我们需要在一次的去了解PointBase类,它提供了一个点的几何图形元素基础模型,其主要特性就是可以根据一个地理坐标点进行图形的绘制。于此我们要想实现自定义的的图形绘制和呈现只需要继承于PointBase类,然后重写其呈现模版以实现自定义的图形呈现效果,通过动态的指定不同的图片以达到呈现出不同的效果。以下是自定义图形处理类的完整代码:

    public class ImageLayer : PointBase
    {
        
    protected Grid RootElement;

        
    public ImageLayer(Point point)
        {
            
    base.X = point.X;
            
    base.Y = point.Y;
            
    this.Style = Application.Current.Resources["ImageLayerStyle"as Style;
        }

        
    public override void OnApplyTemplate()
        {
            
    base.OnApplyTemplate();
            
    this.ImagePath = new BitmapImage(new Uri("Resources/arrow.png", UriKind.Relative)) as ImageSource;
            RootElement 
    = GetTemplateChild("RootElement"as Grid;
        }

        
    #region 依赖属性
        
    /// <summary>
        
    /// 图标路径
        
    /// </summary>
        public ImageSource ImagePath
        {
            
    get { return (ImageSource)this.GetValue(ImagePathProperty); }
            
    set { this.SetValue(ImagePathProperty, value); }
        }
        
    public static readonly DependencyProperty ImagePathProperty = DependencyProperty.Register(
            
    "ImagePath",
            
    typeof(ImageSource),
            
    typeof(ImageLayer),
            
    new PropertyMetadata(nullnew PropertyChangedCallback(delegate(DependencyObject sender, DependencyPropertyChangedEventArgs e)
            {
                ImageLayer imageLayer 
    = sender as ImageLayer;
                (imageLayer.GetTemplateChild(
    "imageName"as Image).Source = e.NewValue as ImageSource;
            }))
        );
        
    #endregion
    }

      在上面的自定义的PointBase的扩展控件中,使用了名为ImageLayerStyle的样式,通过样式规范了直定义图形的展现方法,以下是ImageLayerStyle样式的代码:

    <Style x:Name="ImageLayerStyle" TargetType="layer:ImageLayer">
        
    <Setter Property="Template">
            
    <Setter.Value>
                
    <ControlTemplate TargetType="layer:ImageLayer">
                    
    <Canvas>
                        
    <Grid x:Name="RootElement" MinWidth="48">
                            
    <Grid.RenderTransform>
                                
    <ScaleTransform x:Name="_ScaleTransform" ScaleX="1" ScaleY="1"/>
                            
    </Grid.RenderTransform>
                            
    <Image x:Name="imageName" Stretch="None" Width="48" Height="48" HorizontalAlignment="Center"></Image>
                        
    </Grid>
                    
    </Canvas>
                
    </ControlTemplate>
            
    </Setter.Value>
        
    </Setter>
    </Style>

       到这里就完成了一个自定义图形控件的开发,通过下面代码块的方式就可以使用该自定义图层了:

    var imageLayer = new GeometryLayer(map)
    {
        UpdateMode 
    = GeometryLayer.UpdateModes.TransformUpdate,
        ID 
    = Guid.NewGuid().ToString()
    };
    map.Layers.Add(imageLayer);
    //ImageLayer为自定义图层,通过该控件的模板设置所加载的图片
    var layer 
    = new ImageLayer(new Point(106.583429.5708));  
    imageLayer.Add(layer);

             

      通过上述一系列的折腾,成功的将自定义的图层应用到了DeepEarth的图层中并呈现出来,这样仅仅只是呈现出了效果;如果我们想要实现一些用户交互的操作就无能为力了,需要为自定义图层添加事件支持,以相应用户的交互操作。上面自定义的ImageLayer实际上就是一个间接继承于Control的Silverlight扩展控件,也就是说普通的Silverlight的控件所具备的行为特性它也全部拥有,比如MouseLeftButtonDownMouseLeftButtonUp事件特性;另外还可以为其扩展其他的直定义事件支持以实现特定的需求,关于如果扩展自定义事件支持这里就不做介绍。

    版权说明

      本文属原创文章,欢迎转载且注明文章出处,其版权归作者和博客园共有。  

      作      者:Beniao

     文章出处:http://beniao.cnblogs.com/  或  http://www.cnblogs.com/

  • 相关阅读:
    如何学习WindDbg
    如何在程序中嵌入google的V8 Javascript引擎
    理解程序内存
    如何学习Windows编程
    如何让窗口控件半透明
    Sessions, Window Stations and Desktops
    QQ截图时窗口自动识别的原理
    为什么设计模式在C++社区没有Java社区流行?
    当年写的俄罗斯方块
    如何判断一个C++对象是否在堆上
  • 原文地址:https://www.cnblogs.com/beniao/p/1665581.html
Copyright © 2011-2022 走看看