空间管理您的位置: 3sNews.Net——3S社区&资讯平台 » my name is barry » 日志

arcgis api for flex 高级主题（三）与google map 的融合

上一篇 / 下一篇 2008-10-19 08:46:17 / 个人分类：mushup

arcgis api for flex 高级主题（三）与google map 的融合
'?|}#N1N%v0flex + google map 的基础数据+esri 强大的分析功能
"`w-]7g s h`qQ0直接把这次参加esri开放竞赛的代码开放，大家互相学习，互相进步
这个代码的思路是做一个简单的空间分析，先根据点做buffer，然后再用这个buffer去查这个buffer覆盖的人口数，最后显示出来
下面就是整个程序的流程
gxd1I}"YlP'd0pnt(gmap)->buffer(esri)->getPolutions(esri)->result(esri)->infwindow(gmap)
,oQi7HjW2Au0先在gmap上做个点，然后调用esri的服务做buffer将buffer的结果再交给esri的服务去取人口数，最后得到结果交给gmap显示
&i+deBu0这里面比较关键的地方就是gmap数据和esri数据的转换

大家主要关注一下GMapAddOverlay()函数

Flash:demo
p ??2u*p{J!?0

放代码

<?xml version="1.0" encoding="utf-8"?>
]Ce~0ng3^b0<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:esri="http://www.esri.com/2008/ags" layout="absolute">
<mx:Script>
7I ovL*z$Y{E0        <![CDATA[
v"` y6xG{;lO.Ce {0        import com.google.maps.extras.xmlparsers.kml.Feature;
(_G/Z%~7B6c8aidJ,@0        import mx.containers.HBox;
        import mx.containers.VBox;
        import mx.controls.Image;
        import mx.rpc.events.ResultEvent;
7I5b7g%h_0        //导入flash的命名空间
        import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.rpc.AsyncResponder;
rG$m8Hz'EFw0            import flash.geom.Point;
            import mx.rpc.events.FaultEvent;
TE4r/@gHis)q0            import mx.printing.FlexPrintJobScaleType;
9`:e8I(A2qe0            import mx.printing.FlexPrintJob;
!xY:y0^I$cRD0            import mx.rpc.soap.mxml.Operation;
            import mx.containers.Canvas;
_%O+z"NWs,^0Hv"F0            import flash.text.*;
K&~'m#BM"n,g0
.a5b |Hyt3~0            //导入esri flex api
+f6Q3x_V \0        import com.esri.ags.geometry.MapPoint;
        import com.esri.ags.events.ExtentEvent;
        import com.esri.ags.geometry.Geometry;
            import com.esri.ags.geometry.Polygon;
            import com.esri.ags.geometry.Polyline;
"E.q.\0N UP7\VQ!_0            import com.esri.ags.events.DrawEvent;
k] a u,E rw0            import com.esri.ags.events.ExtentEvent;
            import com.esri.ags.SpatialReference;
qBC8Yb|G0aR.F'{0            import com.esri.ags.events.GeometryServiceEvent;
    import com.esri.ags.tasks.FeatureSet;
            import com.esri.ags.tasks.Query;
            import com.esri.ags.tasks.BufferParameters;
;XFj;g-s`0            import com.esri.ags.tasks.FeatureSet;
9_$?%d}!]0            import com.esri.ags.events.GeoprocessorEvent;
            import mx.rpc.events.FaultEvent;
            import com.esri.ags.geometry.Polygon;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.SpatialReference;
            import com.esri.ags.events.GeometryServiceEvent;
            import com.esri.ags.Graphic;
$j2b-Du$IJ0            import com.esri.ags.tasks.ExecuteResult;
@;JT@r a;G&Ru0             import com.esri.ags.tasks.ParameterValue;
C O"RX2[-fER0             import com.esri.ags.tasks.LinearUnit;

(j Xx[4J'S2?0    //导入google map glex api
            import com.google.maps.Map;
   import com.google.maps.MapEvent;
   import com.google.maps.MapType;
   import com.google.maps.LatLng;
   import com.google.maps.controls.MapTypeControlOptions;
5j$BdpU:YR2Ae0         import com.google.maps.controls.MapTypeControl;
1m2b,Q5w(@'z|M&kk0         import com.google.maps.controls.ZoomControlOptions;
         import com.google.maps.controls.ZoomControl;
         import com.google.maps.controls.OverviewMapControlOptions;
o|6X\o ~(H2rd0         import com.google.maps.controls.OverviewMapControl;
u%x vTQ3R0         import com.google.maps.controls.PositionControlOptions;
F,V j!y/^f!b/Ss9|0         import com.google.maps.controls.PositionControl;
6D}!k3Q@I*\ q+|0   import com.google.maps.MapEvent;
   import com.google.maps.overlays.Marker;
2o/\W+Ho(R1P:L0   import com.google.maps.overlays.MarkerOptions;
|:{7|TW&E:H0   import com.google.maps.styles.FillStyle;
   import com.google.maps.styles.StrokeStyle;
   import com.google.maps.overlays.Polygon;
    import com.google.maps.overlays.PolygonOptions;
^.B%Uz3k1F0    import com.google.maps.overlays.Polyline;
'yNLR0]8?f-t0    import com.google.maps.overlays.PolylineOptions;
    import com.google.maps.InfoWindowOptions;
    import com.google.StatusBarCtrl.StatusBar;
    //        [Bindable]
I1|~x#h:c8yri0    //http://ws.geonames.org/search?q=wuhan&maxRows=10
&v:y5Zb$ws:]7xx9O0          private var gMap:com.google.maps.Map;
          private var m_InfoWndPos:LatLng;
             private function initGMap():void
.P;pB7y$S$f6gFq_a0   {
       gMap = new com.google.maps.Map();
       gMap.key = "ABQIAAAARJxvYgE1qmcmBsUK6FiaORTtt6_ioQbjwG28bvOyh3vOfH5sShSvRDO1-RFvnFi5rwQ5ToDc4ANvbA";
2Li{y;]%I n-[Xo0       gMap.width = mapContainer.width;
       gMap.height = mapContainer.height;

     mapContainer.addChild(gMap);
xZW$d&hS0       gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
       gMap.addControl( new PositionControl( new PositionControlOptions() ) );
lDG D;NR N0        gMap.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) );
        gMap.addControl(new ZoomControl( new ZoomControlOptions()) );
:B$H[3zq.` R0        gMap.addControl( new MapTypeControl( new MapTypeControlOptions() ) );
        gMap.addControl(new StatusBar());
m ~qPU8o3b4W"~~0        addContextMenu();

x&S1DA-r.^0   }
MD(s4k6V6r0       private function mapReadyHandler(e:MapEvent):void
Q7V`8Z6F0            {
g6JsBo7vY0
n5u,_Hc5O{([(k?0              if(gMap.isLoaded())
$uw9J6Jz_'r O:y2v0              {
zF7[m]iA*W.k*n0                 gMap.setCenter(new LatLng(40,116), 10, MapType.NORMAL_MAP_TYPE);
B.F&pBFY6z0                 gMap.setSize(new flash.geom.Point(mapContainer.width, mapContainer.height));
               }
9c~c p ak l"O0            }

    private function GMapResize(event:Event):void
    {
              if(gMap.isLoaded())
Oy*G5]9iRn#r0              {
            //   gMap.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
                   gMap.setSize(new flash.geom.Point(mapContainer.width, mapContainer.height));
              }
HQ'S_!h*L]EE$fS0    }
@Y&|x9?h,E0     //给GMap添加Overlay
    private function GMapAddOverlay(geometry:com.esri.ags.geometry.Geometry ):void
Q t;L;t;^q0    {
    switch( geometry.type )
               {
LyR+|j0                    case Geometry.GEOMETRY_POINT :
e-n8tmq0                    {
                     var pnt :MapPoint = geometry as MapPoint ;
a[7V^}D @0                     var markerA:Marker = new Marker(new LatLng(pnt.y, pnt.x),new MarkerOptions({strokeStyle. new StrokeStyle({color: 0x987654}),fillStyle. new FillStyle({color: 0x223344, alpha: 0.8}),radius: 12,hasShadow: true}));
ml0g~%dUn0      gMap.addOverlay(markerA);
k p\E;{5})U o0                    }
                  //      myGraphicsLayer.add( new Graphic(geometry, sms ));
S]w9uQ,z0                     //   bufferFeature();
6[/}NI)r[0                        break;
                    case Geometry.GEOMETRY_POLYLINE :
ptf A%ai$E}4L0                  //      myGraphicsLayer.add( new Graphic(geometry, sls ));
[w/cL!@V'J.Ea0                     //   bufferFeature();
:F_.u{*\A S2job0                        var ii:int = 0;
6_+Bbbr0                     var jj:int = 0;
],gT/r]G|)B0                        var geometryPolyline: com.esri.ags.geometry.Polyline = geometry as com.esri.ags.geometry.Polyline;
n9d7Jf'~JQX[0                      var pnt1Array:Array = new Array();
                      for(ii = 0; ii <geometryPolyline.paths.length;ii++)
                        {
6e fyPo$En:GG"~|sa0                        for(jj = 0; jj <geometryPolyline.paths[ii].length; jj++)
                        {
                          pnt1Array.push(new LatLng(geometryPolyline.getPoint(ii,jj).y,geometryPolyline.getPoint(ii,jj).x));
                        }
%eu$LC _8^0                        }
XX U6Gi KEW0                   var polyline:com.google.maps.overlays.Polyline = new com.google.maps.overlays.Polyline(pnt1Array, new PolylineOptions({strokeStyle. new StrokeStyle({color: 0xFF0000,thickness: 4,alpha: 0.7})}));
2s0Q+c5XV Dz0                 //       geometryPolyline.
              //       var polyline:Polyline = new Polyline([new LatLng(37.4419, -122.1419),new LatLng(37.4519, -122.1519)], new PolylineOptions({strokeStyle. new StrokeStyle({color: 0xFF0000,thickness: 4,alpha: 0.7})}));
eh6cO3}E0                        gMap.addOverlay(polyline);
                        break;
                    case Geometry.GEOMETRY_POLYGON :
'@0r ]]gY*s:}0                     var i:int = 0;
                     var j:int = 0;
                      var geometryPolygon : com.esri.ags.geometry.Polygon = geometry as com.esri.ags.geometry.Polygon;
1kT]`0j-e7A"]0                        var pntArray:Array = new Array();
S3L_6XjD3o(t0                        for(i = 0; i <geometryPolygon.rings.length;i++)
                        {
-{v,qkk%@@8Qm0                        for(j = 0; j <geometryPolygon.rings[i].length; j++)
v-J_l(pF*IX0                        {
pQH*II#Nd0                          pntArray.push(new LatLng(geometryPolygon.getPoint(i,j).y,geometryPolygon.getPoint(i,j).x));
5{ ~S:Z)b7pl&Pi0                        }
;k:x:tk S3P0                        }
2h0Bs.g?Pw7T%\WW0                       var polygon:com.google.maps.overlays.Polygon = new com.google.maps.overlays.Polygon(pntArray,new PolygonOptions({ strokeStyle. new StrokeStyle({color: 0x223355,thickness: 4,alpha: 0.7}), fillStyle. new FillStyle({color: 0x223355,alpha: 0.7})}));
                       // doGP( geometryPolygon );
pWk7C(vqE(wZ0                       gMap.addOverlay(polygon);
?!ewlHaB&h;~0                    break;
x$jW}{;M7p(B0               }
    }
    private function GMapAddPolygon(geom :Geometry,polyOptoin:PolygonOptions):void
    {
    var i:int = 0;
)]tF$p Vg\!x K!}0                     var j:int = 0;
                      var geometryPolygon : com.esri.ags.geometry.Polygon = geom as com.esri.ags.geometry.Polygon;
                        var pntArray:Array = new Array();
x9y r`p8p0                        for(i = 0; i <geometryPolygon.rings.length;i++)
                        {
                        for(j = 0; j <geometryPolygon.rings[i].length; j++)
                        {
$\&Q8^0f%P3i w.m0                          pntArray.push(new LatLng(geometryPolygon.getPoint(i,j).y,geometryPolygon.getPoint(i,j).x));
                        }
*y^0c_ L-fY2`y0                        }
                       var polygon:com.google.maps.overlays.Polygon = new com.google.maps.overlays.Polygon(pntArray,polyOptoin);
                       // doGP( geometryPolygon );
                       gMap.addOverlay(polygon);
    }
Bu|WTi(D0           private function bufferFeature(geom:Geometry) : void
1Bx5ePu5r0            {
                var myLastFeature:Graphic = new Graphic(geom);
'Y*Q/B!L%A.J']V$~0                var bufferParameters : BufferParameters = new BufferParameters();
                bufferParameters.features = [myLastFeature];
:o-PgyPD8E#n0                bufferParameters.distances = [3000]; // [2000,4000];
IZ2kBzc E0                bufferParameters.unit = BufferParameters.UNIT_METER;
6KIXpl.]$_I0                bufferParameters.bufferSpatialReference = new SpatialReference(102113); //30800

QO-l.[)t0                myGeometryService.addEventListener(GeometryServiceEvent.BUFFER_COMPLETE, bufferCompleteHandler1);
w;c)H[4w[l)Ep0                myGeometryService.buffer( bufferParameters );

            private function computeServiceArea( geom:Geometry ) : void
            {

eJP5}Zs@s0                var graphic : Graphic = new Graphic(geom);
nJ2KK6Pp0                var featureSet:FeatureSet = new FeatureSet([graphic]);

                var params:Object = {
Ql n$K'@5H7s6L0                    "Input_Location" : featureSet,
                    "Drive_Times" : driveTimes
jo'tK0VuP0]/M0                };
7}xL#P&@h j)uC0                gp1.execute(params, new AsyncResponder( onResult, onFault ));
                function onResult(
                    gpResult : ExecuteResult,
`9C]GUx.V*nnnr*v"i0                    token : bject = null
.Y7a)Nz}9z0                ) : void
{4R'}b6q+yE0                {
                    var pv : ParameterValue = gpResult.parameterValues[0];
                    var fs : FeatureSet = pv.value as FeatureSet;
p6[,C4P!@V0                    var i:int = 25600;
%iz,X0e4T#A;C8I;Y0                   for each ( var fea:Graphic in fs.features )
                   {

C2nt;|3F8_0                   var polyOption:PolygonOptions = new PolygonOptions({ strokeStyle. new StrokeStyle({color:i,thickness: 4,alpha: 0.7}), fillStyle. new FillStyle({color: i,alpha: 0.7})})
-N7R}[p,z:tAv)t9]F0                   GMapAddPolygon(fea.geometry,polyOption);
TH,OzKN:L0                   i=i+15000;
                   }

                }
#{?4pzvN0                function onFault( info : Object, token : bject = null ) : void
ES5YTuhRigd0                {
                    Alert.show( info.toString() );
v d?}Iof2K0                }
            }
Drsj g'No0            private var myViewshedDistance:LinearUnit = new LinearUnit();

            private function computeViewshed( geom:Geometry ) : void
-~ }lP;R^0            {
^QN9UO0                this.cursorManager.setBusyCursor();
                var graphic : Graphic = new Graphic(geom);
                var myFeatureSet:FeatureSet = new FeatureSet([graphic]);
                myViewshedDistance.distance = Number(5);
gF*q Yd-o0                myViewshedDistance.units = "esriMiles";
'bEZU;ja1u0                var params:Object = { "Input_Observation_Point": myFeatureSet, "Viewshed_Distance": myViewshedDistance, "env:outSR": 4326 };
                gp2.execute(params);
Bsq"n[*W4W/l0            }

            private function executeCompleteHandler( event : GeoprocessorEvent) : void
4F&K){J F0\0            {
                for each ( var myGraphic : Graphic in event.executeResult.parameterValues[0].value.features )
m @zm;sD0                {
'yO_7zW7\P0                   GMapAddOverlay(myGraphic.geometry);
                }
be$Q2}e"RS0                this.cursorManager.removeBusyCursor();
o-vPws0            }

            private function faultHandler( fe : FaultEvent, token : bject = null ) : void
            {
                this.cursorManager.removeBusyCursor();
                if ( fe.type == "fault" && fe.fault.name == "Error" && fe.fault.faultString == "Error Executing Task" )
                {
                    Alert.show( "Oops - no results. Maybe try a smaller number." );
                }
                else
0Y+FCGk2D)i0                {
}T6TqdgL0                    Alert.show( "Unexpected fault:\n" + fe.toString() );
(Wd0m6R+q^t0                }
t2_*c5a5Y}0            }
         ]]>

I3X4HN8c,K} M0    </mx:Script>
&P9Y(Y*L!X)H0<esri:SpatialReference id="sr" wkid="4326"/>
<esri:GeometryService id="myGeometryService"        fault="onGeomFault(event)"        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/>
<esri:Geoprocessor        id="gp"        fault="onGPFault(event)"        executeComplete="gpResult(event)"        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServer/PopulationSummary"    />
<esri:Geoprocessor id="gp1" url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons"/>
$p6a5WZ&Y/s0 <esri:Geoprocessor
        id="gp2"
        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed"
        executeComplete="executeCompleteHandler(event)"
        fault="faultHandler(event)"
'rJ'H?J1^H*n1D)f$v0    />
<mx:NumberFormatter id="myNumberFormatter" useThousandsSeparator="true" precision="0"/>
8K-?,m#A(A4P#[d9A0
<mx:Canvas width="100%" height="100%">
  <mx:UIComponent id="mapContainer" width="100%" height="100%"
$dNX1W |{0               initialize="initGMap()"
               resize="GMapResize(event) " >
  </mx:UIComponent>
%Vi!{&_e \7a0<mx:Label text="使用方法：右键单击鼠标选择人口查询,可查询该点3000米范围内的人口数量" />
</mx:Canvas>