Zhongke Yan Yuan Webgis outsourcing 2----load Google Maps with Geoserver+openlayers

1. Preparatory work

Installing the Java environment is the JDK

Download GeoServer official website: http://geoserver.org/display/GEOS/Welcome

My description uses the geoserver1.7 version, the 2.0 version is similar, only 1.7 is Chinese, 2.0 version can be used again after the 1.7 version of their own groping, similar.

Download Openlayers official website: http://www.openlayers.org/

Configure the Java_home.

Download map (shp format) available at this site: http://nfgis.nsdi.gov.cn/asp/userinfo.asp?action=queding

After filling in the information, you can download

2. Start GeoServer (installation directory bin\start.bat)

Open a browser, visit: http://localhost/:8080/geoserver/

3, Login GeoServer
Click "Config", enter username ' admin ' in login interface, password ' geoserver '

4. Configuration data
After the login is successful, click Configure. In the configuration interface, point to "data".

In the data configuration interface, point to "database".

5. New Data Set
In the feature data set configuration interface, click "New"

In the new interface, Feature the data description type, select the Shaperfile,feature DataSet ID, enter "Szmap_bingguanjiudian", click "New" (at this point, because the map information is not deployed, First copy the shape-formatted data file to C:\geoserver\data_dir\data\szmapnew. )

In the data file configuration interface, the URL is filled in as: file:data/szmapnew/bingguanjiudian_custom_point.shp
(indicates the corresponding C:\GEOSERVER\DATA_DIR\DATA\SZMAPNEW\BINGGUANJIUDIAN_CUSTOM_POINT.SHP)
CharSet fill in as: GBK, click "Submit".

6. New Feature Type
File loaded successfully, enter feature type edit interface, style select Point,srs fill in 4326, point generation.

Then click "Submit". (Do not tick the enable cache, I just hook it, resulting in the creation of the feature type can not be saved, took a detour)

7. Application Save Configuration
Then click "Apply" in the top left corner,

Then click "Save".

8. Write test Page using Openlayers

　　

Code

9. Deployment Examples
Save this page to C:\geoserver\webapps\geoserver\5.htm
10. Viewing effects
Access http://localhost/:8080/geoserver/5.htm Drag a layer and click on the data

11. Add GoogleMap Layer
Apply for the Google Maps API key
Http://www.google.com/intl/zh-CN/apis/maps/signup.html
The URL of the application is filled in as: http://www.618119.com/:8080/

12. Map domain names to local

Edit the Hosts file (C:\WINDOWS\system32\drivers\etc directory) Change localhost to: www.618119.com, that is, map www.618119.com to 127.0.0.1. Otherwise, Google Maps cannot be loaded locally.

13. Edit HTML

Add javascript code to load Google Maps

　　

<script charset= "Utf-8" src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAB6A1_ Oybce6pp1yjsfo0_hqnfbmrp5f93wwcsym0hw_cwnhkjht-j-a3ds2sotkdxhl3iagkkdglfq "type=" Text/javascript ">
</script>

In the Init method, add

　　

Load Google Maps
var googlesatellite = new OpenLayers.Layer.Google ("Google satellite", {type:g_satellite_map, ' maxzoomlevel ': 18});
Map.addlayers ([Googlesatellite]);
var googlebybrid = new OpenLayers.Layer.Google ("Google Hybrid", {type:g_hybrid_map});
Map.addlayers ([Googlebybrid]);
var gmapsstreets = new OpenLayers.Layer.Google ("Google Streets", {type:g_normal_map, ' maxzoomlevel ': 18});
Map.addlayers ([gmapsstreets]);

14. Viewing effects
Visit http://localhost/:8080/geoserver/5.htm

15. Select the top + sign on the right of the map and choose Google Streets under Base layer

Here, the basic function of accessing the map with Openlayers+geoserver is realized.