随笔-254  评论-3298  文章-48  trackbacks-74

如何在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/

 

posted on 2010-03-13 14:25 Bēniaǒ 阅读(2808) 评论(15) 编辑 收藏

评论:
#1楼 2010-03-13 19:48 | helloj2ee      
关注中......
 回复 引用 查看   
#2楼[楼主] 2010-03-14 16:16 | Bēniaǒ      
@helloj2ee
3Q,一起学习。

 回复 引用 查看   
#3楼[楼主] 2010-03-14 17:47 | Bēniaǒ      
@helloj2ee
呵呵~~~

 回复 引用 查看   
#4楼 2010-03-14 21:03 | 椰子匠      
支持一下,Bēniaǒ好专注!
 回复 引用 查看   
#5楼[楼主] 2010-03-15 08:59 | Bēniaǒ      
@椰子匠
:)

 回复 引用 查看   
#6楼 2010-07-07 16:43 | ^^!      
ImageLayer不如叫ImageControl,不是layer是点

PointBase的点会随着缩放漂移,而且大小不变,ImageLayer因为继承关系也是这样

LineString和Polygon的点却不会随缩放漂移,大小也会随缩放而变化,我想要这样的点,请指教该怎么做呢?

 回复 引用 查看   
#7楼[楼主] 2010-07-10 21:41 | Bēniaǒ      
@^^!
具体叫什么都可以,每个人的编程习惯和方式都各有各的风格。

PointBase漂移是可以控制的。

 回复 引用 查看   
#8楼 2011-04-11 20:39 | WWEEWWEE[未注册用户]
引用Bēniaǒ:
@^^!
具体叫什么都可以,每个人的编程习惯和方式都各有各的风格。

PointBase漂移是可以控制的。

这个该如何控制呢?

 回复 引用   
#9楼 2011-04-20 15:19 | junyuz      
TargetType="layer:ImageLayer" 中的layer是指什么
 回复 引用 查看   
#10楼[楼主] 2011-05-13 16:30 | Bēniaǒ      
@junyuz
layer是ImageLayer对象的名称空间引用标识

 回复 引用 查看   
#11楼 2011-05-13 16:33 | junyuz      
明白了,谢谢解答
 回复 引用 查看   
#12楼 2011-11-18 14:47 | 江南烟雨人      
我把样式放在app.xaml的 Application.Resources中,运行会报错,单独放入xaml文件里,Application.Current.Resources["ImageLayerStyle"] 为null
 回复 引用 查看   
#13楼[楼主] 2011-11-18 23:38 | Bēniaǒ      
@江南烟雨人
引用江南烟雨人:我把样式放在app.xaml的 Application.Resources中,运行会报错,单独放入xaml文件里,Application.Current.Resources["ImageLayerStyle"] 为null

放在app中,需要注意定义样式的对象的名称空间引用。

 回复 引用 查看   
#14楼 2011-11-21 16:11 | qq331289042[未注册用户]
如果我地图上有多个 图钉 ,我需要吧这些图钉按某路线连接起来 该如何实现呢?
 回复 引用   
#15楼[楼主] 2011-11-21 22:25 | Bēniaǒ      
@qq331289042
绘制线条不就OK了吗?

 回复 引用 查看   
发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1665581 9xG+4iTUvxM=
微软最有价值专家(MVP)

微软技术社区精英(CNTAC)

2010年IT博客大赛50强

微软最有影响力开发者(GDI)


Bing Maps开发一群:75662563
微软技术群-重庆站:97035589
RIA技术联盟QQ群:26917590
昵称:Bēniaǒ
园龄:4年6个月
荣誉:推荐博客
粉丝:408
关注:26

随笔分类(285)

文章分类(14)

积分与排名

  • 积分 - 760874
  • 排名 - 60

最新评论