arcgis api for flex之专题图制作(饼状图,柱状图等)

Posted llguanli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了arcgis api for flex之专题图制作(饼状图,柱状图等)相关的知识,希望对你有一定的参考价值。

近期公司给我一个任务,就是利用arcgis api for flex实如今地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作。而不是通过点击点显示气泡窗体的形式来实现。这个公司已经实现了。

      经过一段时间的摸索,參照一些网上资源,眼下大概弄出来了,里面还有待完好的地方的。

     效果图例如以下:

技术分享图片

 

      (1)Chart.mxml,基本的展示地图专题图效果的页面 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?xml version="1.0" encoding="utf-8"?

>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags"
               pageTitle="Charts in infowindow" xmlns:symbols="com.esri.ags.symbols.*">
 
    <fx:Style>
        .chartStyle
        {
            borderThickness: 0;
            infoPlacement: center;
            backgroundAlpha: 0;
            infoOffsetX: 0;
            infoOffsetY: 0;
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 0;
            paddingBottom: 0;
        }
    </fx:Style>
     
    <fx:Script>
        <![CDATA[
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.FeatureSet;
            import com.esri.ags.Graphic;
            import com.esri.ags.events.MapEvent;
            import com.esri.ags.tasks.QueryTask;
            import com.esri.ags.tasks.supportClasses.Query;
             
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.AsyncResponder;
             
            protected function myMap_initializeHandler(event:MapEvent):void
            {
                var pie:MapPoint = new MapPoint(113.55185,22.82289);
                var column:MapPoint = new MapPoint(113.59637985600011,22.758225999000047);
                var bar:MapPoint = new MapPoint(113.52757794,22.84012158);
                var gpie:Graphic = new Graphic(pie);
                var gcolumn:Graphic = new Graphic(column);
                var gbar:Graphic = new Graphic(bar);   
                //g.attributes = new Object();                                             
                var thematic:ArrayCollection = new ArrayCollection(
                    [                  
                    { Name: "危化品1", Rate: 25 },                
                    { Name: "危化品2", Rate: 15 },                
                    { Name: "危化品3", Rate: 23 }
                    ]);
 
                //g.attributes.thematic = thematic;
                gpie.attributes = thematic;
                gcolumn.attributes = thematic;
                gbar.attributes = thematic;
                                 
                this.myGraphicsLayerpie.add(gpie);
                this.myGraphicsLayercolumn.add(gcolumn);
                this.myGraphicsLayerbar.add(gbar);
            }
        ]]>
    </fx:Script>
     
    <fx:Declarations>
        <esri:InfoSymbol id="infoSymbolpie" infoRenderer="InfoRendererPieChart" containerStyleName="chartStyle">
        </esri:InfoSymbol>
        <esri:InfoSymbol id="infoSymbolcolumn" infoRenderer="InfoRendererColumnChart" containerStyleName="chartStyle">
        </esri:InfoSymbol>
        <esri:InfoSymbol id="infoSymbolbar" infoRenderer="InfoRendererBarChart" containerStyleName="chartStylee">
        </esri:InfoSymbol>
    </fx:Declarations>
     
    <esri:Map id="myMap" load="myMap_initializeHandler(event)">
        <esri:extent>
            <esri:Extent xmin="113.284171273203" ymin="22.6348519473499" xmax="113.774816132605" ymax="22.9103935318251">
                <esri:spatialReference>
                    <esri:SpatialReference wkid="4326"/>
                </esri:spatialReference>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://localhost:6080/ArcGIS/rest/services/ns_new/MapServer"/>
        <esri:GraphicsLayer id="myGraphicsLayercolumn" symbol="{infoSymbolcolumn}">
        </esri:GraphicsLayer>
        <esri:GraphicsLayer id="myGraphicsLayerpie" symbol="{infoSymbolpie}">
        </esri:GraphicsLayer>
        <esri:GraphicsLayer id="myGraphicsLayerbar" symbol="{infoSymbolbar}">
        </esri:GraphicsLayer>
    </esri:Map>
     
</s:Application>

(2)InfoRendererBarChart.mxml、InfoRendererColumnChart.mxml、InfoRendererPieChart.mxml。各自是柱状图以及饼状图实现的页面

1.InfoRendererBarChart.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          clipAndEnableScrolling="true"
          creationComplete="creationCompleteHandler()"
          implements="mx.core.IDataRenderer" width="100" height="100">
    <!--
         This is used by the QueryResultsWithChart sample.
    -->
 
    <fx:Script>
        <![CDATA[
            private var _data:Object;
 
            [Bindable]
            // implement IDataRenderer
            public function get data():Object
            {
                return _data;
            }
 
            public function set data(value:Object):void
            {
                _data = value;
            }
 
            private function creationCompleteHandler():void
            {
 
            }
 
        ]]>
    </fx:Script>
    <mx:BarChart id="columnChart"  width="100%" height="100%"
                    dataProvider="{data}"
                    showDataTips="true">
        <mx:series>
            <mx:BarSeries id="barSeries" xField="Rate"/>
        </mx:series>
        <mx:verticalAxis>
            <mx:CategoryAxis id="barAxis" categoryField="Name"/>
        </mx:verticalAxis>
        <mx:verticalAxisRenderers>
            <mx:AxisRenderer axis="{barAxis}" showLabels="false"/>
        </mx:verticalAxisRenderers>
    </mx:BarChart>
 
</s:VGroup>

2.InfoRendererColumnChart.mxml 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          clipAndEnableScrolling="true"
          creationComplete="creationCompleteHandler()"
          implements="mx.core.IDataRenderer" width="100" height="100">
    <!--
         This is used by the QueryResultsWithChart sample.
    -->
 
    <fx:Script>
        <![CDATA[
            private var _data:Object;
 
            [Bindable]
            // implement IDataRenderer
            public function get data():Object
            {
                return _data;
            }
 
            public function set data(value:Object):void
            {
                _data = value;
            }
 
            private function creationCompleteHandler():void
            {
 
            }
        ]]>
    </fx:Script> 
    <mx:ColumnChart id="columnChart"  width="100%" height="100%"
                    dataProvider="{data}"
                    showDataTips="true">
        <mx:series>
            <mx:ColumnSeries id="columnSeries" yField="Rate"/>
        </mx:series>
        <mx:horizontalAxis>
            <mx:CategoryAxis id="columnAxis" categoryField="Name"/>
        </mx:horizontalAxis>
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{columnAxis}" showLabels="false"/>
        </mx:horizontalAxisRenderers>
    </mx:ColumnChart>
 
</s:VGroup>

3.InfoRendererPieChart.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          clipAndEnableScrolling="true"
          creationComplete="creationCompleteHandler()"
          implements="mx.core.IDataRenderer" width="100" height="100">
    <!--
         This is used by the QueryResultsWithChart sample.
    -->
 
    <fx:Script>
        <![CDATA[
            private var _data:Object;
 
            [Bindable]
            // implement IDataRenderer
            public function get data():Object
            {
                return _data;
            }
 
            public function set data(value:Object):void
            {
                _data = value;
            }
 
            private function creationCompleteHandler():void
            {
 
            }
 
        ]]>
    </fx:Script>
 
    <mx:PieChart id="pieChart"
                 width="100%" height="100%"
                 dataProvider="{data}"
                 showDataTips="true" >
        <mx:series>
            <mx:PieSeries field="Rate"
                          labelPosition="callout"
                          nameField="Name">
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>
     
</s:VGroup>

上述的整体实现思路是这种:核心是InfoSymbol。InfoSymbol自己定义infoRenderer绑定专题图的模版。比方InfoRendererBarChart.mxml、InfoRendererColumnChart.mxml、InfoRendererPieChart.mxml;程序初始化的时候生成了一些带有统计信息的Graphic加入到地图上。这些Graphic对象的attributes属性集合来保存各个统计的对象,每一个统计的对象包括两个字段:Name表示危化品名称,Rate表示占有比重,以下我们会在InfoSymbol的定义中再次看到这两个字段。当定义好这些Graphic对象以后,我们就能够把它们加入到设置了InfoSymbol符号的GraphicLayer上了。在InfoSymbol的定义中,我们能够看到,在这个InfoSymbol中加入了一个饼图组件PieChart,这个饼图的dataProvider属性绑定的是{data},它代表的事实上就是Graphic对象的attributes属性。你能够简单地这样觉得:InfoSymbol中的data代表的就是其相应的Graphic对象的attributes属性。

其它的柱状图也是同理的。

      既然在InfoSymbol中能够获得Graphic的属性信息,那么依据Graphic的属性信息来绘制不同的专题图就是水到渠成的事情了。

      样式代码解析:     

1
2
3
4
5
6
7
8
9
10
11
12
.chartStyle
{          
    borderThickness: 0/*显示专题图的边框宽度*/
    infoPlacement: center;/*显示专题图的位置,这里是中心*/
    backgroundAlpha: 0;/*显示专题图的背景透明度。这里设置为0。是为了隐藏背景*/
    infoOffsetX: 0;/*显示专题图的X偏移,设置0。不然会偏离原始点位置*/
    infoOffsetY: 0;/*显示专题图的Y偏移,设置0,不然会偏离原始点位置*/
    paddingLeft: 0;/*显示专题图的位置偏移,设置0,不然会偏离原始点位置*/
    paddingRight: 0;/*显示专题图的位置偏移,设置0。不然会偏离原始点位置*/
    paddingTop: 0;/*显示专题图的位置偏移。设置0,不然会偏离原始点位置*/
    paddingBottom: 0;/*显示专题图的位置偏移,设置0,不然会偏离原始点位置*/
}

须要完好优化之处:眼下GraphicsLayer定义了三个(pie,bar。column),然后各自绑定不同的infoSymbol(pie,bar,column)。这样显的有点冗余了,事实上仅仅要定义一个GraphicsLayer,然后动态的推断绑定的是哪个infoSymbol。

备注:

GIS之家论坛(推荐):http://www.gishome.online

GIS之家GitHub:https://github.com/gishome/arcgis-for-js

GIS之家作品:https://shop116521643.taobao.com/shop/view_shop.htm

GIS之家兴趣部落:http://buluo.qq.com/p/barindex.html?bid=327395

GIS项目交流群:238339408

GIS之家交流群一:432512093



以上是关于arcgis api for flex之专题图制作(饼状图,柱状图等)的主要内容,如果未能解决你的问题,请参考以下文章

天津政府应急系统之GIS一张图(arcgis api for flex)解说鹰眼模块

如何利用ArcGIS软件制作专题地图

arcgis-api-for-js-之创建图层和添加图层(1)

去哪里可以买到arcgis专题图

ArcGIS Api For Flex 动态画点和线

arcgis api 4.x for js扩展MapImageLayer支持图片图层加载