如何在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( null ,  new  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.5834 ,  29.5708 ));  
imageLayer.Add(layer);

　　　　　　　　 

 

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

 

版权说明

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

  作      者：Beniao

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