Arcgis APIs for Flex Project Instance-development article (1): Map view

The previous article has been clear data with the day map, such a choice is free, and the data of various sources are similar, the day map with the 2000 coordinate system is a common latitude and longitude, convenient thematic data overlay.

Talk less, and see how ArcGIS API for Flex eats a world map. The first thing to be clear is that we need to use four days Map tile service, respectively, latitude map basemap, latitude and longitude map Chinese note, latitude and longitude image basemap, latitude and longitude image Chinese note, details can be see http://www.tianditu.com/guide/index.html. All forms of service are similar, let's write a world diagram layer class.

First create a new class, which must be an extension of com.esri.ags.layers.TiledMapServiceLayer.

 Public class extends tiledmapservicelayer{}

Then, define two variables, _tileinfo, _baseurl, and Layerid,_tileinfo are the basic parameters of the ArcGIS API tile layer, _baseurl is the basic structure of the URL, _baseurl just defines some of the necessary parameters, The complete URL should also include the basic address and tile dynamic parameters, and then define a set property, used to pass in the base address, tile dynamic parameters after that, Layerid is the layer name, this is the world map service a nasty parameter, also give it a set property to add this parameter to the address.

            Private var_tileinfo:tileinfo =NewTileinfo (); Private var_baseurl:string ="? Service=wmts&request=gettile&version=1.0.0&style=default&tilematrixset=c&format=tiles " ; Private var_layerid:string ="VEC";  Public function SetBASEURL (value:string):void{_baseurl= value +_baseurl; }             Public function SetLayerid (value:string):void{_baseurl= _baseurl +"&layer="+value; }

Then there is the definition of _tileinfo, which is the most important step of our class, write a function buildtileinfo (), the specific content is not explained, is roughly defined tile size, coordinate reference system, and map level.

        Private functionBuildtileinfo ():void{_tileinfo.height= 256; _tileinfo.width= 256; _tileinfo.origin=NewMapPoint (-180, 90); _tileinfo.spatialreference=NewSpatialreference (4490); _tileinfo.lods= [                  NewLOD (1, 0.703125, 2.958293554545656E8),                   NewLOD (2, 0.351563, 1.479146777272828E8),                   NewLOD (3, 0.175781, 7.39573388636414E7),                    NewLOD (4, 0.0878906, 3.69786694318207E7),                    NewLOD (5, 0.0439453, 1.848933471591035E7),                   NewLOD (6, 0.0219727, 9244667.357955175),                     NewLOD (7, 0.0109863, 4622333.678977588),                     NewLOD (8, 0.00549316, 2311166.839488794),                     NewLOD (9, 0.00274658, 1155583.419744397),                     NewLOD (10, 0.00137329, 577791.7098721985),                     NewLOD (11, 0.000686646, 288895.85493609926),                   NewLOD (12, 0.000343323, 144447.92746804963),                   NewLOD (13, 0.000171661, 72223.96373402482),                    NewLOD (8.58307e-005, 36111.98186701241),                NewLOD (4.29153e-005, 18055.990933506204),                   NewLOD (2.14577e-005, 9027.995466753102),                  NewLOD (+, 1.07289e-005, 4513.997733376551),                    NewLOD (5.36445e-006, 2256.998866688275)               ]; } 

Finally, it is necessary to implement the Gettileurl method, which combines the dynamic parameters of each tile with the _baseurl to form the parameters of each tile.

            function Gettileurl (level: number, row:number, col:number): URLRequest              {                  var"&tilematrix=""&tilerow=""&tilecol=" +  Col;                 return New urlrequest (URL);              }

Then, this class asks us to override a few get methods, which are all in order. The only thing to note is initialextent, which can be set according to the scope of the current map needs, such as I now set up as Anhui. Of course, can be arbitrarily set, the call when the map extent will overwrite it.

Override Public function Getfullextent (): Extent {return NewExtent (-180,-90, 180, 90,NewSpatialreference (4326)); } Override Public function Getinitialextent (): Extent {return NewExtent (114.76,27.59,120.26, 35.64,NewSpatialreference (4326)); } Override Public function Getspatialreference (): spatialreference {return NewSpatialreference (4490); } Override Public function Gettileinfo (): com.esri.ags.layers.supportClasses.TileInfo {return_tileinfo; }

Finally, write a few strokes in the constructor, mainly to add the Buildtileinfo ().

             Public function Tdttiledmaplayer ()            {                Super();                   Buildtileinfo ();                    Setloaded (true);            }

All right. Class construction is complete, let's call it down. Go back to our index.html and add layers to map.

    <Esri:mapID= "Map" Left= "0" Right= "0"Top= "0"Bottom= "0"logovisible= "false"scalebarvisible= "false">        <Tool:tdttiledmaplayerID= "Vec_c"BASEURL= "Http://t0.tianditu.com/vec_c/wmts"Visible= "true"/>        <Tool:tdttiledmaplayerID= "Cva_c"BASEURL= "Http://t0.tianditu.com/cva_c/wmts"Visible= "true"/>        <Tool:tdttiledmaplayerID= "Img_c"BASEURL= "Http://t0.tianditu.com/img_c/wmts"Visible= "false"/>        <Tool:tdttiledmaplayerID= "Cia_c"BASEURL= "Http://t0.tianditu.com/cia_c/wmts"Visible= "false"/>    </Esri:map>

The image basemap and annotation visible is set to false for the purpose of map switching, and the initial default is the line stroke map. Look at the effect below.

Use a bit of space and switch the map type to add it. Two buttons is ToggleButton, there are many ways to do this button, but we first simple implementation. Add a bool-type bindable attribute Isvector, which identifies the current map type and the state of the control button.

            [Bindable]             Private var Isvector:Booleantrue;

We then make some changes in mxml, mainly by binding the ToggleButton's selection and the visibility of the layer.

        <Esri:mapID= "Map" Left= "0" Right= "0"Top= "0"Bottom= "0"logovisible= "false"scalebarvisible= "false">            <Tool:tdttiledmaplayerID= "Vec_c"BASEURL= "Http://t0.tianditu.com/vec_c/wmts"Layerid= "VEC"Visible= "{isvector}"/>            <Tool:tdttiledmaplayerID= "Cva_c"BASEURL= "Http://t0.tianditu.com/cva_c/wmts"Layerid= "CVA"Visible= "{isvector}"/>            <Tool:tdttiledmaplayerID= "Img_c"BASEURL= "Http://t0.tianditu.com/img_c/wmts"Layerid= "img"Visible="{! Isvector} "/>            <Tool:tdttiledmaplayerID= "Cia_c"BASEURL= "Http://t0.tianditu.com/cia_c/wmts"Layerid= "CIA"Visible="{! Isvector} "/>        </Esri:map>        <S:hgroup Right= "Ten"Top= "Ten"Height= "All"Gap= "0"verticalalign= "Middle">            <S:togglebuttonwidth= "$"label= "Map"Cornerradius= "0"selected= "{isvector}"Click= "Maptype_clickhandler (event)"/>            <S:togglebuttonwidth= "$"label= "image"Cornerradius= "0"selected="{! Isvector} "Click= "Maptype_clickhandler (event)"/>        </S:hgroup>

The following is the ToggleButton click event binding, Mxml I have already written, the following see as code, just a sentence.

            Private function Maptype_clickhandler (event:mouseevent):void            {                =!  Isvector;            }

That's good, two buttons are tied to the type of map. Using the binding mechanism that is very important in flex development, this mechanism can make the code very elegant, but that is not the point, and more importantly, it makes logic simpler and more secure. I'll come up with a similar situation later on in safety.

Arcgis APIs for Flex Project Instance-development article (1): Map view