关于ESRI Flex API的Symbol

关于ESRI Flex API的Symbol

         Symbol是用来在地图上重新显示地理图元渲染方式的类库。（Symbols are used to represent "geometries" on the map），在实际应用中非常重要，使用好看的样式，无疑可以为你的系统增添很多的亮点，当然客户看着也很舒服。

        查看官方帮助文档中的介绍，我们可以看到关于Symbol的介绍。首先列举如下：

      

  

class	Des
CartographicLineSymbol	Used to draw linear features on the graphics layer.
CompositeSymbol	Used to draw multiple symbols on a single graphic.
FillSymbol	Base class for polygon symbols.
InfoSymbol	Used to display info markers (or bubble markers), containing your own content, at points (MapPoint) on the graphics layer.
LineSymbol	Base class for line symbols.
MarkerSymbol	Base class for marker symbols.
PictureFillSymbol	Used to draw polygon features on the graphics layer using an image that gets repeated over and over.
PictureMarkerSymbol	Used to draw points and multipoints on the graphics layer using an image.
SimpleFillSymbol	Used to draw polygon features on the graphics layer using simple patterns.
SimpleLineSymbol	Used to draw linear features on the graphics layer using simple line patterns.
SimpleMarkerSymbol	Used to draw points and multipoints (or nodes of polylines and polygons) on the graphics layer using simple markers.
Symbol	Base class for all symbols.
TextSymbol	Used to display text at points on the graphics layer.

样式概述：

 

    API中的Symbol可以分为以下几种：

CompositeSymbol（组合样式）：包括CompositeSymbol

MarkerSymbol（点样式）：包括SimpleMarkerSymbol和PictureMarkerSymbol

FillSymbol（面样式）：包括SimpleFillSymbol和PictureFillSymbol

LineSymbol（线样式）：包括SimpleLineSymbol和CartographicLineSymbol

InfoSymbol（信息样式）：包括InfoSymbol一种

TextSymbol（标注样式）：包括TextSymbol一种

 

以下介绍对几种样式做简单介绍

1、 CompositeSymbol：用于将多个样式进行复合起来。使用方法如下：

 

<esri:CompositeSymbol>                        <esri:SimpleMarkerSymbol style="circle" color="0x0000FF" size="20"/>                       

<esri:TextSymbol text="i" color="0xFFFFFF" backgroundColor="0x0000FF">                            <flash:TextFormat bold="true" size="16"/>                        </esri:TextSymbol>

</esri:CompositeSymbol>

  上述代码的效果就是在圆里面写个字母i。详细见ESRI官方在线例子。

  这个效果可以用来进行标注的渲染，使标注多样化。

 

 

2、 SimpleMarkerSymbol：指定预先定义好的一些marker，来渲染地图图元。

ESRi提供的样式有以下几种：

public static const STYLE_CIRCLE:String = "circle" ---圆形

public static const STYLE_CROSS:String = "cross" ----十字叉

public static const STYLE_DIAMOND:String = "diamond" –菱形

public static const STYLE_SQUARE:String = "square" ---矩形框

public static const STYLE_TRIANGLE:String = "triangle" ---三角形

public static const STYLE_X:String = "x" ----x形叉

 

3、 PictureMarkerSymbol：使用一张图片定义样式。这是最常用的渲染方式之一。

我们通常的应用都会使用这一样式，使地图图元的意义更加明朗，地图也更加的美观。

使用AS的定义方法为：

PictureMarkerSymbol(source:Object = null, width:Number = 0, height:Number = 0, xoffset:Number = 0, yoffset:Number = 0, angle:Number = 0)

Source:图片路径，可以为网络路径或本地地址

Width：图片宽度。Height：图片高度。Xoffset：x方向上的偏移。

Angle：图片的旋转角度。

例如：

Var graphicPointSym: PictureMarkerSymbol = new PictureMarkerSymbol(widgetIcon, 30, 30);

 

其中的值都是有默认值的

4、  SimpleFillSymbol：用于对多边形类型的gra进行样式填充。需要使用SimpleLineSymbol设置边界的样式。

5、  PictureFillSymbol：使用图片对多边形进行填充

6、  SimpleLineSymbol：线的简单样式。在此不做介绍

7、  InfoSymbol：功能相当强大，其可以嵌入flex的控件进行渲染，例如饼图等都可以完成。用好此样式可以使自己的系统功能强大，事半功倍。

下面介绍一个为每个gra绘制饼图的例子。

按照如下方法定义一个infosymbol

       <esri:InfoSymbol id="PointSym" infoPlacement="center">

          <esri:infoRenderer>

              <mx:Component>

                  <mx:VBox width="100%" height="100%">

                   <mx:PieChart id="pieChart" dataProvider="{data}" width="90" height="90" showDataTips="true">

                    <mx:series>

                    <mx:PieSeries field="num" labelField="name">

                       <mx:fills> 

                            <mx:Array> 

                                <mx:RadialGradient> 

                                    <mx:entries> 

                                        <mx:Array> 

                                           <mx:GradientEntry color="#FF0000" ratio="0"/>

                                        </mx:Array> 

                                    </mx:entries> 

                                </mx:RadialGradient>

                                <mx:RadialGradient> 

                                    <mx:entries>

                                        <mx:Array> 

                                           <mx:GradientEntry color="#00ff00" ratio="0"/>

                                        </mx:Array> 

                                    </mx:entries> 

                                </mx:RadialGradient>

                            </mx:Array> 

                        </mx:fills>             

                     </mx:PieSeries>

                       </mx:series>

                  </mx:PieChart>

                 </mx:VBox>

            </mx:Component>

        </esri:infoRenderer>

</esri:InfoSymbol>

 

 

将此样式赋给要显示饼图的gra，注意PieChart的dataprivide为{data}这是固定写法，使用之可以将gra的attribute的信息内容赋给data。也就是说:

Dataprivide=data=gra.attribute;

下面的结构是data的定义：

 

var GraInfo:Object=

{

  num:CurrentPec,                          name:gra.attributes.FREQ_LC+"MHz:/n"+CurrentPec+"%"

};

将num值赋予饼图当做饼图的值，name值当做鼠标移上的提示。

至此就可以完成一个infosymbol的使用。效果还是比较好的。

 

 

 

注意：复杂的样式占资源很厉害。绘制很多点和面时请斟酌下。一般图片样式超过300个点用户体验就好了