WebGis application development framework

Preface

Web Gis, as its name implies, is a geographical system operated through a browser. Many technologies can be used through browsers. mainstream technologies include Html + Javascript, Flex, and Silverlight. Google Baidu, a big company, has both technologies and some people. It uses Html + Javascript to save traffic, increase loading speed, and increase user experience. Most enterprise applications use Flex or Silverlight. I am also a small enterprise-level application, with no access from many users. Most of my applications are on the LAN, and my customers are all dummies. the browser balls used are also IE6, therefore, I use Flex in this application development framework. The advantage of using Flex is that it does not need to handle compatibility issues with multiple browsers.

Development Framework

• Development tools: Adobe Flash Builder 4
• Development Kit: ArcGIS API for Flex 2.5
• Map Service: arcgis, Google Maps, geoserver

This framework is obtained through practice. In particular, the ArcGIS API for Flex package has previously used other open-source packages, and Google map also has a for flex package. However, compared to this, this function is complete and the documentation is rich. There is absolutely no problem in developing a GIS application.

Build Demo

1. Open Flash Builder 4 to create a new FlexWebGis Web work, copy the agslib-2.5-2011-11-30.swc package to lib.
2. Add a flex. web. gis. layer package and create a GoogleMapLayer. as class. The Code is as follows:

1 package flex. web. gis. layer
2 {
3 import com. esri. ags. SpatialReference;
4 import com. esri. ags. geometry. Extent;
5 import com. esri. ags. geometry. MapPoint;
6 import com. esri. ags. layers. TiledMapServiceLayer;
7 import com. esri. ags. layers. supportClasses. levels;
8 import com. esri. ags. layers. supportClasses. TileInfo;
9
10 import flash.net. URLRequest;
11
12 // extends the TiledMapServiceLayer layer to load google Maps
13 public class GoogleMapLayer extends TiledMapServiceLayer
14 {
15 private var _ tileInfo: TileInfo = new TileInfo ();
16 public var _ baseURL: String = "t @ 128 ";
17
18 public function GoogleMapLayer ()
19 {
20 super ();
21 buildTileInfo ();
22 setLoaded (true );
23}
24
25 override public function get fullExtent (): Extent
26 {
27 return new Extent (-20037508.342787,-20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference (102113 ));
28}
29
30 override public function get initialExtent (): Extent
31 {
32 return new Extent (-20037508.342787,-20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference (102113 ));
33}
34
35 override public function get spatialReference (): SpatialReference
36 {
37 return new SpatialReference (102113 );
38}
39
40 override public function get tileInfo (): TileInfo
41 {
42 return _ tileInfo;
43}
44
45 // obtain the vector map
46 override protected function getTileURL (level: Number, row: Number, col: Number): URLRequest
47 {
48 var url: String = "http: // mt" + (col % 4) + ".google.cn/vt/lyrs=" + _ baseURL + "& v = w2.114 & hl = zh-CN & gl = cn &" + "x =" + col + "&" + "y = "+ row +" & "+" z = "+ level +" & s = Galil ";
49 if (_ baseURL = "s @ 92 ")
50 {
51 url = "http: // mt" + (col % 4) + ".google.cn/vt/lyrs=" + _ baseURL + "& v = w2.114 & hl = zh-CN & gl = cn &" + "x =" + col + "&" + "y = "+ row +" & "+" z = "+ level +" & s = Galil ";
52}
53 if (_ baseURL = "t @ 128 ")
54 {
55 url = "http: // mt" + (col % 4) + ".google.cn/vt/lyrs=" + _ baseURL + ", r @ 169000000 & v = w2.114 & hl = zh-CN & gl = cn & "+" x = "+ col +" & "+" y = "+ row + "& "+" z = "+ level +" & s = Galil ";
56}
57 if (_ baseURL = "m @ 161000000 ")
58 {
59 url = "http: // mt" + (col % 4) + ".google.cn/vt/lyrs=" + _ baseURL + "& v = w2.114 & hl = zh-CN & gl = cn &" + "x =" + col + "&" + "y = "+ row +" & "+" z = "+ level +" & s = Galil ";
60}
61 return new URLRequest (url );
62}
63
64 private function buildTileInfo (): void
65 {
66 _ tileInfo. height = 256;
67 _ tileInfo. width = 256;
68 _ tileInfo. origin = new MapPoint (-20037508.342787, 20037508.342787 );
69 _ tileInfo. spatialReference = new SpatialReference (102113 );
70 // _ tileInfo. lods = [new dumps (5, 4891.96981024998, 18489297.737236), new dumps (6, 2445.98490512499, 9244648.868618), new dumps (7, 1222.99245256249, 4622324.434309), new dumps (8,611.49622628138, 2311162.217155), new (9,305.748113140558, 1155581.108577), new (10,152.874056570411, 577790.554289), new (11, 76.4370282850732, 288895.277144), new (12, 38.2185141425366, 144447.638572 ), new (13, 19.1092570712683, 72223.819286), new (14, 9.55462853563415, 36111.909643), new (15, 4.77731426794937, 18055.954822)];
71 _ tileInfo. lods = [new dumps (9,305.748113140558, 1155581.108577), new dumps (10,152.874056570411, 577790.554289), new dumps (11, 76.4370282850732, 288895.277144), new dumps (12, 38.2185141425366, 144447.638572 ), new (13, 19.1092570712683, 72223.819286), new (14, 9.55462853563415, 36111.909643), new (15, 4.77731426794937, 18055.954822), new (16, 2.38865713397468, 9027.977411 ), new levels (17, 1.19432856685505, 4513.988705), new levels (18, 0.597164283559817, 2256.994353), new levels (19, 0.298582141647617, 1128.497176)];
72}
73}
74}

3. Edit the FlexWebGis. mxml file with the following code:

1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <s: Application xmlns: fx = "http://ns.adobe.com/mxml/2009"
3 xmlns: s = "library: // ns.adobe.com/flex/spark"
4 xmlns: mx = "library: // ns.adobe.com/flex/mx" minWidth = "955" minHeight = "600" xmlns: esri = "http://www.esri.com/2008/ags" xmlns: layer = "flex. web. gis. layer. * "creationComplete =" application1_1_creationcompletehandler (event) ">
5 <fx: Script>
6 <! [CDATA [
7 import com. esri. ags. events. MapEvent;
8 import com. esri. ags. utils. WebMercatorUtil;
9 import com. esri. ags. geometry. MapPoint;
10 import mx. events. FlexEvent;
11
12 protected function application1_1_creationcompletehandler (event: FlexEvent): void
13 {
14 esriMap. addLayer (googleMapLayer );
15}
16
17
18 protected function esriMap_loadHandler (event: MapEvent): void
19 {
20 // set the map center point
21 esriMap. centerAt (WebMercatorUtil. geographicToWebMercator (new MapPoint (118.610037, 31.138343) as MapPoint );
22}
23
24]>
25 </fx: Script>
26 <fx: Declarations>
27 <! -- Place non-visual elements (such as services and value objects) Here -->
28 <layer: GoogleMapLayer id = "googleMapLayer"/>
29 </fx: Declarations>
30 <esri: Map id = "esriMap"
31 logoVisible = "false"
32 openHandCursorVisible = "false"
33 scaleBarVisible = "false"
34 zoomSliderVisible = "false" load = "esriMap_loadHandler (event)">
35 </esri: Map>
36 </s: Application>

4. Compile and deploy the generated file to the Web server for running as follows:

5. Download source code

Summary

In this way, the most important part of Gis application "map" is loaded, and the rest is map operations, such as enlarging, downgrading, adding points, lines, surfaces, and other image layers. The map operation will be further explained in detail later.